Appearance & branding
The Appearance tab controls how the embedded widget looks on your site. The settings here apply to every web deployment of this chatbot — Shopify, WordPress, custom website, all share the same appearance.
In this guide:
- Logo and avatar
- Primary color
- Font and size
- Position
- Welcome / greeting messages
- Live preview
Step 1: Open Appearance
On the chatbot detail page, click Appearance (or Basic in some sidebars) in the left rail.
Screenshot: The Appearance tab with logo and primary-color picker.
Step 2: Set the visual identity
| Setting | What it does |
|---|---|
| Logo | Image shown in the widget header. PNG or SVG, ≤ 200 KB. Square aspect renders best. |
| Avatar | Optional — the bot’s face in chat messages. If unset, falls back to logo or initials. |
| Primary color | The accent color (header background, send button, links). Pick a high-contrast hex code. |
| Font | One of the bundled web-safe fonts. Custom fonts require the developer embed JS API — see Developer embed JS API (New). |
| Widget size | Compact, default, or large. Larger sizes show more conversation but cover more page real-estate. |
Step 3: Pick a position
The widget bubble docks to a corner of the host page. Default is bottom-right. Other options:
bottom-left— for sites whose chat-help convention sits left.bottom-center— for very wide displays or full-screen apps.
For per-page or runtime overrides, the developer JS API can change position dynamically. See Developer embed JS API.
Step 4: Welcome and greeting messages
Two distinct concepts:
- Welcome message — what users see before they open the chat. Shown as a teaser bubble. Keep it short (“Hi! Ask us anything.”).
- Greeting / opening message — the first message the bot sends after the user opens the chat. Use to set expectations (“Hi! I can help with billing, returns, and account issues. What’s up?”).
Configurable in the Appearance tab. Multiple greeting variants can be defined and randomly chosen.
Step 5: Live preview
The right side of the page shows a live preview of the widget with your current settings. Click around — open, close, send a message — to see how it’ll feel before you save.
Save
Click Save. Changes propagate to all deployments within ~1 minute (cached scripts may take a moment to refresh on visitors’ browsers).
Tips
- Pick the primary color from your brand palette, not a guess. A widget that clashes with the host page is the most common Appearance mistake.
- The logo should not have padding baked in. The widget header adds its own. Logos with built-in margins look small.
- Test on dark mode. If your site supports a dark theme, set
theme: 'dark'in the Install snippet and check the widget reads cleanly.