Skip to content

Customizing Widget Appearance

Make the chat widget match your brand by customizing colors, icons, and other visual elements. This guide shows you how to personalize the widget's look and feel.

Accessing Widget Settings

  1. Click Widget in the left menu
  2. You'll see the widget configuration page
  3. Changes preview in real-time on the right side

Widget settings page

Bot Identity

Bot Name

The name that appears in the chat header.

How to change:

  1. Find the Bot Name field
  2. Enter your preferred name
  3. Click Save

Examples:

  • "Support Assistant"
  • "Sarah" (a friendly persona)
  • "YourCompany Help"
  • "Virtual Concierge"

Tip

Choose a name that feels natural. Many businesses use a human name to make the chat feel more personal.

Bot Icon

The image that appears next to the bot's messages.

How to change:

  1. Find the Bot Icon field
  2. Enter the URL of your icon image
  3. Click Save

Requirements:

  • Image should be square (e.g., 100x100 pixels)
  • Use PNG or JPG format
  • Host the image on your website or image hosting service
  • Use HTTPS URLs

Example:

https://yourwebsite.com/images/chat-bot-icon.png

Note

If you don't have an image URL, you can upload an image to your website first, then copy its URL.

Theme Color

The main color used throughout the widget.

Setting Your Color

  1. Find the Theme Color field
  2. Enter a hex color code (e.g., #4F46E5)
  3. Or use the color picker if available
  4. Click Save

Where the theme color appears:

  • Chat header background
  • Send button
  • User message bubbles
  • Links and buttons

Choosing a Good Color

  • Match your brand - Use your primary brand color
  • Ensure contrast - Text should be readable against the color
  • Test on your site - Make sure it looks good in context

Common brand colors:

Color Hex Code
Blue #3B82F6
Purple #8B5CF6
Green #10B981
Red #EF4444
Orange #F97316
Teal #14B8A6

Avatars

Assistant Avatar

The image shown next to bot messages in the conversation.

Configuration:

  1. Find Assistant Avatar URL
  2. Enter the URL of the avatar image
  3. Click Save

This can be the same as the bot icon or different.

User Avatar

Optional image shown next to visitor messages.

Configuration:

  1. Find User Avatar URL
  2. Enter the URL (or leave blank for default)
  3. Click Save

Most businesses leave this as default since visitors don't usually see their own avatar.

Size Settings

Max Height (Desktop)

Controls how tall the chat window can be on desktop computers.

Configuration:

  1. Find Max Height (Desktop)
  2. Enter a value in pixels (e.g., 500)
  3. Click Save

Recommendations:

  • 400-500px - Standard size, works for most sites
  • 600px - Larger, for content-heavy conversations
  • Smaller values for sites with limited vertical space

Max Height (Mobile)

Controls the chat window height on mobile devices.

Configuration:

  1. Find Max Height (Mobile)
  2. Enter a value in pixels
  3. Click Save

Recommendations:

  • 70-80% of screen height usually works well
  • Test on actual mobile devices
  • Consider that keyboards take up screen space

Previewing Changes

As you make changes:

  1. Look at the preview panel on the right
  2. Changes appear in real-time
  3. Test different colors and settings
  4. Save when you're satisfied

Tip

Open your actual website in another tab to see how the changes look in the real context.

Best Practices

Brand Consistency

  • Use your brand's primary color
  • Match the tone of your website
  • Keep the icon professional

Readability

  • Ensure text is readable on colored backgrounds
  • Test with both light and dark text
  • Check contrast ratios for accessibility

Professionalism

  • Use high-quality images for icons
  • Avoid overly playful elements for B2B
  • Keep the appearance clean and simple

Mobile Friendly

  • Test appearance on mobile devices
  • Ensure touch targets are large enough
  • Don't make the widget too tall on mobile

Troubleshooting

Icon not showing

  • Verify the URL is correct and accessible
  • Make sure the URL uses HTTPS
  • Check that the image exists at that URL
  • Try opening the URL directly in a browser

Color looks different

  • Browser rendering can vary slightly
  • Check the hex code is correct
  • View on different devices

Changes not appearing

  • Make sure you clicked Save
  • Refresh your website
  • Clear browser cache
  • Try in an incognito/private window

Next Steps