Customize widget appearance
Every visual element of the widget is configurable. You can keep going until it feels like a native part of your site.
Before you start
- The widget exists in Settings → Web Chat. If not, create one first.
- Pick or have at hand the colors you want to use. Brand hex codes are easiest.
Steps
- Open Settings → Web Chat and click your widget.
- Open the Appearance tab.
- Work through the sections below in any order. The preview pane updates as you change values, so you can iterate without leaving the page.
Primary color
The primary color is the dominant accent throughout the widget — the header background, the send button by default, the active state of input fields. Most teams set this to their brand’s primary brand color.
Dark mode
The widget supports a separate dark-mode palette. You can:
- Enable dark mode as an option visitors can toggle.
- Force dark mode by default.
- Leave dark mode off entirely.
When dark mode is enabled, each color setting has a dark-mode counterpart. Set them independently so the widget looks polished in both modes.
Message bubbles
Sent and received messages have separate bubble colors. Customize:
- Sent bubble — the visitor’s outgoing message, usually a tinted version of the primary color.
- Received bubble — the agent’s incoming message, usually a neutral surface color.
- Each one has light- and dark-mode variants.
Background and input box
- Background — the chat window’s background color.
- Input box — the message composer at the bottom, including the typing area.
Send button
The icon and color of the send button. You can change the icon shape and the button’s accent color independently.
Launcher
The launcher is the floating bubble in the corner of the page. Options:
- Icon mode — show an icon (chat bubble, headset, custom icon).
- Custom image — upload your own image as the launcher.
- Team-photo launcher — show real photos of your agents. Adds a human touch and improves first-impression conversion on marketing sites.
- Agent-stack avatar — show the avatar of the routed Agent Stack, if the widget routes to one.
Customize the launcher’s background color independently from the rest of the widget.
Show or hide identity
- Show message sender identity — display the agent’s name and avatar on incoming messages. Turn off for a more product-like, anonymous feel.
- Attachments enabled — let visitors upload images and files. Turn off if you don’t want unsolicited attachments.
Verify it worked
- The preview pane in the Appearance tab matches what you intended.
- Open your site (or staging site) with the widget installed and confirm the live widget matches the preview. If a CDN or browser cache is in the way, hard-refresh.
Tips
- Test dark mode on your actual page, not just in the preview. Some site styles bleed into the widget’s surroundings; you want to see the full effect.
- Use a slightly tinted neutral, not pure white or pure black, for received bubbles and backgrounds. It softens the contrast and feels more designed.
- Team-photo launchers convert better on conversion-focused pages — sales, signup, support landing. They also do well on Spanish, Italian and Nordic markets where personal touch is valued. Switch to icon mode for utility pages where you want the widget to feel like a tool, not a person.
Troubleshooting
-
Symptom: Colors save but don’t appear on the live widget. Fix: The browser cached the previous styles. Hard-refresh the page or test in a private browsing window.
-
Symptom: The dark-mode preview is fine but the live widget always renders light. Fix: Confirm dark mode is enabled in the Appearance settings, and that the dark-mode trigger (system preference or visitor toggle) is what you expect.