Bubble Integration Guide

A detailed guide to integrating the Ollabot chatbot into your Bubble application.

Step 1: Set Up Your Ollabot Chatbot

To integrate your Ollabot AI chatbot into your Bubble application, start by logging into your Ollabot account. If you don't have an account yet, you can sign up for free. After logging in, configure your bot within the Ollabot platform by uploading relevant data sources such as files, text snippets, websites, or question-and-answer pairs to build the chatbot's knowledge base.

Follow this step-by-step roadmap for suaccessfully deploying your Ollabot chatbot.

Step 2: Generate and Copy Your Ollabot Chatbot Embed Code

  1. Each chatbot created on Ollabot has a unique embed code for integration. Once your chatbot is set up on Ollabot, navigate to your Dashboard page and select the specific bot you want to integrate with your Bubble application.
Image

  1. Clicking on the bot will take you to its preview page. From there, go to the "Embed on Site" tab, and click the "Make Public" button.

  2. A pop-up window will appear with the provided HTML code. Click "Copy Script" to copy the code snippet.

Image

Step 3: Embed Ollabot Chatbot on Your Bubble App

  1. After copying your Ollabot embed code, sign into your Bubble account and go to your account dashboard.

  2. On your dashboard, select the Bubble app or website you want to embed the chatbot on and click the "Launch Editor" button next to it.

Image

  1. When the Bubble Editor opens, scroll down to the section of the page where you want to add the embed code.

  2. On the left sidebar of the editor, find the HTML component and drag it to the desired section of the page.

Image

  1. Double-click on the HTML component to open the code editor.

  2. Paste the embed code into the editor, and you should see a floating chatbot icon appear on the bottom left corner of the editing canvas.

Image
  1. Preview your Bubble app to test your chatbot.
Image

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

Note: You can customize the appearance and colors of your bot on your Ollabot dashboard. Go to your dashboard, choose a bot, click the "Settings" tab at the top of the page, and then click "Chat Interface" on the left sidebar to access customization options.