Overview
Adding your Chatbase agent to a Bubble app takes two things: the embed code from your Chatbase dashboard, and an HTML component on your Bubble page. Once pasted, a floating chat bubble appears on your app.What you can do:
Put your AI agent in front of every user of your Bubble app, answering questions without them leaving the page.
Before you start
- A Chatbase account with an agent. If you haven’t built one yet, follow Your first agent.
- A Bubble app you can edit.
How to embed your agent
1
Copy your embed code
- Log into your Chatbase account and navigate to your dashboard.
- On the list of available agents, click the one you want to integrate into your Bubble app.
- Click Channels in the left sidebar, then click Manage on the Chat bubble card (or Setup, if you haven’t configured it yet).
- Click Deploy and select the Website widget embed type. Scroll down and click Copy to copy the provided script.
2
Open your Bubble app editor
Sign into Bubble, go to your account dashboard, pick the app you want to embed the agent on, and click Launch Editor.
3
Add an HTML component
Scroll to the section of the page where you want the agent. On the left sidebar of the editor, locate the HTML component and drag it onto the page.
4
Paste the embed code
Double-click the HTML component to reveal the code editor, then paste the embed code. You should automatically see a floating agent icon on the editing canvas.
Preview your Bubble app and confirm the chat bubble appears and your agent responds.
You can customize the appearance and colors of your agent on your Chatbase dashboard. Go to your dashboard, choose an agent, click Channels in the left sidebar, click Manage on the Chat bubble card, then open the Display tab to edit Content, Capabilities, Colors, Floating bubble, and Localization.
Next steps
Customize the chat bubble
Match the widget to your brand colors, position, and copy.