Skip to content

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.

DemoStudio
Conversation Helpful Assistant
Conversation Billing Assistant
Form Feedback Form
Edit Conversation AgentEdit details for this conversation agent
GeneralModelSourcesResource librariesConversation categoriesOrchestrationEmbed
Enable embedAllow Helpful Assistant to be embedded on external websites via an iframe.

Embed snippet

Paste this <script> tag before the closing </body> tag on any page where you want the chat widget to appear.

<script src="https://app.example.com/launcher.js" data-token="emb_1a2b3c4d"></script>

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.

https://app.example.com/index.html?embedToken=emb_1a2b3c4d&displayMode=drawer

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.com

Widget title

Title shown in the chat header. Defaults to Helpful Assistant when left empty.

Helpful Assistant

Logo URL

URL of the logo image shown in the chat header.

https://example.com/logo.png

Brand color

Primary color used in the chat widget header. Enter a hex value (e.g. #2563eb).

#2563eb

Banner text

Optional notice pinned above the conversation, on the public page and in the widget.

Test version, for the pilot team only
Update

Step 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 to drawer for 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, and data-locale to 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 titleWidget 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 showBanner 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?