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

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

## How to embed your AI agent

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

    <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 in the Chatbase dashboard" width="2524" height="1504" data-path="user-guides/integrations/images/Integrations/deploy-step.png" />
    </Frame>

    <Frame>
      <img src="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" alt="Copying the iFrame embed code" width="2524" height="1504" data-path="user-guides/integrations/images/Integrations/iframe-embed.png" />
    </Frame>
  </Step>

  <Step title="Open your Weebly site editor">
    Sign in to your Weebly account, head to the **Edit site** page, and select the page to edit.
  </Step>

  <Step title="Add the Embed Code widget">
    From the Basic toolbar on the left side of the editing page, locate the **Embed Code** widget.

    <Frame>
      <img src="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" alt="The Embed Code widget in the Weebly Basic toolbar" width="1918" height="839" data-path="user-guides/integrations/images/weebly/weebly-4.png" />
    </Frame>

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

    <Frame>
      <img src="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" alt="Dragging the Embed Code element onto a Weebly page" width="1901" height="741" data-path="user-guides/integrations/images/weebly/weebly-5.png" />
    </Frame>
  </Step>

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

    <Frame>
      <img src="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" alt="Pasting the embed code into the Weebly custom HTML box" width="1541" height="761" data-path="user-guides/integrations/images/weebly/weebly-6.png" />
    </Frame>
  </Step>
</Steps>

<Check>
  Click outside the element and confirm your AI agent appears on the page.
</Check>

<Frame>
  <img src="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" alt="The Chatbase AI agent live on a Weebly website" width="1900" height="886" data-path="user-guides/integrations/images/weebly/weebly-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>