Insert a Custom and Trainable AI Chatbot in your Bubble apps with plugin

Introduction

In this article, we will introduce the latest chatbot plugin designed specifically for Bubble, enabling you to integrate an AI chatbot into your applications within just five minutes. This plugin provides a user-friendly setup, allowing you to customize and train your chatbot efficiently.

Step-by-Step Installation

1. Access the Bubble Editor: First, open your Bubble editor. For testing purposes, you can start with a blank page that has no plugins installed yet.

2. Search for the Plugin: Locate the search box in the editor and type “AO.” From the search results, select the "AI Chatbot Customer Support" plugin.

3. Adding Elements: Once you have installed the plugin, you will notice that it contains elements and three actions. To set up your chatbot, drag the required elements onto your page. You can add them to a floating group or create a pixel-sized group (1x1 pixel)—the main requirement is that they need to be visible when the page loads.

4. Customize Plugin Properties: In the plugin properties editor, the dynamic image section will display the Bubble image, which you can set to appear on either the left or right side of the chatbot interface. Next, choose a balloon image for rebranding purposes.

5. Set the Iframe Source: The iframe source is a crucial part of the setup process. Navigate to your AI Analytics Dashboard and create a free account (you can log in using Google). Once logged in, follow these steps:

   • Create an embed AI model for the chatbot.
   • Click the “Create Embed” button and select the appropriate AI chatbot model.
   • Input your domain details correctly. The plugin supports one free domain, but for additional domains, you can purchase as needed. Ensure you input your application’s domain correctly—do not use the editor’s domain, as this will prevent the integration from working.

6. Finish Embedding the Chatbot: After correctly inputting your domain and clicking "Create Embed," the chatbot setup will be processed in the background.

7. Customization and Styling: Once completed, you can customize the chatbot’s appearance and functionality. This includes changing the header color, button colors, and text style. The assistant’s name, avatar, and behavior can also be modified according to your needs.

8. Training the Chatbot: You can train your chatbot by uploading text, files, or websites. Additionally, there are options to enable features like audio recording for users, set rate limits, and send conversation logs via email.

9. Implementing in Your Application: Move to the embedding section in the plugin, ensuring that the bounded domains are accurately inputted. Insert the provided iframe code into the plugin’s iframe source.

10. Testing the Chatbot: Refresh your application to see the chatbot in action. You’ll be able to see real-time changes when you modify the chatbot’s settings, including its styling and enabled features.

Keyword

AI chatbot, Bubble, plugin, integration, customization, training, iframe, domain, user interface, analytics.

FAQ

Q1: How long does it take to integrate the AI chatbot in Bubble?
A1: You can integrate the AI chatbot in your Bubble app within approximately five minutes.

Q2: What are the key features of the chatbot plugin?
A2: The key features include customizable styling, real-time updates, user training options, and support for multiple AI models.

Q3: Can I have multiple domains for the chatbot?
A3: Yes, the plugin supports one free domain, and you can purchase additional domains as needed.

Q4: Is it possible to enable audio recording for users?
A4: Yes, you can enable audio recorder functionality for users through the plugin settings.

Q5: How does the training process work for the chatbot?
A5: You can train your chatbot by uploading text, files, or websites containing the information you want it to learn.