helixml / chat-widget

Theme Customization

Overview:

This document outlines the available theme customization options for the chat widget, enabling developers to tailor its appearance to their specific applications.

Motivation:

The chat widget offers a wide range of customization options, enabling developers to align its appearance with their application’s branding and design aesthetic. By understanding the available theme options, developers can seamlessly integrate the chat widget into their application’s user experience.

Key Concepts:

  1. CSS Styling: The chat widget’s visual appearance is largely controlled by CSS styles. Developers can override default styles or introduce new styles to modify various UI elements.

  2. Theme Objects: The chat widget defines theme objects that encapsulate style properties for different UI elements, such as buttons, inputs, and containers. Developers can customize these objects to modify the overall look and feel of the widget.

Customization Options:

  1. Global Theme Settings:

  • theme.css: This file houses the primary stylesheet for the chat widget. Developers can modify existing styles or introduce new styles within this file to customize the overall widget appearance. Refer to this file for a comprehensive view of the available styles and their application: src/styles/theme.css

  • theme.js: This file defines the theme objects used by the chat widget. Developers can customize the properties of these objects to adjust the styles of specific UI elements. For example, to change the color of the chat bubble background:

    // src/styles/theme.js
          export default {
              chatBubble: {
                backgroundColor: '#f0f0f0', // Customize chat bubble background color
                ...
              },
              ...
          };
  1. Component-Specific Styling:

  • ChatInput.css: This file defines the styles for the chat input component. Developers can customize the input field’s appearance, such as its size, color, and border style.

  • ChatMessages.css: This file defines styles for the chat messages area. Developers can control the layout, alignment, and appearance of messages.

  1. Override Default Styles:

Developers can override default styles by using the !important CSS declaration. For example, to change the color of the chat button to blue:

```css
          // src/styles/theme.css
          .chat-button {
            background-color: blue !important;
          }
          ```

Examples:

  1. Changing the Chat Bubble Color:
// src/styles/theme.js
          export default {
            chatBubble: {
              backgroundColor: '#e0e0e0', // Customize chat bubble background color
              ...
            },
            ...
          };
  1. Customizing the Chat Input Font:
// src/styles/ChatInput.css
          .chat-input {
            font-family: 'Arial', sans-serif;
          }

Best Practices:

  • Use CSS Classes: When customizing styles, utilize CSS classes to ensure maintainability and avoid overwriting default styles.
  • Avoid Global Styles: Minimize the use of global styles to prevent potential conflicts and maintain a structured codebase.
  • Use CSS Preprocessors: Consider using CSS preprocessors like Sass or Less for enhanced organization, modularity, and maintainability of styles.

Reference: