How to Embed the Chat Widget on External Site

The Chat Widget in Bold Agent enables you to share your published agent on external websites, allowing visitors to interact with the AI assistant directly from your site. This article explains how to enable public sharing and embed the widget using either the embedded script or iframe code.

Prerequisites

Before embedding the chat widget, ensure the following:

A published agent is available in your Bold Agent account.

For widget customization options (appearance, chat experience, and advanced settings), refer to How to customize the chat widget

Accessing the Share Settings

To access the widget sharing options:

Open Agent Builder.
Select the agent in the agent builder.
From the left panel, click Widget under Channels.
Navigate to the Share tab.

Enable Public Sharing

By default, widgets are set to private. To allow external users to access and interact with your widget, you must enable public sharing.

To Enable Public Sharing

In the Share tab, locate Share publicly with the version indicator (e.g., version 1.0).
Turn on the Share publicly toggle.

Once enabled, you can proceed to copy the embed code or iframe code.

Embedding Options

Bold Agent provides two methods to integrate the chat widget into your website:

Embedded code – A script tag that loads the widget as a floating launcher.
Iframe code – An iframe element that integrates the widget directly into the DOM.

Embedded Code

The embedded code is the recommended method for most websites. It adds a floating chat launcher that appears on your site, typically in the bottom‑right or bottom‑left corner.

How to integrate the help widget on your website using Embedded Code

In the Share tab, locate the Embedded code section and copy the provided script tag.
Determine the desired location for the widget on your website and insert the code into the corresponding section of your website’s HTML.
- Header or Footer: For site‑wide visibility, insert the code into your website’s header or footer (just before the closing </body> tag).
- Specific Section or Page: To display the widget only on certain pages, embed the code within that page’s content section.
Save your changes and publish the page to make the widget live and accessible.

Example Integration:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Website</title>
  </head>
  <body>
    <!-- Your website content -->
    <h1>Welcome to Our Website</h1>
    <p>Explore our documentation and get help from our AI assistant.</p>
    <!-- BoldAgent Chat Widget Script -->
    <!-- Replace {WIDGET-ID} with your actual widget ID -->
    <script src="https:// <your-domain>/widgetscript-api/v1/widgets/<widget-id>" defer async>
    </script>
  </body>
</html>

The widget launcher will appear automatically on your website once the page loads.

Iframe Code

The iframe code integrates the widget directly into your page’s DOM without an external script wrapper. This method provides more control over widget placement and styling.

How to integrate the help widget on your website using Iframe Code

In the Share tab, locate the Iframe code section and copy the provided iframe tag.
Determine the desired location for the widget on your website and insert the iframe code into the corresponding section of your website’s HTML.
- Header or Footer: For site‑wide visibility, insert the iframe code into your website’s header or footer.
- Specific Section or Page: To display the widget inline (e.g., in a help panel or documentation sidebar), embed the iframe within that page’s content section.
- Adjust dimensions: Modify the width, height, and style attributes as needed to match your layout.
Save your changes and publish the page to make the widget live and accessible.