Chat Widget
The chat widget is a floating chat bubble that appears on your website. Visitors click it to open a full chat window and talk to your agent. It is installed with a two-line script tag — no build step, no framework dependency, no backend changes.
Installing the widget
Open your agent and go to Deploy → Chat Widget
Copy the embed code
Paste it into your website
</body> tag on every page where you want the widget to appear.<script src="https://www.aichatvault.com/widget.js" chatbotId="your-agent-slug" domain="https://www.aichatvault.com" defer> </script>
Alternatively, embed the widget as an inline iframe if you prefer a fixed-position chat area rather than a floating bubble:
<iframe src="https://www.aichatvault.com/chatbot-iframe/your-agent-slug" width="100%" style="height: 100%; min-height: 700px" frameborder="0"> </iframe>
Content settings
The Content tab in the Chat Widget configuration controls what visitors see and how they interact:
| Setting | What it does |
|---|---|
| Display name | The name shown in the widget header — defaults to your agent name. |
| Initial message | The welcome message the agent sends automatically when the chat opens. |
| Suggested messages | Quick-reply buttons shown to visitors to guide them — click + to add, drag to reorder. |
| Show suggested after first message | When on, suggested messages re-appear after every agent response, not just at the start. |
| Message placeholder | The placeholder text shown in the chat input box (default: "Message…"). |
| Collect feedback | Shows thumbs up/down buttons on agent responses so visitors can rate answers. |
| Regenerate messages | Shows a regenerate button so visitors can request a different answer. |
| Copy messages | Adds a copy-to-clipboard button to agent messages. |
| Dismissible notice | A small notice banner shown at the top of the chat — useful for alerts or disclaimers. |
| Footer text | Optional text shown at the bottom of the chat window. |
| Auto show popup | Automatically opens a small greeting popup above the chat bubble after the page loads. |
| Popup duration | How many seconds before the popup appears (e.g. 3 = appears 3 seconds after the page loads). |
Style settings
The Style tab controls the visual appearance of the widget:
| Setting | What it does |
|---|---|
| Appearance | Light or dark theme for the chat window background and text. |
| Primary colour | The main accent colour used for the header, buttons, and links. |
| Use primary colour for header | When on, the chat header background uses the primary colour. When off, the header is white/dark. |
| Bubble button colour | The colour of the floating action button (FAB) — can differ from the primary colour. |
| Bubble alignment | Position of the floating bubble: bottom-right or bottom-left. |
| Bubble message | A short tooltip text shown next to the bubble button. |
| Show bubble message | Toggle whether the bubble message tooltip is visible. |
| Profile image | Upload an avatar shown in the chat header and next to agent messages. |
| Chat icon | A custom icon shown inside the floating bubble button. |
AI settings
The AI tab lets you configure separate AI instructions specifically for the chat widget — useful if you want different behaviour here versus the help page:
- •Sync with base instructions — when on, the widget uses the same system prompt as your agent's main settings. When off, you can write widget-specific instructions.
- •Instruction template — select from pre-built templates (Support, Sales, FAQ, etc.) for a starting-point system prompt.
- •Custom instructions — write a fully custom system prompt for this widget channel.
Embed settings
The Embed tab controls where and how the widget can be loaded:
- •Restrict to domains — when on, the widget only loads on the domains you list. Prevents others from embedding your widget on unauthorised sites.
- •Allowed domains — the list of allowed hostnames (e.g. yoursite.com). Wildcards are not supported; enter each domain separately.
- •Require visitor verification — when on, visitors must pass a signed verification token before the widget loads. Used for authenticated user flows where you want to confirm who is talking.
Language support
The widget supports multiple languages. Add languages in the Content tab — each language gets its own set of initial messages and suggested prompts. The widget automatically serves content in the visitor's browser language when a matching language is configured.
Was this page helpful?