Make it yours
Change your chat widget's colours and look
When you finish, the chat on your website carries your own colours, sits where you want it, and can drop the Powered by line.
Before you start
- You have a bot. Everything you save here applies to that one bot's widget.
- You know your brand colour as a hex code, for example #0b5cff.
- Your bot is live on your site, so you can check the change actually landed. How to check
About 5 minutes. You’ll do three things:
- set your colours
- choose where the launcher sits
- save and reload your own site
Everything about how the chat looks lives on one page, split into tabs. Colours and theme are on Look. Where the launcher sits is on Behavior. A preview on the right redraws as you change things, and your real website catches up about a minute after you save.
Set your colours
In the bot sidebar, under Bot setup, click Appearance.
Click the Look tab.
Under Theme, choose light, dark or system.
system follows whatever the visitor's own device is set to, so some of them see dark whatever you see.
Under Colors, set Primary (launcher / accents) to your brand colour.
That is the colour of the bubble and the accents. The preview on the right changes as you pick.
Click Save.
The save bar reads Saved. Live within ~60s.
Four more colour fields sit in the same Colors block: User message, Bot message background, Panel background and Text. Most owners leave them alone. Per-element hex pickers for the header, the suggestion chips and the composer are tucked behind Advanced colour overrides further down the same tab.
| Option | Best for |
|---|---|
| Bottom right corner | The default, and where most visitors look for a chat. Start here. |
| Bottom left corner | Your site already has something in the bottom right, such as a cookie bar or a call button. |
| Right side rail | A tall tab down the edge of the page. It shows your launcher label as words rather than a bubble. |
| Left side rail | The same tab on the left edge, for when the right-hand side is already taken. |
Choose where the launcher sits
Still on Appearance, click the Behavior tab.
Under Launcher, click the card for the position you chose.
Change Size if the default feels wrong.
Three sizes: small, medium and large. Medium is the default.
Click Save.
The two things your plan decides
| What you want | The plan it needs | Where the control is |
|---|---|---|
| A font of your own | Growth, Scale or Advanced | Look, then Shape & font, then Font family |
| Hiding the Powered by line | Scale or Advanced | Look, then Branding |
On Scale or Advanced, untick Show "Powered by" branding on the Look tab and the line goes from your widget. Below Scale the tick box is fixed on, and the note beside it reads Available on Scale and above. Your current plan always shows this.
A font of your own works the same way. On Growth and above, open Shape & font and set Font family to custom. A Custom font URL (.woff2 / .woff) box appears under it, and your font's address goes in there. Below Growth the custom option is greyed out, and the four built-in families stay available: system, inter, poppins and roboto.
Check it on your own site
Open your website in a new browser tab.
Wait about a minute, then reload the page.
Your site holds the old widget settings for roughly a minute, so a change is never instant.
Look at the chat bubble, then open it.
The bubble should be in your colour and in the position you picked, and the panel should open in your theme.
If it didn’t work
I saved but my site looks the same
- Check
- Look at how long ago you saved. The save bar tells you the wait: Saved. Live within ~60s.
- Fix
- Wait a minute and reload the page. A hard reload helps when your browser is holding an old copy. If it is still unchanged after a few minutes, check you saved on the bot that is actually installed on that site.
- Resolved when
- The bubble on your site is the new colour.
The custom font option is greyed out
- Check
- Open Look, then Shape & font, then Font family, and look at the custom option. A greyed one carries the plan it needs.
- Fix
- A font of your own starts on Growth. Move up a plan from Plan & billing, or pick one of the four built-in families: system, inter, poppins or roboto.
- Resolved when
- custom is selectable and Custom font URL (.woff2 / .woff) appears under the dropdown.
The Powered by tick box will not untick
- Check
- The note beside it reads Available on Scale and above. Your current plan always shows this.
- Fix
- Hiding that line starts on Scale. Move to Scale or Advanced from Plan & billing, then come back and untick Show "Powered by" branding. Saving it on a lower plan is refused by the server as well as by the form.
- Resolved when
- The Powered by line is gone from the preview and from your live widget.
There is no preview on the right
- Check
- Look at how wide your browser window is. The preview only renders on a wide one.
- Fix
- Widen the window, or work on a laptop rather than a phone. Everything still saves without it, and your own site is the real check anyway.
- Resolved when
- The Live preview panel is back beside the tabs.
My colours look wrong in dark mode
- Check
- Open Theme and read which one you are on. system hands the choice to the visitor's device, so some visitors get dark whatever you see.
- Fix
- Set Theme to light or dark to force one for everybody. If you want to keep system, open Advanced colour overrides on the Look tab and set Header background and Header text yourself.
- Resolved when
- The preview reads well with Theme set to dark and again with it set to light.
I changed the colour on one bot and the other did not follow
- Check
- Open the other bot's Appearance page and read its Primary (launcher / accents) value. It will still be the old one.
- Fix
- Appearance is saved per bot. Make the same change on that bot and save it there too. There is no account-wide brand setting today.
- Resolved when
- Both widgets carry the same colour on their own sites.
What this can’t do
- A font of your own needs Growth, Scale or Advanced. Below that, choose one of the four built-in families instead.
- Hiding the Powered by line needs Scale or Advanced. Below that the tick box is fixed on, and the server refuses the change as well.
- Appearance is saved per bot. There is no account-wide brand setting, so a second bot is styled again from scratch.
- The preview is hidden on a narrow window. It is a wide-screen panel, not a phone one.
- The preview is a drawing, not your live widget. The page says so: Visual preview. Save then click your widget on a real page for the full experience.
- Changes are never instant. Your site holds the old settings for about a minute after you save.