Embed
6 min read
Make a conversation agent available outside the platform — as a chat widget on your own website or as a standalone public page shared by link or QR code — with your branding and an optional banner.
Embed lets you make a conversation agent available to people outside the platform, in two ways:
- as a chat widget on your own website: you turn embedding on, copy a small
<script>snippet into your site, and the agent appears as a chat bubble (or a side panel) that your visitors can talk to; - as a standalone public page: the platform serves the same chat, full screen, at a public page link you can share directly or print as a QR code. No website is needed, which suits a pilot, an event or a test access.
Embedding is configured on the Embed tab of a conversation agent’s editor, in Studio. It’s an optional feature: the tab only appears when your workspace has embedding enabled and you’re editing a conversation agent (extraction and form agents don’t have it). In the editor’s tab row it’s the last tab, after Orchestration — unless the MCP Servers tab is enabled, which sits after it.
Ask to have it enabled. Embedding is turned on per workspace. If your conversation agent’s editor has no Embed tab, the feature isn’t enabled for your workspace yet — contact the Bayes team to request it.
How embedding works
- Each conversation agent has its own embed snippet — a
<script>tag carrying a unique token. Adding that snippet to a web page loads the chat widget for that agent. - The same token gives the agent a public page link. Anyone who opens it gets the full chat, without any host website.
- The snippet and the link exist whether or not embedding is on, but the widget and the public page only work once Enable embed is turned on. Turning it off takes them offline immediately, which is how you end a temporary access.
- You control which sites may load the widget with Allowed origins, and you
can customize its appearance (title, logo, brand color) plus a few optional
data-attributes on the script tag. - An optional banner text stays pinned above the conversation, on the public page and in the widget, so visitors always see the context (for example Test version, for the pilot team only) even if the link is forwarded.
- Changes are saved with Update (this tab uses Update, not Save).
The full flow at a glance
The walkthrough below replays every step in the real interface. Use Prev / Next to move at your own pace; each step highlights the button to click and the area to watch.
Embed snippet
Paste this <script> tag before the closing </body> tag on any page where you want the chat widget to appear.
Optional attributes: data-color, data-locale, data-display-mode, data-hint.
Public page link
Share this link, or a QR code of it, to make Helpful Assistant available without a host website.
Allowed origins
Comma-separated list of allowed origins (e.g. https://app.example.com). Leave empty to allow all origins.
https://app.example.com, https://staging.example.comWidget title
Title shown in the chat header. Defaults to Helpful Assistant when left empty.
Helpful AssistantLogo URL
URL of the logo image shown in the chat header.
https://example.com/logo.pngBrand color
Primary color used in the chat widget header. Enter a hex value (e.g. #2563eb).
#2563ebBanner text
Optional notice pinned above the conversation, on the public page and in the widget.
Test version, for the pilot team onlyStep by step
1. Open a conversation agent
In Studio, open the conversation agent you want to embed (from the Agents list in the left sidebar, or its card on the workspace overview). This opens the agent editor. You need permission to manage the agent.
2. Open the Embed tab
In the editor’s tab row, click Embed — the last tab (unless the MCP Servers tab is enabled, which sits after it). If you don’t see it, the tab is either not enabled for your workspace or you’re not on a conversation agent (see Troubleshooting).
3. Enable embed
Turn on Enable embed. Its description reads Allow <agent name> to be embedded on
external websites via an iframe. While it’s off, the snippet is still generated but
the widget won’t load on your site.
4. Copy the embed snippet
Under Embed snippet, you’ll find a read-only <script> tag. Click the copy
button next to it, then, as the description says, paste this <script> tag before the
closing </body> tag on any page where you want the widget to appear.
The hint lists optional attributes you can add to the tag to tweak the widget:
data-color— the chat button color (e.g.#2563eb).data-locale— the widget language (e.g.fr).data-display-mode— set todrawerfor a side panel instead of a bubble.data-hint— a tooltip shown on load and on hover (e.g.Need help?).
Below the snippet, Public page link is the URL of the standalone page. Copy it with
the copy button and share it as a link or a QR code when you have no website to
host the widget. Append &locale=fr to force the language of the page.
5. Restrict the allowed origins
In Allowed origins, enter a comma-separated list of the sites permitted to
load the widget (for example https://app.example.com, https://staging.example.com).
As the description notes, leave it empty to allow all origins — but for production
it’s safer to list only your own domains. If you use the public page link, keep
the list empty: the page has no host website to allow.
6. Customize the widget’s appearance
Four optional fields control how the widget looks:
- Widget title — the title shown in the chat header. Left empty, it defaults to the agent’s name.
- Logo URL — the URL of a logo image shown in the chat header (e.g.
https://example.com/logo.png). - Brand color — the primary color of the chat header. Pick it with the color
swatch or type a hex value (e.g.
#2563eb). - Banner text — an optional notice pinned above the conversation, on the public page and in the widget. State the context there: a test version, the intended audience, a validity period. Leave it empty to show no banner.
7. Update
Click Update to save the configuration. Your changes — enabled state, allowed origins, title, logo, color and banner — take effect for the widget and the public page.
Tips
- Keep Enable embed off until you’ve set your Allowed origins and branding, so the widget only goes live once it’s ready.
- List your real domains in Allowed origins for production; an empty list allows any site to embed the agent.
- Use
data-display-mode="drawer"when you want a side panel rather than a floating bubble, anddata-localeto force the widget’s language. - The Widget title falls back to the agent’s name — set it explicitly if you want a different heading for visitors.
- For a temporary access shared by link or QR code, set a Banner text that says who the agent is for, then turn Enable embed off when the access ends.
Troubleshooting
- I don’t see the Embed tab — it appears only for conversation agents, only when the workspace has embedding enabled, and only if you can manage the agent. Extraction and form agents never show it.
- The widget doesn’t appear on my site — check that Enable embed is on, that
the snippet is pasted before
</body>, and that your site’s origin is in Allowed origins (or that the list is empty). - The widget loads on the wrong sites — an empty Allowed origins list allows every origin; add your specific domains to restrict it.
- The header shows the agent’s name, not my title — Widget title is empty, so it defaults to the agent’s name; enter a title and Update.
- The public page shows “not available” — Enable embed is off, or Allowed origins is not empty. Turn embedding on and clear the origins list.
- The banner doesn’t show — Banner text is empty or you didn’t click Update; the banner only appears when the text is set.
- Related: the embedded widget is a conversation agent — see Add a conversation agent to configure what it says.
Last updated: September 7, 2026
Was this article helpful?
Thanks for your feedback!