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

1. 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 your Dashboard page, and select the specific bot you wish to integrate with your Bubble application.

2. Clicking on the bot should take you to the bot's playground page. From there, proceed to the Connect tab.

3. Up next, a new page should come up, 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.

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

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

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

Note: You can customize the appearance and colors of your bot on your Chatbase dashboard. To do this, go to your dashboard, choose a bot, click the Settings tab on the top of the page, and then click Chat Interface on the left sidebar to reveal the chatbot customization options.