Skip to main content

​
Step 1: Set Up Your Chatbase AI agent

To integrate your Chatbase AI agent into your Bubble application, begin by logging into your Chatbase account. If you haven’t already created an account, you can sign up for a free account. After signing in, you can configure you agent within the Chatbase platform by uploading relevant data sources, such as files, text snippets, websites, or question-and-answer pairs, which the agent can use to build its knowledge base. Here is a step-by-step roadmap for successfully deploying your Chatbase agent.

​
Step 2: Generate and Copy Your Chatbase AI agent Embed Code

1. Every agent you create on Chatbase has a unique embed code you can use to embed it on your website. Once you’ve set up your agent on Chatbase, navigate to your Dashboard page, and select the specific agent you wish to integrate with your Bubble application.
Dashboard
2. On the agent preview page, click on the Deploy tab.
Deploy
3. A new page should come up. Click on Manage for the Chat Widget.
Chat Widget [Manage]
4. Click on Embed and select the Chat widget embed type. Scroll down and Click Copy to copy the provided script.
Copy Script

​
Step 3: Embed Chatbase AI agent on Your Bubble App

1. Once you’ve copied your Chatbase embed code, sign into your Bubble account and head to your account dashboard. 2. On your dashboard, pick out the Bubble app or website you wish to embed the agent on and click the Launch Editor button next to it.
image
3. Once your Bubble Editor comes up, scroll down to the section of the page you want to add the embed code. 4. On the left sidebar of the editor, locate the HTML component and drag it to the section of the page.
image
5. Double-click on the HTML component to reveal the code editor. 6. Paste the embed code on the editor and you should automatically see a floating agent icon on the bottom left corner of the editing canvas.
image
7. You can now preview your Bubble app to test your agent.
image
Congratulations, your Chatbase agent is now live on your Bubble app!
Note: You can customize the appearance and colors of your agent on your Chatbase dashboard. To do this, go to your dashboard, choose an agent, click the Deploy tab on the top of the page, and then click Manage Chat Widget on the left sidebar to reveal the agent customization options.