> ## 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.

<Card title="What you can do:" icon="comments">
  Put your AI agent in front of every user of your Bubble app, answering questions without them leaving the page.
</Card>

## Before you start

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

## How to embed your AI agent

<Steps>
  <Step title="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.

    <Frame>
      <img src="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" alt="The Deploy step showing the website widget embed code" width="2524" height="1504" data-path="user-guides/integrations/images/Integrations/deploy-step.png" />
    </Frame>
  </Step>

  <Step title="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**.

    <Frame>
      <img src="https://mintcdn.com/chatbase/yfTgmAASFJyGs3D_/user-guides/integrations/images/bubble/bubble-4.png?fit=max&auto=format&n=yfTgmAASFJyGs3D_&q=85&s=5d7fa6ea82844111a6f5ac2268e99ec9" alt="Launching the editor for a Bubble app" width="1888" height="671" data-path="user-guides/integrations/images/bubble/bubble-4.png" />
    </Frame>
  </Step>

  <Step title="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.

    <Frame>
      <img src="https://mintcdn.com/chatbase/yfTgmAASFJyGs3D_/user-guides/integrations/images/bubble/bubble-5.png?fit=max&auto=format&n=yfTgmAASFJyGs3D_&q=85&s=294e48a278f041d1b3707f3cbfbaceec" alt="Dragging the HTML component onto a Bubble page" width="1911" height="862" data-path="user-guides/integrations/images/bubble/bubble-5.png" />
    </Frame>
  </Step>

  <Step title="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.

    <Frame>
      <img src="https://mintcdn.com/chatbase/yfTgmAASFJyGs3D_/user-guides/integrations/images/bubble/bubble-6.png?fit=max&auto=format&n=yfTgmAASFJyGs3D_&q=85&s=4d360077b75fc3ef89bb54c93d8ba41a" alt="Pasting the embed code into the Bubble HTML component" width="1908" height="884" data-path="user-guides/integrations/images/bubble/bubble-6.png" />
    </Frame>
  </Step>
</Steps>

<Check>
  Preview your Bubble app and confirm the chat bubble appears and your AI agent responds.
</Check>

<Frame>
  <img src="https://mintcdn.com/chatbase/yfTgmAASFJyGs3D_/user-guides/integrations/images/bubble/bubble-7.png?fit=max&auto=format&n=yfTgmAASFJyGs3D_&q=85&s=eaa3de1123fb4ffbd8f689b5250fa4b4" alt="The Chatbase chat bubble live in a Bubble app preview" width="1892" height="888" data-path="user-guides/integrations/images/bubble/bubble-7.png" />
</Frame>

<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.
</Note>

## Next steps

<Card icon="palette" href="/docs/user-guides/chatbot/channels#chat-bubble-display" title="Customize the chat bubble">
  Match the widget to your brand colors, position, and copy.
</Card>