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

> Embed your Chatbase AI agent on a Wix website using the website widget embed code

## Overview

Adding your Chatbase AI agent to a Wix website takes two things: the embed code from your Chatbase dashboard, and Wix's **Custom Code** embed element. Once pasted, a floating chat bubble appears on your site.

<Card title="What you can do:" icon="comments">
  Put your AI agent in front of every visitor to your Wix 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, [sign up for a free account](https://www.chatbase.co/auth/signup) and follow [Your first AI agent](/docs/user-guides/quick-start/your-first-agent).
* A Wix 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 **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 Wix site editor">
    Sign in to Wix and head to your dashboard. Click **Design Site** in the top-right corner of the page to load your site in the Wix editor.

    <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="The Design Site button in the Wix dashboard" width="1505" height="817" data-path="user-guides/integrations/images/wix/wix-4.png" />
    </Frame>
  </Step>

  <Step title="Add the Custom Code element">
    Scroll to the section of the website where you want the AI agent, then click the big plus (**Add Elements**) button on the left sidebar.

    <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="The Add Elements button in the Wix site editor" width="1863" height="751" data-path="user-guides/integrations/images/wix/wix-5.png" />
    </Frame>

    Scroll down to locate and click **Embed Code**, then **Popular Embeds**, 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="Selecting Custom Code from the Wix embed options" width="1885" height="823" data-path="user-guides/integrations/images/wix/wix-6.png" />
    </Frame>
  </Step>

  <Step title="Paste the embed code">
    When the custom code widget pops up, click **+ Add Custom Code** in the top right, then:

    1. Paste the code snippet into the custom code editor.
    2. Provide a name for your code.
    3. Choose an option under **Add Code to Pages**.
    4. Choose where to place your code under **Place Code in**.
    5. Click **Apply**.
  </Step>
</Steps>

<Check>
  Preview your website and confirm the floating Chatbase chat icon appears.
</Check>

<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="The Chatbase chat bubble live on a Wix website" width="648" height="373" data-path="user-guides/integrations/images/wix/wix-7.jpg" />
</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>