> ## Documentation Index
> Fetch the complete documentation index at: https://chatbase.co/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Bubble

> Embed your Chatbase AI agent in a Bubble app using the website widget embed code

## Overview

Adding your Chatbase AI agent to a Bubble app takes two things: the embed code from your Chatbase dashboard, and an HTML component on your Bubble page. Once pasted, a floating chat bubble appears on your app.

> **What you can do:**
>
> Put your AI agent in front of every user of your Bubble app, answering questions without them leaving the page.

## Before you start

* A Chatbase account with an AI agent. If you haven't built one yet, follow [Your first AI agent](https://chatbase.co/docs/user-guides/quick-start/your-first-agent.md).
* A Bubble app you can edit.

## How to embed your AI agent

**1. Copy your embed code**

1. Log into your Chatbase account and navigate to your [dashboard](https://www.chatbase.co/dashboard/).
2. On the list of available AI agents, click the one you want to integrate into your Bubble app.
3. Click **Channels** in the left sidebar, then click **Manage** on the **Chat bubble** card (or **Setup**, if you haven't configured it yet).
4. Click **Deploy** and select the **Website widget** embed type. Scroll down and click **Copy** to copy the provided script.

![The Deploy step showing the website widget embed code](https://mintcdn.com/chatbase/DnMdgLj-7YGWYAcx/user-guides/integrations/images/Integrations/deploy-step.png?fit=max\&auto=format\&n=DnMdgLj-7YGWYAcx\&q=85\&s=31b0448df7dee6c3ccc65eaf9bb47879)

**2. Open your Bubble app editor**

Sign into Bubble, go to your account dashboard, pick the app you want to embed the AI agent on, and click **Launch Editor**.

![Launching the editor for a Bubble app](https://mintcdn.com/chatbase/yfTgmAASFJyGs3D_/user-guides/integrations/images/bubble/bubble-4.png?fit=max\&auto=format\&n=yfTgmAASFJyGs3D_\&q=85\&s=5d7fa6ea82844111a6f5ac2268e99ec9)

**3. Add an HTML component**

Scroll to the section of the page where you want the AI agent. On the left sidebar of the editor, locate the **HTML** component and drag it onto the page.

![Dragging the HTML component onto a Bubble page](https://mintcdn.com/chatbase/yfTgmAASFJyGs3D_/user-guides/integrations/images/bubble/bubble-5.png?fit=max\&auto=format\&n=yfTgmAASFJyGs3D_\&q=85\&s=294e48a278f041d1b3707f3cbfbaceec)

**4. Paste the embed code**

Double-click the HTML component to reveal the code editor, then paste the embed code. You should automatically see a floating AI agent icon on the editing canvas.

![Pasting the embed code into the Bubble HTML component](https://mintcdn.com/chatbase/yfTgmAASFJyGs3D_/user-guides/integrations/images/bubble/bubble-6.png?fit=max\&auto=format\&n=yfTgmAASFJyGs3D_\&q=85\&s=4d360077b75fc3ef89bb54c93d8ba41a)

> [!TIP]
>
> Preview your Bubble app and confirm the chat bubble appears and your AI agent responds.

![The Chatbase chat bubble live in a Bubble app preview](https://mintcdn.com/chatbase/yfTgmAASFJyGs3D_/user-guides/integrations/images/bubble/bubble-7.png?fit=max\&auto=format\&n=yfTgmAASFJyGs3D_\&q=85\&s=eaa3de1123fb4ffbd8f689b5250fa4b4)

> [!NOTE]
>
> You can customize the appearance and colors of your AI agent on your Chatbase dashboard. Go to your **dashboard**, choose an AI agent, click **Channels** in the left sidebar, click **Manage** on the **Chat bubble** card, then open the **Display** tab to edit Content, Capabilities, Colors, Floating bubble, and Localization.

## Next steps

> **[Customize the chat bubble](https://chatbase.co/docs/user-guides/chatbot/channels.md#chat-bubble-display)**
>
> Match the widget to your brand colors, position, and copy.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.