How to add an AI chatbot to a Bubble app

Bubble apps often have the same support questions over and over: how to reset a password, where a setting lives, what a plan includes. You can build a chat in Bubble with the API Connector, but a ready-made widget is quicker for that job. Here’s how to add Feedbot (our product).

What you need

• A Feedbot bot id from Dashboard → Bot → Install (the Free plan works).
• Edit access to the Bubble app.
• For a live app on your own domain, a paid Bubble plan. See Bubble pricing for current plans as of October 2026.

Add the chatbot to every page

1. Open your app in the Bubble editor.

2. Click Settings in the left sidebar, then the SEO / metatags tab.

3. Scroll to Script in the body and paste:

   <script src="https://w.feedbotai.com/v1/feedbot.js" data-bot-id="YOUR_BOT_ID" async></script>

4. Click Preview to test in the development version. The chat button appears in the bottom-right corner.

5. When it works, deploy to live.

Bubble inserts this field into the body of every page of the app, as described in the SEO / metatags manual. Use Script in the body, not Script/meta tags in header: the body is where widget scripts belong.

Add it to one page or a group of pages

Use an HTML element when you only want the chat in some places, for example inside the app but not on the landing page.

1. Drag an HTML element onto the page (or into a reusable element such as your app header, so every page using it gets the chat).

2. Make it small, for example 10 × 10 px. The widget draws its own floating button; the element is only a container for the code.

3. Paste this snippet. It creates the script tag itself, which works reliably inside HTML elements:

   <script>
     if (!document.querySelector("script[data-bot-id]")) {
       var s = document.createElement("script");
       s.src = "https://w.feedbotai.com/v1/feedbot.js";
       s.async = true;
       s.dataset.botId = "YOUR_BOT_ID";
       document.body.appendChild(s);
     }
   </script>

4. Preview the page and check the chat button.

Make sure the HTML element is visible on page load. If it’s hidden in a group that only appears later, the code runs later too.

Open the chat from a Bubble button

Bubble has no built-in “run JavaScript” action. Two options:

Add the queue stub before your first call if the button could be clicked before the widget loads:

<script>
  window.Feedbot = window.Feedbot || function () { (Feedbot.q = Feedbot.q || []).push(arguments) };
</script>

Full command list: JavaScript API.

Identify logged-in users

In an HTML element shown only when Current User is logged in, insert dynamic data for the user’s fields:

<script>
  window.Feedbot = window.Feedbot || function () { (Feedbot.q = Feedbot.q || []).push(arguments) };
  Feedbot("identify", {
    userId: "Current User's unique id",
    email: "Current User's email",
    name: "Current User's name"
  });
</script>

Replace each quoted placeholder with Bubble’s Insert dynamic data value. Without a hash the user is unverified: the bot sees the name and email, but chat history isn’t shared across devices. For verified users, compute HMAC-SHA256(identitySecret, userId) on a server you control and fetch it through the API Connector; keep the secret out of the page. Call Feedbot('reset') in your logout flow. See Identify users.

Troubleshooting

Train it on your app’s help content

On Free, add text and FAQ in Bot → Knowledge. From Starter, import your help pages by URL or sitemap (pages that need JavaScript, like Bubble’s, are rendered in a real browser) and upload files. See knowledge base. When a user asks for a person, the bot hands off to you in Telegram, Slack, Discord or email (handoff).

Next steps

• Install docs for color, language and inline mode.
• Manage all your site scripts in one place with Google Tag Manager, or see the Ghost guide.