Appearance
The widget should look like part of your site, not like a third-party tool bolted onto it. Everything visible is configurable from Chatbot Settings.
Logo and avatar
Upload an image to appear in the chat header and next to the bot's replies.
| Formats | PNG, JPEG, WebP |
| Maximum size | 2 MB |
| Not accepted | SVG |
SVG files can contain executable scripts. Because uploaded images are served from our own domain, accepting SVG would let a malicious file run code in the context of the site serving it. PNG, JPEG and WebP cannot do this. Export your logo as a PNG with a transparent background — at display size the difference is invisible.
Practical advice: a square image, at least 128×128, with a transparent background. Logos with wide horizontal padding look lost in a circular avatar slot — crop tight, or use just the mark rather than the full lockup.
Accent colour
The primary colour drives the launcher bubble, the send button, and the highlights throughout the widget. Set it to your brand colour.
Check contrast: the accent carries white text in several places, so a pale yellow or a light pastel produces unreadable buttons. If your brand colour is very light, use a darker variant here and keep the light tone for the background.
Full theme control
Beyond the accent, you can override each surface individually:
| Setting | What it colours |
|---|---|
| Background | The chat area behind the messages |
| Panel background | The widget panel itself |
| Header background | The bar across the top |
| Bot bubble background | The chatbot's message bubbles |
| Bot bubble text | Text inside those bubbles |
| Muted text | Timestamps, hints, secondary labels |
| Border | Dividing lines and outlines |
| Input background | The message box at the bottom |
Any value you leave unset falls back to a sensible default derived from your accent colour. You do not have to fill in all eight — most people set the accent and stop there.
Dark mode
Visitors can switch the widget between light and dark with the moon icon in the header. Their choice is remembered.
If you set custom theme colours, check both modes. A dark navy bubble colour that looks smart on a white background can disappear entirely against a dark panel. Open the widget, toggle the theme, and look at it.
Preview before you publish
The dashboard Chat page renders your chatbot with the current settings applied. Use it to check your colours before pushing the widget live to visitors.
What you cannot change
- Position. The widget sits in the bottom corner. This is fixed.
- Widget dimensions. Fixed panel size, with a visitor-controlled expand option for full-screen.
- The header controls. Restart, expand, dark mode, leave details and close are always available. See Widget features.
Styling collisions
The widget is isolated from your site's CSS, so your stylesheets cannot accidentally restyle it and its styles cannot leak into your page. You do not need to write any CSS, and there is no way to inject your own into the widget.
If the widget looks wrong on your site, that is a bug rather than a styling conflict — see troubleshooting.