1.5 – Adding the custom chatbot to your website (Chat Bubble) Lesson

Lesson Overview

This lesson covers the key steps to add your AI chatbot—built with Chatbase—to any website using a chat bubble. By embedding your custom chatbot, you give users a direct way to access support, information, or tutoring right from your site, without navigating away. You’ll first learn how to configure access and security, ensuring the chatbot is accessible but controlled according to your needs.

Security is a priority—especially if your chatbot references private or sensitive data. You’ll see how to decide whether your chatbot should be public or private, and how to limit where it can appear online. Additionally, setting up rate limits helps guard against misuse by restricting how many messages a user can send in a short period.

You’ll also see two methods for embedding—iframe (full-page) and script code (chat bubble)—and why the chat bubble is usually preferred for customer support scenarios. This approach works across major website platforms such as Wix, WordPress, and Squarespace.

Once embedded, you’ll learn how to preview and adjust your chatbot for size and usability, and how to make sure it delivers a fast, accurate user experience. This lesson is valuable for anyone creating interactive support, FAQ, or information assistants on their website.

Who This Is For

This lesson is meant for anyone looking to easily add a chatbot to their site without coding expertise. You might find it especially relevant if you are:

• Website owners wanting to offer real-time customer support or interactive help
• Educators embedding a virtual tutor on a course page
• Marketers improving visitor engagement through automated chat
• Product managers testing out AI features before a full rollout
• Small business owners providing prompt answers to client questions
• Content creators adding interactive elements to their web presence
  

Where This Fits in a Workflow

Embedding your chatbot as a chat bubble comes after you have built and trained the chatbot in Chatbase. This is the initial launch into the real user environment. It is especially useful during a site update, at the start of a support campaign, or when launching new interactive features.

For example, after setting up a new FAQ chatbot, you can follow the steps in this lesson to place it on your website’s footer or help section. Similarly, if launching a course website, you can quickly give students a place to ask questions 24/7. Embedding before your main site goes live lets you test and refine the customer facing experience before wider release.

Technical & Workflow Benefits

Adding your chatbot as a chat bubble using the script embed is far quicker and easier than custom development. Before solutions like Chatbase, creating a website chatbot meant complex custom code, lengthy testing, and developer involvement for every change. Now, you simply copy a code snippet and adjust settings in your content management system.

With rate limiting and access controls, you avoid the risk of spam or overloading your chatbot, which was difficult to manage in older systems. If your business uses platforms like Wix, WordPress, or Squarespace, this approach means you’re up and running in minutes—not weeks. You can iterate quickly by changing settings or retraining your chatbot, then updating the embed code as needed. This lets teams experiment, optimize, and update as their needs change without costly delays.

Practice Exercise

Use your own workbook project or website to practice these integration steps:

1. In your Chatbase project, configure chatbot security, set it to public, and review rate limits.
2. Copy the script code for the chat bubble and paste it into your website builder’s embed code area.
3. Adjust the element’s size so the chat interface is comfortable for users and preview the site.

After publishing, test your chatbot by asking several different questions a real user might ask. How quickly does it respond? Is the chat bubble easy to open and use on desktop and mobile devices?

Reflect on how this setup compares to other web chat experiences you’ve seen. What would you improve for your own audience?

Course Context Recap

This lesson comes after you’ve created and trained your custom chatbot in Chatbase. Now, you’re taking the important step of making the AI assistant available to your users as a chat bubble on your website. Next, you’ll focus on further customization, advanced settings, or integrating your chatbot into more sections of your site. Continue to the next lesson to deepen user engagement and make the most out of your AI-powered solution. Explore the full course for more practical guidance on chatbot development and deployment.