Open Widget → Appearance in the dashboard.
What you can change
- Accent color — used for the launcher and your visitors' own messages (and for the send button when the widget shows its dark theme)
- Welcome message — the second line of the panel header ("How can I help?")
- Launcher position — bottom right or bottom left
Choose Save & publish and the change applies to the live widget on your site.
When visitors see it
Your colour, welcome message and launcher position are not part of the cached widget file: the widget fetches them fresh every time a page with it loads, so visitors see a change on their next page load. Reload a page of your own site to check it.
Changing the accent colour
In Widget → Appearance, find the Accent color swatches at the top of the page. Click one of the eight preset colours: Indigo, Vermilion, Violet, Blue, Emerald, Rose, Amber or Slate. The chosen colour's hex code shows under the swatches. To use any other colour, your page can call window.Chattering.setStyles({ primaryColor: '#1a56db' }) once the widget script has loaded.
You don't need to check contrast yourself: text and icons on your accent colour switch automatically between white and near-black, whichever is easier to read.
Once you're happy with the colour, click Save & publish. The new colour appears on your live site the next time a page with the widget loads.
Updating the greeting text
The greeting is the short line of text visitors see when they open the chat panel — by default it reads "How can I help?" You can replace it with something more specific to your product or audience.
To change it:
- In Widget → Appearance, scroll to the Welcome message field.
- Clear the existing text and type your new message.
- Click Save & publish.
Keep the greeting short — one clear question or offer works better than a long sentence. A few examples that work well in practice:
- "Got a question? We're here."
- "What can we help you with today?"
- "Tell us what you're building."
Avoid anything vague like "Hello!" on its own — visitors already know they opened a chat widget. Give them a reason to type.
Choosing the widget position
The Launcher position setting places the chat button in either the bottom-right or bottom-left corner of the page.
Bottom-right is the default, and the position most visitors expect — it's where chat widgets have lived for years, so visitors instinctively look there. If another element (a cookie-consent button, a "back to top" arrow, or a custom help beacon) already sits in the bottom-right corner and overlaps the widget, switching to bottom-left solves the conflict without any CSS changes.
To switch:
- In Widget → Appearance, find the Launcher position buttons.
- Select Bottom left or Bottom right.
- Click Save & publish.
On mobile screens the launcher takes up a larger proportion of the viewport, so after saving, test on a real phone or the browser's responsive-design mode. On screens up to 480px wide, the launcher bubble sits 14px from the bottom corner and the open panel fills the whole screen. The launcher does not detect a sticky footer, so if your site has one on mobile, check that the launcher does not cover it.
Changes go live automatically
Every time you click Save & publish, Chattering pushes the update right away. Visitors see the new colour, welcome message or position the next time a page with the widget loads, without any action on their end. Visitors who are mid-conversation see the change the next time they load your site. There is no need to re-embed the widget script or contact support — the published settings propagate on their own.