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

# WooCommerce

> Add the homie AI chat widget to your WooCommerce store via your theme footer, a plugin, or functions.php.

WooCommerce runs on WordPress, so you add homie AI by placing the embed script in your site's footer. Use a header/footer plugin (the simplest option), your theme's footer template, or a small `functions.php` hook.

<Note>
  Before you start, make sure you have:

  * An assistant created on the platform
  * Your embed script copied from the assistant's **Publish** area
  * Admin access to your WordPress site
</Note>

## Add the script to your site

<Steps>
  <Step title="Copy your embed script">
    Open your assistant on the platform, go to its **Publish** area, and copy the script. It already contains your `chatbotId`.

    <Frame>
      <img src="https://mintcdn.com/homieai/t1ZSM74lXOpzsQLS/images/integrations/connect.png?fit=max&auto=format&n=t1ZSM74lXOpzsQLS&q=85&s=ddc2630812f2d8706ba54bc3b19cb1a3" alt="Platform Publish area showing the copyable script snippet" width="1340" height="978" data-path="images/integrations/connect.png" />
    </Frame>
  </Step>

  <Step title="Choose how to add it">
    Pick the method that fits your setup:

    <Tabs>
      <Tab title="Plugin (recommended)">
        Install a plugin such as **Insert Headers and Footers** (or **WPCode**). Open its settings and paste the script into the **Footer** / **Body** section:

        ```html theme={null}
        <script
          src="https://cdn.yourhomie.ai/embed.min.js"
          chatbotId="YOUR-CHATBOT-ID"
          defer
        ></script>
        ```

        Save. The plugin injects the script on every page.
      </Tab>

      <Tab title="functions.php">
        In your child theme's `functions.php`, hook into `wp_footer`:

        ```php functions.php theme={null}
        add_action('wp_footer', function () {
            ?>
            <script
              src="https://cdn.yourhomie.ai/embed.min.js"
              chatbotId="YOUR-CHATBOT-ID"
              defer
            ></script>
            <?php
        });
        ```
      </Tab>

      <Tab title="Theme footer">
        In your theme editor, open `footer.php` and paste the script just before the closing `</body>` tag. Use a child theme so your change survives theme updates.
      </Tab>
    </Tabs>
  </Step>

  <Step title="Save and refresh">
    Save your changes and reload your store.
  </Step>
</Steps>

<Check>
  Refresh your store. The homie chat bubble appears in the bottom-right corner. Open it and send a test message.
</Check>

<Warning>
  Edit theme files only in a child theme. Changes made directly to a parent theme are lost when the theme updates.
</Warning>

## Troubleshooting

* **No bubble showing?** Clear any caching plugin and your browser cache, then try an incognito window.
* **Script stripped out?** Some editors sanitize `<script>` tags — use a header/footer plugin instead.

For deeper configuration and methods, see the [Client API](/en/api-reference/client/overview).

## Next steps

<CardGroup cols={2}>
  <Card title="Client API" icon="code" href="/en/api-reference/client/overview">
    Configure the widget and call methods from your site.
  </Card>

  <Card title="Installation overview" icon="plug" href="/en/user-guide/installation/overview">
    Compare install methods for every platform.
  </Card>
</CardGroup>
