Bubble

Step 1: Set Up Your Chatbase Chatbot

To integrate your Chatbase AI chatbot 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 your bot within the Chatbase platform by uploading relevant data sources, such as files, text snippets, websites, or question-and-answer pairs, which the bot can use to build its knowledge base.

Here is a step-by-step roadmap for successfully deploying your Chatbase chatbot.

Step 2: Generate and Copy Your Chatbase Chatbot Embed Code

Every chatbot you create on Chatbase has a unique embed code you can use to embed it on your website. Once you've set up your chatbot on Chatbase, navigate to the "My Chatbots" page, and select the specific bot you wish to integrate with your Bubble application. Clicking on the bot should take you to the bot's preview page. From there, proceed to the "Embed on Site" tab, and click the "Make Public" button. Upon doing so, a pop-up window will appear, allowing you to copy the provided HTML code. Click on Copy Script to copy the code snippet.

Step 3: Embed Chatbase Chatbot 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 chatbot on and click the Launch Editor button next to it.

[object Object]

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.

[object Object]

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 chatbot icon on the bottom left corner of the editing canvas.

[object Object]

7. You can now preview your Bubble app to test your chatbot.

[object Object]

Congratulations, your Chatbase chatbot is now live on your Bubble app!