How to Customize Your Web Chat Widget
Note: there used to be a raw "AI system prompt" text box directly on this screen — it's gone. A channel that still has an old prompt saved keeps using it until you choose a Web Chat Persona instead; personas carry version history and can't have their required limits edited away by accident, which the old free-text box couldn't offer.
Adjust an existing web chat integration's colors, copy, layout, and behavior, with a live preview as you go.
Before you start
The Manage Chat Settings right. The integration must already exist — see How do I create a web chat integration?
Steps
- Go to Settings → Chat → Web Chat, and click the palette icon on the integration you want to adjust.
- Colors — set Primary, Primary accent, Surface, On surface (text), User bubble text, Support accent, and Danger, each a hex value.
- Copy — Title, Launcher label, AI welcome message, Support welcome message, Input placeholder, and Offline message.
- Layout — Position (bottom right/left), Launcher shape (tab or bubble), width/height, and corner radius for the panel and controls.
- Behavior — enable/disable AI chat and Live Support, pick the Default mode, auto-open on desktop/mobile, and whether to show the "Powered by Kamo" branding line.
- AI — under Web Chat Persona, choose a persona (or leave it on your organization's default answers). Each website can use a different persona, so they don't all have to sound the same.
- Watch the live preview on the right update as you edit. Use the reset icon above it to revert to the default design.
- Click Save.
What you'll see
Changes apply to the live widget immediately for every page using this integration's snippet.
