Style your chat widget
Pick a look for the chat widget, set your brand colour, font, corners and light or dark mode, and edit the header, all with a live preview.
Last updated 2 min read
The chat widget should look like part of your store. The Style tab lets you choose one of four looks, set your colours, font and corners, and write the header text. A live preview shows the real widget on a sample store as you change things.
Before you start
- Who can do this: owners and admins.
- Plan: all plans.
- What you need: your brand colour as a hex code, and optionally a link to a square logo image.
- Time: about 5 minutes.
Step by step
- Open Settings > Chat widget. The Style tab opens first.
- Under Look, pick Minimal, Bold, Modern or Classic support.
- Set Brand colour. With Modern, you can also set a Gradient colour or leave it Automatic.
- Drag Corner roundness from square (0 px) to very round (28 px).
- Choose a Font: Clean (your visitor’s system font), Rounded or Classic serif.
- Choose Light or dark: Follow the visitor’s device, Always light or Always dark.
- Under Header, fill in Title (your store name if empty), Logo URL, Welcome message and Reply time.
- With Classic support, list up to five names under Team shown in the header (comma separated, up to 5).
- Watch the Live preview on the right. It says Not saved yet until you save.
- Press Save changes.
What happens next
A message confirms Chat widget saved. Live on your site within 5 minutes. You do not need to change the snippet on your site. Browsers keep the settings for up to five minutes, then pick up the new look.
Every save is recorded in the audit log with what changed.
The four looks
| Look | Feels like |
|---|---|
| Minimal | White, airy, quiet |
| Bold | Big colour, strong type |
| Modern | Gradient, soft depth |
| Classic support | Team + reply time |
Tips
- Use the same colour as your store's buttons, so the chat feels native.
- Keep the welcome message short and human, such as "Hi there, how can we help?".
- Only promise a Reply time you can keep during business hours. Outside hours, the widget shows your away message instead. See Set chat away hours.
- To change the button itself (icon, label, size, corner), see Customise the chat button.
Troubleshooting
"Use a colour like #6d28d9"
The colour must be a # followed by six hex characters. Use the picker, or type a full code such as #1f7a5a.
"Only admins can change the chat widget"
Agents and viewers see the settings read-only. Ask an owner or admin.
"Check the widget settings"
One of the values is outside its allowed range, for example a title over 60 characters. Shorten it and save again.
My changes do not show on the site
Wait five minutes or open your site in a private window. Check that you pressed Save changes; the preview header says Saved when you have.
Frequently asked questions
Can I change the colours of the Hushdesk chat widget?
Yes. On Settings, Chat widget, Style, set Brand colour with the picker or a hex code such as #6d28d9. The Modern look also has a Gradient colour, which is automatic until you pick one. The live preview on the right shows every change before you save.
Which chat widget looks can I choose from?
Four. Minimal is white, airy and quiet. Bold uses big colour and strong type. Modern adds a gradient and soft depth. Classic support shows your team's initials and a reply time in the header. You can fine-tune each one with colour, font and corners.
Can the chat widget follow my visitor's dark mode?
Yes. Under Light or dark, choose Follow the visitor's device and the widget switches with their phone or computer setting, so night-time shoppers are not dazzled. You can also force Always light or Always dark if your store has one fixed look and you want the chat to match it.
Can I use my own font in the chat widget?
You can choose from three font styles, Clean, Rounded and Classic serif. Clean uses your visitor's system font. The widget uses system fonts only and never downloads web fonts, which keeps it fast and private. Custom font files are not supported.
How long until style changes show on my website?
Usually within five minutes. After you press Save changes, Hushdesk confirms that the widget is saved and live on your site within five minutes. Browsers keep the widget settings for up to five minutes, so a hard refresh may be needed to see it sooner.
How do I add my logo to the chat header?
Paste a link to a square image into Logo URL under Header on the Style tab. The image must already be online, for example on your store's file host. Uploading a logo directly in Hushdesk is not available, so use a link that will not change.
Was this helpful?
Related articles
- Customise the chat buttonChange the chat launcher's icon, label, size and corner, move it away from the edges and lift it on phones so it never covers your cart bar.
- Install live chat on any websiteCopy one line of code from Settings, Chat widget, Install and paste it before the closing body tag. Works on Wix, Squarespace, Webflow and custom sites.
- Ask for a name and email before a chat startsTurn on a short pre-chat form so visitors leave their name and email before the first message, and choose which fields are required.
- Set chat away hours and the offline messageShow an away message in the chat widget outside your business hours. Set the hours under Business hours and write the message on the Behaviour tab.
Still stuck?
Chat with the Hushdesk team. A person answers on every plan.