Bubble

​

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. Log into your Chatbase account and navigate to your dashboard. 2. On the list of available agents, click on the one you want to integrate into your Bubble website. 3. Click Channels in the left sidebar, then click Manage on the Chat bubble card (or Setup, if you haven’t configured it yet). 4. Click on Deploy and select the Website widget embed type. Scroll down and Click Copy to copy the provided 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. 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. 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. 7. You can now preview your Bubble app to test your agent. Congratulations, your Chatbase agent is now live on your Bubble app!