🛠️ How-to guide

<aside> 🎨

WHAT IT DOES

Make the chat widget on your website look and feel like your own. Change colors, logo, welcome text, launch button and message styling, and watch a live sample conversation restyle as you edit. Save a draft while you work, then publish when you are happy.

</aside>

Where to find it

Open your agent, go to Channels, find Web Chat, and click Customize. Everything on this screen affects only how the widget looks. What your agent knows and says is set elsewhere.

The Customize screen for a Riverton 311 agent. Settings are grouped into cards on the left, with the section tabs and a settings search above them; the right pane shows a sample conversation styled with the current settings. The header keeps the published version, Save draft and Publish together.

The Customize screen for a Riverton 311 agent. Settings are grouped into cards on the left, with the section tabs and a settings search above them; the right pane shows a sample conversation styled with the current settings. The header keeps the published version, Save draft and Publish together.

The screen has two halves. On the left you edit settings. On the right you see a sample conversation styled with your current settings.

What you can change

The Editor is split into sections. Pick a section from the tabs, and related settings appear together in titled cards.

Section What it controls
Home Brand color, logo, heading and description, the header style, and the first screen visitors see
Launch button The button that opens the chat: its shape, size, colors, icon and call-to-action text
Messages Chatbot name and avatar, message bubble style, copy and feedback buttons, and the message box
Human Escalation The avatar and sound cue used when a conversation is handed to a person
Notifications How a proactive message appears before the visitor opens the chat
Modals Where pop-up panels, such as the feedback form, appear
Advanced Opening behavior, typing effect, references and tables, and session timeouts

How it works

  1. Open Channels → Web Chat → Customize on your Riverton 311 agent.
  2. Start in Home. Set the brand color to your city palette. Pick from the preset swatches, or type an exact color code.
  3. Set the Heading to Riverton 311 and the description to City services and issue reporting.
  4. Upload a Logo. Drag an image onto the field or click to browse. Each image field shows the size it expects.
  5. Choose a Header style. Instead of a plain dropdown, you get small pictures of each option so you can see the difference before choosing.
  6. Move to Messages and set the Chatbot name to Riverton 311. Choose a message bubble style from the pictures.
  7. Watch the preview on the right update as you type. It shows a sample conversation that suits the section you are editing.
  8. Click Save draft at any point to keep your work without changing the live widget.
  9. When you are happy, click Publish. You can add a short note describing what changed, which makes the version history easier to read later.

Header style and Homepage style are picked from small pictures of each option rather than a dropdown, so you can see the difference before choosing. Header alignment below shows a normal dropdown for comparison.

Header style and Homepage style are picked from small pictures of each option rather than a dropdown, so you can see the difference before choosing. Header alignment below shows a normal dropdown for comparison.