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 assign it an AI Sales Agent instead; agents 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

1. Go to Settings → Chat → Web Chat, and click the palette icon on the integration you want to adjust.
2. Colors — set Primary, Primary accent, Surface, On surface (text), User bubble text, Support accent, and Danger, each a hex value.
3. Copy — Title, Launcher label, AI welcome message, Support welcome message, Input placeholder, and Offline message.
4. Layout — Position (bottom right/left), Launcher shape (tab or bubble), width/height, and corner radius for the panel and controls.
5. 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.
6. AI — under Who answers here, assign an AI Sales Agent (or leave it on the organization's default answers). Each channel can use a different agent — your website doesn't have to sound like your borrower portal.
7. Watch the live preview on the right update as you edit. Use the reset icon above it to revert to the default design.
8. Click Save.

What you'll see

Changes apply to the live widget immediately for every page using this integration's snippet.