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

# Weebly

> Embed your Chatbase AI agent on a Weebly website using the iFrame embed code

## Overview

Adding your Chatbase AI agent to a Weebly website takes two things: the iFrame embed code from your Chatbase dashboard, and Weebly's **Embed Code** widget. Once pasted, your AI agent appears on the page.

> **What you can do:**
>
> Put your AI agent in front of every visitor to your Weebly site, 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 Weebly website you can edit.

## How to embed your AI agent

**1. Copy your embed code**

1. Navigate to your [dashboard](https://www.chatbase.co/dashboard/) and select the AI agent you wish to embed.
2. Click **Channels** in the left sidebar, then click **Manage** on the **Chat bubble** card (or **Setup**, if you haven't configured it yet).
3. Click **Deploy** and select the **iFrame** embed type. Scroll down and click **Copy** to copy the provided HTML code.

![The Deploy step in the Chatbase dashboard](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)

![Copying the iFrame embed code](https://mintcdn.com/chatbase/DnMdgLj-7YGWYAcx/user-guides/integrations/images/Integrations/iframe-embed.png?fit=max\&auto=format\&n=DnMdgLj-7YGWYAcx\&q=85\&s=aea38c13c9ed5f73151a530d81fc1a05)

**2. Open your Weebly site editor**

Sign in to your Weebly account, head to the **Edit site** page, and select the page to edit.

**3. Add the Embed Code widget**

From the Basic toolbar on the left side of the editing page, locate the **Embed Code** widget.

![The Embed Code widget in the Weebly Basic toolbar](https://mintcdn.com/chatbase/kU-6NVMb2BBkym9H/user-guides/integrations/images/weebly/weebly-4.png?fit=max\&auto=format\&n=kU-6NVMb2BBkym9H\&q=85\&s=c38f8b71ac65464ff66fa779b03c9c5e)

Drag the **Embed Code** element to wherever you want your AI agent to appear on the page.

![Dragging the Embed Code element onto a Weebly page](https://mintcdn.com/chatbase/kU-6NVMb2BBkym9H/user-guides/integrations/images/weebly/weebly-5.png?fit=max\&auto=format\&n=kU-6NVMb2BBkym9H\&q=85\&s=4445c08599e379095a0f3c1d251e51b6)

**4. Paste the embed code**

You'll see a text element that says **Click to set custom HTML** where the widget was placed. Click the text, then click **Edit Custom HTML**, and paste your Chatbase embed code into the box.

![Pasting the embed code into the Weebly custom HTML box](https://mintcdn.com/chatbase/kU-6NVMb2BBkym9H/user-guides/integrations/images/weebly/weebly-6.png?fit=max\&auto=format\&n=kU-6NVMb2BBkym9H\&q=85\&s=2f8677158901f73d3cac919fb773391a)

> [!TIP]
>
> Click outside the element and confirm your AI agent appears on the page.

![The Chatbase AI agent live on a Weebly website](https://mintcdn.com/chatbase/kU-6NVMb2BBkym9H/user-guides/integrations/images/weebly/weebly-7.png?fit=max\&auto=format\&n=kU-6NVMb2BBkym9H\&q=85\&s=b438e1a2021ae25b7645416f68a871f2)

> [!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.