> ## Documentation Index
> Fetch the complete documentation index at: https://botpress-pb-update-api.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Wix

> Add a bot to your Wix website using Webchat.

<Info>
  You will need:

  * A [published bot](/get-started/quick-start)
  * A Wix website with a [plan that allows adding custom scripts](https://www.wix.com/plans)
  * A [domain connected to your Wix website](https://support.wix.com/en/article/connecting-a-domain-to-the-wix-name-servers)
  * Familiarity with HTML (if you want to embed in an HTML div)
</Info>

<Tip>
  Visual learner?

  Check out our [Wix guide](https://www.youtube.com/watch?v=rG7dguRDFIA\&t=1068s) on YouTube, which teaches you how to build and embed a bot on your Wix site.
</Tip>

## As a chat bubble

<Steps>
  <Step title="Get your embed code">
    To embed a bot on your website, you need the bot's Webchat embed code. You can get the embed code from the Dashboard:

    1. Open your bot's Workspace and select the bot you want to embed.
    2. In the left sidebar, go to **Webchat** > **Deploy Settings**.
    3. Copy the **Embed code**:

    <Frame>
      <img alt="Embed code from Dashboard" className="block dark:hidden" src="https://mintcdn.com/botpress-pb-update-api/oD2ntPQ5dxiZJE1J/snippets/webchat/assets/embed-code-dashboard.png?fit=max&auto=format&n=oD2ntPQ5dxiZJE1J&q=85&s=a3d5e81d0ca9e72e067829b397e70c21" width="1600" height="288" data-path="snippets/webchat/assets/embed-code-dashboard.png" />

      <img alt="Embed code from Dashboard" className="hidden dark:block" src="https://mintcdn.com/botpress-pb-update-api/oD2ntPQ5dxiZJE1J/snippets/webchat/assets/embed-code-dashboard-dark.png?fit=max&auto=format&n=oD2ntPQ5dxiZJE1J&q=85&s=4867bda5552c06a1e0415322ba2f0897" width="1600" height="288" data-path="snippets/webchat/assets/embed-code-dashboard-dark.png" />
    </Frame>
  </Step>

  <Step title="Add to your Wix website">
    Next, add the Webchat embed code to your Wix website:

    1. Login to your [Wix](https://www.wix.com) dashboard and select **Settings** in the left navigation bar.
    2. Scroll to **Advanced Settings**, then select **Custom Code**.
    3. Select **+ Add Custom Code**. Then, paste the Webchat embed code in code snippet field.
    4. Check the **All pages** option, then select **Load code once** from the drop-down menu.
    5. Check the **Body - start** option.
    6. Select **Apply**.
  </Step>
</Steps>

## In an HTML div

You can also embed your bot in an HTML div. This is useful if you want more control over where your bot appears on your Wix site.

<Steps>
  <Step title="Get your Webchat initialization script">
    <GetInitScript />
  </Step>

  <Step title="Copy the script URL">
    Open the URL in your browser and **copy the content of the page**. It should look something like this:

    ```uri https://files.bpcontent.cloud/20XX/0X/0X/XX/XXXXXXXXXXXXXXXX-XXXXXXXX.js [expandable] theme={null}
    window.botpress.init({
        "botId": "xxxxxxxxxxxxxxxxxxxxxx",
        "configuration": {
            "website": {},
            "email": {},
            "phone": {},
            "termsOfService": {},
            "privacyPolicy": {},
            "variant": "soft",
            "themeMode": "light",
            "fontFamily": "inter"
        },
        "clientId": "xxxxxxxxxxxxxxxxxxxxxx"
    });
    ```
  </Step>

  <Step title="Add to your Wix site">
    Next, use your credentials to embed the Webchat in an HTML div on your website.

    1. Login to your [Wix](https://www.wix.com) dashboard and select **Edit Site** in the upper-right corner.
    2. Select **Add Elements** from the left sidebar.
    3. Select **Embed Code**, then select **Embed HTML**.
    4. Adjust your HTML div as you'd like.
    5. Under **Add your code here (HTTPS only)**, add the following code:

    ```html {8} [expandable] theme={null}
    <div id="webchat-container" style="position: relative; width: 100%; height: 100%;">
      <script src="https://cdn.botpress.cloud/webchat/v3.3/inject.js"></script>
      <script>
        window.botpress.on('webchat:initialized', () => {
          window.botpress.open()
        })

        // Paste your Webchat config snippet here
      </script>
      <style>
        #webchat-container {
          position: relative;
          width: 100%;
          height: 100%;
        }
        .bpFab {
          display: none;
        }
        .bpWebchat {
          position: absolute !important;
          top: 0 !important;
          left: 0 !important;
          right: 0 !important;
          bottom: 0 !important;
          width: 100% !important;
          height: 100% !important;
          max-height: 100% !important;
        }
      </style>
    </div>
    ```
  </Step>
</Steps>

## As a website

You can also embed your bot as a website via Webchat preview.

<Steps>
  <Step title="Get your shareable link">
    1. In Studio, select **Share** in the upper-right corner.
    2. Copy your bot's shareable link.
  </Step>

  <Step title="Add to your Wix website">
    1. Login to your [Wix](https://www.wix.com) dashboard and select **Edit Site** in the upper-right corner.
    2. Select **Add Elements** from the left sidebar.
    3. Select **Embed Code**, then select **Embed a site**.
    4. In the **What's the website address** field, paste your bot's link, then select **Apply.**
  </Step>
</Steps>

<Check>
  Your bot is now live on your Wix site.
</Check>

## Next steps

Now that you've added your bot, try [styling](/webchat/get-started/configure-your-webchat) it to match the rest of your website's user interface.