Skip to main content

Customize Your Chat Widget's Colors, Spinner, and Controls

Steffen Slavetinsky
Updated

Customize Your Chat Widget's Colors, Spinner, and Controls

The Chat Settings tab lets you match the chat widget to your brand and decide how it behaves. You can set the colors of the chat window, choose whether the loading spinner animates, and pick which control buttons guests see. These settings apply to every chat widget across your Organization.

Where to Find These Settings

  1. Open your Organization settings.
  2. Select the Chat Settings tab.
  3. Scroll to the Colors, Spinner, and Controls sections.

Organization Settings, "Chat Settings" tab, showing the "Colors" section with its grid of color pickers, and below it the "Spinner" section (Animation toggle) and the "Controls" section (Fullscreen Button and Mobile Fullscreen toggles).

Colors

The Colors section controls how the chat window looks. Each color uses a picker, so you can click the swatch and choose a color or paste a hex value (like #7c63fc). "Agent" messages are the ones your assistant sends. "User" messages are the ones your guests send.

  • Window: the background of the chat window's header and footer.
  • Chat: the background of the chat area behind the messages.
  • Agent: the background of your Agent's message bubbles.
  • Agent Text: the text color of your Agent's messages.
  • Agent Highlight: the color of highlighted parts of your Agent's messages, like links.
  • User: the background of your guests' message bubbles.
  • User Text: the text color of your guests' messages.
  • User Highlight: the color of highlighted parts of your guests' messages.

Set the colors you want, then save your changes.

Note: These are the colors of the chat window itself. The colors of the chat launcher button (the bubble guests click to open the chat) are set separately on the Brand tab.

Spinner

The spinner is the small loading indicator that shows while your Agent is preparing an answer.

  • Animation: keep this on for a moving spinner, or turn it off for a static one. It's on by default.

Controls

The Controls section decides which buttons guests see in the widget on mobile devices.

  • Fullscreen Button: show a button that lets guests expand the chat to fill their whole screen on mobile. On by default.
  • Mobile Fullscreen: open the chat in fullscreen automatically on mobile devices. Off by default.

The guest-facing chat widget on a website with custom colors applied, showing an Agent message bubble and a user message bubble in their configured colors, plus the fullscreen control button.

Good to Know

  • These settings apply to your whole Organization, so every Agent and chat widget uses them.
  • Colors use hex values in the format #RRGGBB.
  • Changes take effect the next time a guest loads your chat widget.

What's Next

With your chat window's colors, spinner, and controls set, finish the rest of your widget setup and get it live:

Comments

0 comments

Please sign in to leave a comment.