Customize Widget Appearance | Documentation

This guide makes the chat widget feel like part of your website. Visitors should feel they are talking to your business, not to an external tool.

If the widget looks unrelated to your site, visitors hesitate to click it. When it matches your brand, it reads as a natural help or contact point.

Open Appearance settings

Open your domain, then go to Settings > Appearance and open the Embed Widget Bubble card.

Widget appearance

You will see a live preview as you make changes.

The floating button visitors click to open the chat. Upload it with Upload Widget Icon. Use a square image with a simple symbol and a transparent background. Avoid long text or fine detail; the icon is small, especially on mobile.

AI avatar

Shown in the chat header and next to the assistant's messages. Upload it with Upload AI Avatar. A mascot, brand symbol, or simple character works well. Avoid banners, screenshots, or busy photos.

Image rules

PNG, JPEG or GIF, up to 5 MB. SVG files are not accepted.
Icons and avatars larger than 512 pixels are scaled down to fit when you upload them. The format is kept, so a transparent PNG stays transparent.
An animated GIF is stored exactly as uploaded, so the animation keeps playing.

AI name

Shown at the top of the chat window, next to the avatar. Set it in AI Name. Choose a name that communicates purpose, such as Support, Customer Care, or Product Assistant. A new domain starts with "AI Assistant".

The same name appears on your share link, and the assistant uses it to introduce itself.

Colors

You can adjust the AI Name Color, Background Color, Text Color, Header Color, Send Button Color, User Bubble Color, and User Text Color. Use one main brand color, keep backgrounds neutral, and keep strong contrast so messages are easy to read. If reading takes effort, visitors stop.

The Widget Teaser fields in the same card set the short message that can appear beside the closed widget. See Widget Bubble & Teaser.

What visitors see in the header

The chat window's header shows the AI avatar and AI name, and a × button that closes the chat. The contact bell beside the message box becomes available once the assistant has answered the visitor's first message, or from the start when you let visitors ask for a person. See Live Chat — Request a Person.

Use the live preview

While editing, watch the preview panel. Check readability, contrast, mobile visibility, and icon clarity, and adjust until the chat feels like a natural part of your interface.

This page covers the embed widget bubble. Two more areas live under Appearance:

Theme and templates for colors, typography, and one-click Light or Dark presets. See Theme & Templates.
Whitelabel options such as removing the "powered by" mark, on eligible plans. See Whitelabel.

Changes apply to the widget after saving. You may need to refresh your website page to see them.

Next step

Your representative now matches your website. Continue to Go Live and then Install the Website Widget.