Skip to main content

Customization

Customize the look and feel of your chat widget to match your brand.

Appearance Settings​

Position​

Choose where the chat widget appears on your website:

  • Bottom Right (default)
  • Bottom Left

Theme​

Select the color theme:

  • Light: Clean, white background
  • Dark: Dark mode for dark-themed websites
  • Auto: Automatically matches the visitor's system preference

Greeting Message​

Set an initial message that appears when the chat opens:

Hi! How can I help you today?

This helps visitors understand they can ask questions.

Branding Options​

Add your company logo to the chat header:

  1. Enter the URL to your logo in the Logo URL field
  2. Recommended size: 150x40 pixels
  3. Use HTTPS for secure loading

Avatar​

Set an avatar for AI messages:

  1. Enter the URL to your avatar image
  2. Recommended size: 40x40 pixels (circular)
  3. Can be a photo or brand icon

Secondary Color​

Customize the accent color used for:

  • Send button
  • Links
  • Highlights

Enter a hex color code (e.g., #18181b for black)

Button Style​

Choose the shape of the chat button:

  • Rounded: Slightly rounded corners
  • Square: Sharp corners
  • Pill: Fully rounded (circular ends)

Preview​

After making changes, you can preview them by:

  1. Saving your settings
  2. Visiting your website
  3. Refreshing the page

Brand Guidelines​

For best results:

  • Use consistent colors with your website
  • Keep logos simple and readable at small sizes
  • Test on both desktop and mobile
tip

Start with subtle customizations and adjust based on visitor feedback.