Overview
The chat widget is a single <script> tag you add to your website. Visitors who open it are
answered by your AI agent, and the conversation appears in Craft alongside every other lead.
By default every page shares one agent. A page tag lets you point one page — a careers page, a commercial-quotes page — at a different agent, while the rest of the site carries on as it is.
Add the widget
Copy the embed code
Go to Contact Center → AI CSR → Messaging Configuration. Set the colour, position and greeting, then click Copy Code.
Paste it into your site
Paste the snippet just before the closing </body> tag on every page the widget should
appear on. It looks like this:
<script
src="https://app.craftflow.co/messaging-widget-loader.js"
data-config-id="your-config-id"
async
></script>Send one page to its own agent
Give the embed on that page a tag, and add a trigger that routes the tag to the agent you want.
Tag the page
On the Messaging Configuration page, fill in Page Tag — a short name for the page, like
careers. The embed code gains a data-source attribute:
<script
src="https://app.craftflow.co/messaging-widget-loader.js"
data-config-id="your-config-id"
data-source="careers"
async
></script>Use the tagged snippet on that page only, and the untagged one everywhere else.
Route the tag to an agent
Go to Contact Center → Agents → Triggers and add a trigger: channel Web chat, source careers, sent to the agent that should answer those chats.
Create the trigger before the tagged snippet goes live. A tagged page with no trigger is answered by your default agent, exactly as an untagged page would be.
Tagged pages keep their own conversations: a visitor who chatted on your homepage and then opens the chat on a tagged page starts a fresh conversation there, rather than resuming the one they left open.
What Craft records
Every web chat records the page it started on, so you can see which pages produce leads, and a trigger can match on it:
| Field | Example | Notes |
|---|---|---|
| Source | careers | The data-source tag, if the embed has one |
| Page URL | https://example.com/careers | The page the chat started on, without its query string |
Options
All of these are attributes on the <script> tag; the Messaging Configuration page writes
them for you.
| Attribute | Default | What it does |
|---|---|---|
data-config-id | — | Required. Identifies your account. |
data-source | none | Tags the page so a trigger can route its chats. |
data-primary-color | #0F172A | Button and header colour. |
data-position | bottom-right | bottom-right or bottom-left. |
data-offset-x / data-offset-y | 24 | Distance from the edge, in pixels. |
data-header-title | Chat with us | Title inside the chat window. |
data-greeting | Hi there! How can we help you today? | Bubble shown before the chat is opened. |
data-empty-state-text | Send us a message… | Shown before the first message. |
data-launcher-text | none | Text beside the chat button. |
data-input-placeholder | Type a message... | Placeholder in the message box. |
data-auto-open | off | Milliseconds to wait, then open the chat automatically. |
data-sound | true | Set to false to silence the new-message sound. |