Embed the chat widget on Bubble

Before you start

• A Sell Whisper AI agent with at least one chat widget.
• Edit access to the Bubble app.
• Permission to deploy the app to live, so the change reaches your users.

The embed code

Your snippet looks like this. Copy yours from the dashboard (step 1) so it carries your real widget ID instead of YOUR_WIDGET_ID.

<script>
  (function() {
    var s = document.createElement('script');
    s.src = 'https://widget.sellwhisperai.com/widget-core.js';
    s.setAttribute('data-widget-id', 'YOUR_WIDGET_ID');
    s.setAttribute('data-api-url', 'https://api.sellwhisperai.com/api/v1');
    s.async = true;
    document.head.appendChild(s);
  })();
</script>

Steps

1. 1

   Copy your embed code

   In the dashboard, open your agent, go to Widgets and open the widget you want in the builder. Click Copy on the Embed Code panel under the preview.

2. 2

   Open the Settings tab

   In the Bubble editor, click Settings in the left sidebar.

3. 3

   Go to SEO / metatags

   Open the SEO / metatags sub-tab and scroll to Advanced settings.

4. 4

   Paste into Script in the body

   Paste the embed code into the Script in the body field. It applies to every page of the app.

5. 5

   Test in development

   Preview the app. The development version (the /version-test URL) picks up the script first, so check the bubble there.

6. 6

   Deploy to live

   Deploy the app to live so the live version gets the script too.

Check it works

Open your live site in a private window. The chat bubble appears in the corner you chose in the widget builder; send a message to confirm your agent answers.

Tips

• Use Script in the body rather than an HTML element on a page, so the widget loads on every page without adding it page by page.