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

# Wix

## Step 1: Set Up Your Chatbase AI agent

To begin the integration process, you'll need to sign into your Chatbase account. If you haven't created an account yet, [sign up for a free account](https://www.chatbase.co/auth/signup). Once logged in, proceed to set up your agent by uploading relevant data sources. These data sources can include files, text snippets, websites, or question-and-answer pairs, which will form the knowledge base for your agent.

If you need help with setting up a functional Chatbase agent, here is a [step-by-step guide for setting up and deploying your Chatbase agent](/docs/user-guides/quick-start/your-first-agent).

## Step 2: Generate and Copy the Chatbase AI agent Embed Code

1\. After configuring your agent, navigate to your [**dashboard**](https://www.chatbase.co/dashboard/) page and select the specific 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 on **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="Deploy" width="2524" height="1504" data-path="user-guides/integrations/images/Integrations/deploy-step.png" />
</Frame>

With the embed code in hand, you are now ready to proceed with the integration process within your Wix application.

## Step 3: Sign Into Your Wix Account and Embed Your AI agent

1\. Sign in to your Wix website and head to your dashboard.

2\. On your dashboard, locate and click on **Design Site** in the top right corner of the page.

<Frame>
  <img src="https://mintcdn.com/chatbase/JnjROJ-aB2q57UGe/user-guides/integrations/images/wix/wix-4.png?fit=max&auto=format&n=JnjROJ-aB2q57UGe&q=85&s=b11d6949ad5ebdeb75f2b5c4b7b5b713" alt="image" width="1505" height="817" data-path="user-guides/integrations/images/wix/wix-4.png" />
</Frame>

3\. Your site should load your site on the Wix website editor.

4\. Scroll down to any section of the website you wish to add the Chatbase agent.

5\. Click the big plus (**Add Elements**) button on the left sidebar of the Wix site editor.

<Frame>
  <img src="https://mintcdn.com/chatbase/JnjROJ-aB2q57UGe/user-guides/integrations/images/wix/wix-5.png?fit=max&auto=format&n=JnjROJ-aB2q57UGe&q=85&s=ee8f87c6793c9b9841080f381d3f23f8" alt="image" width="1863" height="751" data-path="user-guides/integrations/images/wix/wix-5.png" />
</Frame>

6\. Scroll down to locate and click on **Embed Code**, followed by **Popular Embeds** and then **Custom Code**.

<Frame>
  <img src="https://mintcdn.com/chatbase/JnjROJ-aB2q57UGe/user-guides/integrations/images/wix/wix-6.png?fit=max&auto=format&n=JnjROJ-aB2q57UGe&q=85&s=b782d72d03f6284862130721ef6ccf27" alt="image" width="1885" height="823" data-path="user-guides/integrations/images/wix/wix-6.png" />
</Frame>

7\. The custom code widget should pop up, click **+ Add Custom Code** in the top right

8\. Paste the code snippet into the custom code editor.

9\. Provide a name for your code.

10\. Choose an option under **Add Code to Pages**.

11\. Choose where to place your code under Place Code in

12\. Click Apply. Once you've applied the changes, preview your website and you should see the floating Chatbase chat icon on your website.

<Frame>
  <img src="https://mintcdn.com/chatbase/JnjROJ-aB2q57UGe/user-guides/integrations/images/wix/wix-7.jpg?fit=max&auto=format&n=JnjROJ-aB2q57UGe&q=85&s=d285fea436a6c93da5e0be177b783404" alt="image" width="648" height="373" data-path="user-guides/integrations/images/wix/wix-7.jpg" />
</Frame>

**Congratulations, your Chatbase agent is now live on your Wix website.**

<Note>
  You can customize the appearance and colors of your agent on your Chatbase dashboard. To do this, go to your **dashboard**, choose an 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>