Change the widget's colour, greeting and position

Appearance settings, and when they reach your site.

C
ChatteringJuly 28, 2026

Open Widget → Appearance in the dashboard.

What you can change

  • Accent colour — used for the launcher, the send button and your visitors' own messages
  • Greeting — the second line of the panel header ("How can I help?")
  • Launcher side — bottom-right or bottom-left

Choose Save & publish and the change applies to the live widget on your site.

When visitors see it

The widget file is served through a CDN with a five-minute cache, so a change reaches everyone within about five minutes. A hard refresh on your own machine will not make it faster — the cache is at the edge, not in your browser.

Changing the accent colour

In Widget → Appearance, find the Accent colour field near the top of the page. You can set a colour in two ways:

  1. Click the colour swatch to open the picker, then drag the crosshair to the shade you want.
  2. Type or paste a hex value (for example, #1a56db) directly into the input field next to the swatch.

Pick a colour that has enough contrast against white text — the send button and incoming-message bubbles both render white text on your accent colour. If your brand primary is a very pale or very desaturated shade, try going one or two steps darker so the text stays readable.

Once you're happy with the colour, click Save & publish. The updated launcher and button colours appear on your live site within a few minutes.

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:

  1. In Widget → Appearance, scroll to the Greeting field.
  2. Clear the existing text and type your new message.
  3. Click Save & publish.

Keep the greeting short — one clear question or offer works better than a long sentence. The field accepts up to 80 characters. 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 side 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:

  1. In Widget → Appearance, find the Launcher side dropdown.
  2. Select Bottom-left or Bottom-right.
  3. 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. The widget stays within the safe area on iOS and avoids the navigation bar on Android. If your site has a full-width sticky footer on mobile, the launcher sits just above it regardless of which side you pick — no extra configuration is needed.

Changes go live automatically

Every time you click Save & publish, Chattering pushes the update right away. The five-minute CDN cache means most visitors see the new colour, greeting, or position within five minutes 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.

Need more help? Browse all articles or ask the assistant in the chat — it answers from these docs and can connect you with the team.

Was this helpful?

Related articles

Change the widget's colour, greeting and position | Chattering Help Center | Chattering.ai