Add Chatbots to Bubble Websites

Add your AI agent to your Bubble site by pasting its embed code into an HTML component on your page. No coding needed.

Before you start

A trained AI agent. New here? Create an account, then train your agent with your data.
A Bubble account that can edit your site.

Step 1: allowlist your domain in Settings > Security. Step 2: copy the code from Embed on site. Step 3: paste it on your site, then check the bubble appears

Step 1: Allowlist your domain

In Chat Data, open Settings > Security. Set Visibility to public, turn on Embedding On Websites, and add your Bubble site's domain to Allowed Embedding Domains. Full details: Allowlist your domain.

Step 2: Copy the embed code

In Chat Data, click Embed on site in your AI agent's sidebar, open the Widget Bubble tab and click Copy Code. Which tab should I use? Embed on site panel in Chat Data with the Widget Bubble tab open, showing the script tag and the Copy Code button

Step 3: Add the code in Bubble

Log in to Bubble, select your app or website and click Launch Editor.
Scroll to the section of the page where you want the AI agent.
In the editor's left sidebar, find the HTML component and drag it onto the page. If your page has a Group Footer component, put the HTML component inside it.
Double-click the HTML component to open its code editor.
Paste the embed code.
Deploy your app to Live so the change reaches your published site.

Check that it worked

Open your live site. A floating chatbot icon should appear in a bottom corner of the page (left or right, set by Align chat bubble button in Settings > Chat Interface). chatbot bubble show up in preview

If the chat window shows "Domain: … is not in the allowlisted domains of this chatbot", add that domain in Step 1. More fixes: Check that it worked.

Next step: match the AI agent to your brand in Settings > Chat Interface. See Customize the Chatbot Interface.

Frequently Asked Questions

How do I add a Chat Data chatbot to a Bubble website?

The process has three main parts: create or configure your chatbot in Chat Data, copy the embed code from the website integration guide, and then paste that code into an HTML component inside your Bubble project.

What do I need to do in Chat Data before embedding the chatbot in Bubble?

Before embedding, you need to log in to Chat Data and build the chatbot's knowledge base. The guide says you can train it with documents, text snippets, webpages, or Q&A pairs so the bot is ready before you place it on the Bubble site.

Where do I place the embed code inside Bubble?

Inside the Bubble editor, you drag an HTML component to the section where you want the chatbot to appear and place that HTML component inside the `Group Footer` component. Then you open the HTML editor and paste in the Chat Data embed code.

How can I confirm the chatbot was added correctly in Bubble?

After you paste the embed code into the HTML component, Bubble should show a floating chatbot icon in the bottom-left area of the editor preview. That preview state confirms the installation worked.