Embed the chat widget on Framer

Before you start

• A Sell Whisper AI agent with at least one chat widget.
• A Framer plan that includes custom code. Free sites may not offer it; check your plan if the Custom Code tab is locked.
• Editor access to the Framer project.

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 Project Settings

   In your Framer project, open the settings (the gear icon at the top right) and select the Custom Code tab in the left sidebar.

3. 3

   Add a script

   Click Add Script, or the + icon if you already have scripts, and name it Sell Whisper AI chat.

4. 4

   Paste at the end of the body

   Paste the embed code and set its placement to the end of the <body> tag, so it loads after the page content.

5. 5

   Keep it on every page and run it once

   Leave the page selection empty so the script runs site-wide (only pick pages to limit it), and set it to run Once so the widget loads a single time per visit.

6. 6

   Publish

   Publish the site and open the live URL. Framer does not load custom code on the canvas or in the editor preview.

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

• If the bubble does not appear on the live site, open the browser console and look for errors from widget-core.js.