Skip to main content

​
Overview

The Styling settings let you customize how your chat widget looks and feels on your website. You can adjust everything from the avatar character to colors, themes, and widget positioning to create a seamless brand experience for your visitors.
All styling changes can be previewed in real-time before saving. Use the live preview panel to see exactly how your widget will appear to visitors.

​
Accessing Styling Settings

  1. Navigate to your agent in the dashboard
  2. Click on Deploy in the sidebar
  3. Select Chat Widget to access the styling options
The styling options are organized into the Styling tab, while content options like welcome messages and suggested questions are in the Content tab.

​
Avatar

Your agent’s avatar is the visual representation that appears in the chat widget. It creates a more engaging, human-like experience for visitors.

​
Selecting an Avatar

OptionDescription
Choose from librarySelect from a collection of pre-made 3D avatar characters
Change anytimeYou can switch avatars at any time from the widget settings
To select or change an avatar:
  1. Click the Change button (or Select if no avatar is set)
  2. Browse the avatar gallery
  3. Click on an avatar to preview it
  4. Click Select to confirm your choice
Avatars animate and can speak responses using text-to-speech, creating a more interactive experience for your visitors.

​
Avatar Background

You can customize the background behind your avatar:
SettingDescription
Custom BackgroundEnable to set a custom background color
Background ColorChoose any color using the color picker or enter a hex code
TransparencyAdjust the background transparency from 0% (fully transparent) to 100% (fully opaque)

​
Appearance

Choose between light and dark themes for your chat widget to match your website’s design.

​
Theme Options

Light Theme

A bright, clean appearance with light backgrounds and dark text. Best for websites with light color schemes.

Dark Theme

A darker appearance with dark backgrounds and light text. Ideal for websites with dark color schemes or for reducing eye strain.
To change the theme:
  1. Navigate to the Styling tab
  2. Under Appearance, click on either the Light or Dark card
  3. The selected theme will be highlighted with a border

​
Brand Color

The brand color is your primary color that appears throughout the widget. It’s used for:
  • Send button
  • Active elements and highlights
  • Links and interactive components
  • Primary action buttons

​
Setting Your Brand Color

  1. Click on the color swatch to open the color picker
  2. Select your desired color, or
  3. Enter a hex color code directly (e.g., #171717)
  4. Click the reset icon to restore the default color
Choose a brand color that matches your website’s primary color for a cohesive look. Ensure sufficient contrast for accessibility.

​
Color Overrides

Fine-tune specific elements of your widget with individual color overrides. Each override can be enabled or disabled independently.

​
Available Color Overrides

Color SettingWhat It AffectsDefault
User Message ColorBackground color of messages sent by visitors#171717
Widget Header ColorBackground color of the widget header bar#171717
Bubble ColorBackground color of the chat bubble button#171717
Hint BackgroundBackground color of hint/tooltip elements#171717

​
Configuring Color Overrides

For each color override:
  1. Toggle the switch to enable the override
  2. Click the color swatch to open the color picker
  3. Select your color or enter a hex code
  4. Use the reset button to restore the default value
When a color override is disabled, the widget uses the default color automatically. Enable overrides only when you need custom colors.

​
Chat Bubble

The chat bubble is the floating button visitors click to open the chat widget. Customize its position and appearance.

​
Bubble Position

Choose where the chat bubble appears on your website:
PositionDescription
LeftBubble appears in the bottom-left corner
RightBubble appears in the bottom-right corner (default)

​
Custom Chat Icon

Replace the default chat icon with your own:
  1. Toggle Chat Icon to enable custom icon
  2. Click Upload to select an image from your device
  3. Supported formats: PNG, JPG, SVG
  4. Recommended size: 48x48 pixels or larger
When you disable the custom icon toggle, the widget reverts to the default chat icon.

​
Saving Your Changes

After making styling changes:
  1. Review your changes in the live preview panel
  2. Click Save Changes when satisfied
  3. The widget on your website will update automatically
If you navigate away with unsaved changes, you’ll be prompted to save or discard them.

​
Discarding Changes

Click Discard to revert all changes back to the last saved state. This is useful if you want to start over or made changes you don’t want to keep.

​
Best Practices

Use your website’s primary colors for the brand color and overrides. Consistent colors create a professional, integrated experience.
Preview your widget in both light and dark themes to ensure it looks good regardless of user preferences or website design.
Choose colors with sufficient contrast ratios. Avoid low-contrast combinations that make text difficult to read.
Place the chat bubble where it won’t obstruct important content. The bottom-right corner is conventional, but left positioning works well for some layouts.
Test your styling on mobile devices. The widget should look good and be easy to use on smaller screens.

​
Styling Reference

​
Default Values

SettingDefault Value
AppearanceLight
Brand Color#171717
User Message Color#171717
Widget Header Color#171717
Bubble Color#171717
Hint Background#171717
Bubble PositionRight
Avatar Background Color#FFFFFF
Avatar Background Transparency70%

​
Color Format

All colors use hexadecimal format: 
#RRGGBB

Examples:
- #171717 (dark gray - default)
- #FFFFFF (white)
- #3B82F6 (blue)
- #10B981 (green)
- #EF4444 (red)

​
Next Steps

Widget Configuration

Configure widget content like welcome messages and suggested questions.

Localization

Set up language options for international visitors.

Deploy Your Widget

Get the embed code and add your styled widget to your website.

Test in Playground

Test your agent’s responses before going live.