> ## Documentation Index
> Fetch the complete documentation index at: https://help.hoopai.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Chat widget platform install guides

> Step-by-step instructions for installing the HoopAI chat widget on Squarespace, Wix, Weebly, Shopify, and WordPress.

This guide walks through installing the HoopAI chat widget on popular third-party website platforms. Before starting, copy your widget embed code from **Sites > Chat Widget > Edit > Get Code**.

<Tabs>
  <Tab title="Squarespace">
    <Steps>
      <Step title="Open Code Injection">
        In your Squarespace dashboard, go to **Settings > Advanced > Code Injection**.
      </Step>

      <Step title="Paste in the Footer field">
        Paste the widget embed code into the **Footer** field.
      </Step>

      <Step title="Save and verify">
        Click **Save**. Open your live site in an incognito window and confirm the chat widget appears.
      </Step>
    </Steps>

    <Note>
      Code Injection is available on Squarespace Business and Commerce plans. If you are on a Personal plan, you will need to upgrade to add custom code.
    </Note>
  </Tab>

  <Tab title="Wix">
    <Steps>
      <Step title="Open Custom Code">
        In your Wix dashboard, go to **Settings > Custom Code** (under Advanced).
      </Step>

      <Step title="Add custom code">
        Click **+ Add Custom Code**. Paste the widget embed code into the code field.
      </Step>

      <Step title="Configure placement">
        Set the placement to **Body - End** and apply to **All pages**.
      </Step>

      <Step title="Save and publish">
        Click **Apply**, then publish your site. Open the live site to verify the widget appears.
      </Step>
    </Steps>

    <Note>
      Custom Code requires a Wix Premium plan with a connected domain.
    </Note>
  </Tab>

  <Tab title="Weebly">
    <Steps>
      <Step title="Open the HTML/CSS editor">
        In the Weebly editor, click **Settings > SEO** or go to **Theme > Edit HTML/CSS**.
      </Step>

      <Step title="Add the code before closing body tag">
        Locate the closing `</body>` tag in the footer template. Paste the widget embed code just above it.
      </Step>

      <Step title="Save and publish">
        Save the template changes and publish your site. Verify the widget appears on the live site.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Shopify">
    <Steps>
      <Step title="Open your theme code">
        In Shopify admin, go to **Online Store > Themes**. Click **Actions > Edit Code** on your active theme.
      </Step>

      <Step title="Open the theme.liquid file">
        In the Layout folder, click **theme.liquid**.
      </Step>

      <Step title="Paste before the closing body tag">
        Scroll to the bottom of the file and paste the widget embed code just before `</body>`.
      </Step>

      <Step title="Save">
        Click **Save**. The widget appears on all pages of your Shopify store.
      </Step>
    </Steps>

    <Tip>
      If you only want the widget on specific pages, use Shopify's conditional Liquid tags to control where the code renders.
    </Tip>
  </Tab>

  <Tab title="WordPress">
    <Steps>
      <Step title="Option A: Use the HoopAI plugin">
        Install the **HoopAI** plugin from **Plugins > Add New**. Sign in with your HoopAI credentials and select your widget. No code required.
      </Step>

      <Step title="Option B: Manual code insertion">
        If you prefer manual installation, go to **Appearance > Theme Editor** (or use a plugin like "Insert Headers and Footers"). Paste the widget embed code into the footer section.
      </Step>

      <Step title="Save and verify">
        Save your changes and visit the live site to confirm the chat widget appears.
      </Step>
    </Steps>

    <Note>
      The HoopAI plugin method is recommended as it does not require editing theme files and persists across theme changes.
    </Note>
  </Tab>
</Tabs>

## Verifying the installation

After installing on any platform:

1. Open the live site in a private/incognito browser window
2. Confirm the chat bubble appears in the correct position
3. Click the bubble to open the chat window
4. Submit a test message and verify it appears in **Conversations** in your HoopAI account

<Warning>
  If your site uses a cookie consent banner, the chat widget will not load until the visitor accepts cookies. Test with cookies accepted to confirm the widget works correctly.
</Warning>