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

## Step 1: Sign Into Your Chatbase Account and Set up your Bot

To embed your Chatbase bot into your Weebly website, first sign in to your Chatbase account. If you don't have an account yet, you can create one for free. Once signed in, you can set up your bot in Chatbase by uploading data sources like files, text snippets, websites, or Q\&A pairs that the bot can learn from. Here is a [<u>step-by-step guide for setting up your Chatbase agent</u>](/user-guides/quick-start/your-first-agent).

## Step 2: Generate and Copy Chatbot Embed Code

1\. After setting up your agent, head to your [dashboard](https://www.chatbase.co/dashboard/), and click on the bot you want to embed on your Weebly website to reveal the bot's Playground page.

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/chatbase/user-guides/integrations/images/Integrations/dasbhoard-step.png" alt="Dashboard" />
</Frame>

2\. On the agent preview page, click on the **Deploy** tab.

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/chatbase/user-guides/integrations/images/Integrations/deploy-step.png" alt="Deploy" />
</Frame>

3\. A new page should come up. Click on **Manage** for the Chat Widget.

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/chatbase/user-guides/integrations/images/Integrations/chatwidget-manage.png" alt="Chat Widget [Manage]" />
</Frame>

4\. Click on **Embed** and select the **Iframe** embed type. Scroll down and Click **Copy** to copy the provided HTML code.

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/chatbase/user-guides/integrations/images/Integrations/Embed-iframe.png" alt="Copy Iframe" />
</Frame>

## Step 3: Add Embed Code to Your Weebly Website

To add a Chatbase agent to your Weebly website:

1\. Sign in to your Weebly account and head to the **Edit site** page.

2\. Select the page to edit.

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

<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="image" width="1918" height="839" data-path="user-guides/integrations/images/weebly/weebly-4.png" />
</Frame>

4\. Drag the **Embed Code** element to wherever you want your 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="image" width="1901" height="741" data-path="user-guides/integrations/images/weebly/weebly-5.png" />
</Frame>

5\. You should then see a text element that says **Click to set custom HTML** where the Embed code widget was placed. Click on the text, and then click on **Edit Custom HTML.**

6\. Paste your Chatbase embed code into the custom HTML 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="image" width="1541" height="761" data-path="user-guides/integrations/images/weebly/weebly-6.png" />
</Frame>

7\. Click outside the element and your agent should appear on the page.

<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="image" width="1900" height="886" data-path="user-guides/integrations/images/weebly/weebly-7.png" />
</Frame>

Congratulations, your agent is now live on your Weebly website!

> **Note:** You can customize the appearance and colors of your bot on your Chatbase dashboard. To do this, go to your **dashboard**, choose a bot, click the **Settings** tab on the top of the page, and then click **Chat Interface** on the left sidebar to reveal the agent customization options.