Appearance Settings

Customize every aspect of your widget's look and feel to match your brand.

Overview

Appearance settings let you control how your chat widget looks and behaves visually. From colors and sizes to animations and themes, you have full control over the user experience.

Size & Behavior

Default Width & Height

Set the initial dimensions of the chat widget when it opens. Choose sizes that work well on your website without overwhelming the content.

Resizable

Allow users to resize the widget by dragging its edges. Useful for users who want more space for longer conversations.

Draggable

Allow users to move the widget around the screen. Helpful when the widget might cover important content on your page.

Theme Mode

Choose the default color scheme for your widget:

Light Mode

Bright background with dark text. Best for websites with light themes.

Dark Mode

Dark background with light text. Reduces eye strain and matches dark-themed sites.

Theme Settings

Customize colors and styles for both light and dark modes independently:

Colors

Primary color
Secondary color
Background color
Text color

Header Styling

Customize the widget header—background color, text color, title, and logo.

Body Styling

Configure the chat area—message bubble colors, user vs bot message styling, input field appearance.

Widget Styling

Overall widget appearance—border radius, shadows, borders, and container styling.

Launcher Button

The launcher button is what users click to open the chat widget. Customize it to attract attention and match your brand:

Button Text

Text displayed on or near the button (e.g., "Chat with us", "Need help?").

Background & Border

Button background color, border style, and border radius.

Animation

Add attention-grabbing animations to the launcher button:

PulseBounceShakeTadaJelloFlash

Hover Effect

Visual feedback when users hover over the button—scale, color change, or shadow.

Tooltip

Optional tooltip text that appears when hovering over the launcher button.

Best Practices

  • 1

    Match your brand colors

    Use your brand's primary and secondary colors for a cohesive look.

  • 2

    Ensure readability

    Maintain good contrast between text and background colors.

  • 3

    Don't overdo animations

    Subtle animations attract attention; aggressive ones can be annoying.

  • 4

    Test on mobile

    Ensure the widget looks good and is usable on smaller screens.

Next Steps

Integration Settings

Configure security and access controls