Customize Your Chat Widget's Colors, Spinner, and Controls
Where to Find These Settings
- Open your Organization settings.
- Select the Chat Settings tab.
- Scroll to the Colors, Spinner, and Controls sections.
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.
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:
- Set Up Your Brand Name, Logo, and Colors -- set the chat indicator and brand colors guests see first
- Set Up the AI Disclaimer and GDPR Notice -- add the consent messages guests should see
- Integrating TrustYou Agent Web Chat -- embed the styled widget on your website
Comments
0 comments
Please sign in to leave a comment.