Build a Trainable Custom AI Chatbot in 5 minutes | Bubble x Aicado

Introduction

Integrating an AI chatbot into your website can significantly enhance user interaction and support. With Aicado's user-friendly platform and Bubble's powerful no-code capabilities, creating a trainable chatbot has never been easier. In this guide, we'll walk you through the straightforward steps to build and customize your own AI chatbot in just five minutes.

Step 1: Sign Up and Integration

Begin by signing up with your Google account on Aicado. After logging in, navigate to the Integration Tab and click the Start Now button. You'll be required to select a title for your integration and connect your desired domain.

Step 2: Training Your Chatbot

Once the integration is set, head to the Training Tab. Here, you can train your chatbot by crawling all the pages of your website. Aicado also allows you to upload text files or documents to further enrich your chatbot's knowledge base. While training is in progress, focus on styling the chatbot to align with your website's design. Use your brand’s colors and font family for a consistent look. Aicado offers various customization options, including:

• Background colors
• Border properties
• Input appearance
• Text colors
• Font sizes and weights

Step 3: Finalizing the Chatbot

Next, give your chatbot a name and customize the avatar. For the model, select Cloud and set a greeting message like "Ask me anything." After customizing, click the Share button to obtain the embed code for your chatbot.

Step 4: Embedding the Chatbot in Your App

Now, open your Bubble app editor. Add a section using Bubble’s compound library, then remove any unnecessary elements. Insert an HTML element and paste the copied embed code into it. Get ready to test your chatbot!

Step 5: Working and Advanced Features

Once you preview your changes, you should see the integration live on your website. Start a conversation to see how the chatbot responds; it should provide relevant answers. To take your chatbot to the next level, you can enable webhooks for advanced control.

To do this, switch to the Features tab and enable webhooks. You’ll need to provide the endpoint URL, so backtrack to Bubble and enable workflow API. Create a new backend event for initializing the process and use the Detect Data button to copy the provided URL into the related inputs, selecting user ID as the parameter name.

Remember to append this user ID parameter to the source of your iframe. Afterward, test the conversation again to ensure you’re receiving responses correctly.

Step 6: Tracking Data

Finally, consider creating a new data type to track usage statistics. You can store the unique user ID and record interactions to monitor chatbot performance. After conducting this test, remove the initialized query from your endpoints to clean your setup. Now you can initiate another conversation with your chatbot, check the app data, and see the new data entry in action.

In just a few minutes, you've successfully integrated a trainable AI chatbot using Aicado and Bubble. This powerful tool can significantly improve the user experience on your site.

Keywords

• AI Chatbot
• Integration
• Training
• Customization
• Webhooks
• Data Tracking
• Bubble

FAQ

Q1: How do I sign up for Aicado?
A1: You can sign up easily by using your Google account on their platform.

Q2: What types of data can I use to train my AI chatbot?
A2: You can train your chatbot by crawling your website pages or by uploading text files and documents.

Q3: How can I customize the chatbot's appearance?
A3: Aicado allows you to customize background colors, border properties, input appearances, text colors, font sizes, and weights to match your website's design.

Q4: What are webhooks, and how can I enable them?
A4: Webhooks allow for real-time data transfer between applications. You can enable them by switching to the Features tab after initial integration.

Q5: How do I track user interactions with my chatbot?
A5: You can create a new data type in your app to store user IDs and record interactions for tracking purposes.