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

> Füge das homie-AI-Chat-Widget über deinen Theme-Footer, ein Plugin oder die functions.php zu deinem WooCommerce-Shop hinzu.

WooCommerce läuft auf WordPress, daher fügst du homie AI hinzu, indem du das Embed Script in den Footer deiner Seite einbindest. Nutze ein Header/Footer-Plugin (die einfachste Option), das Footer-Template deines Themes oder einen kleinen `functions.php`-Hook.

<Note>
  Bevor du startest, stelle sicher, dass du Folgendes hast:

  * Einen in der Plattform erstellten Assistenten
  * Dein aus dem **Veröffentlichen**-Bereich des Assistenten kopiertes Embed Script
  * Admin-Zugriff auf deine WordPress-Seite
</Note>

## Script zur Seite hinzufügen

<Steps>
  <Step title="Embed Script kopieren">
    Öffne deinen Assistenten in der Plattform, gehe zu seinem **Veröffentlichen**-Bereich und kopiere das Script. Es enthält bereits deine `chatbotId`.

    <Frame>
      <img src="https://mintcdn.com/homieai/m0ZcYuq9OdpATfdE/images/Bildschirmfoto-2026-07-01-um-12.01.36-1.png?fit=max&auto=format&n=m0ZcYuq9OdpATfdE&q=85&s=aafdd774d515d0e59258bbd798475fbd" alt="Veröffentlichen-Bereich in der Plattform mit dem kopierbaren Script-Snippet" lightAlt="Veröffentlichen-Bereich in der Plattform mit dem kopierbaren Script-Snippet" darkAlt="Veröffentlichen-Bereich in der Plattform mit dem kopierbaren Script-Snippet" className="dark:hidden" width="3014" height="1392" data-path="images/Bildschirmfoto-2026-07-01-um-12.01.36-1.png" />

      <img src="https://mintcdn.com/homieai/m0ZcYuq9OdpATfdE/images/Bildschirmfoto-2026-07-01-um-12.01.36-2.png?fit=max&auto=format&n=m0ZcYuq9OdpATfdE&q=85&s=be33ba4e3a4f4df605c6bc3c1c442cbe" alt="Veröffentlichen-Bereich in der Plattform mit dem kopierbaren Script-Snippet" lightAlt="Veröffentlichen-Bereich in der Plattform mit dem kopierbaren Script-Snippet" darkAlt="Veröffentlichen-Bereich in der Plattform mit dem kopierbaren Script-Snippet" className="hidden dark:block" width="3014" height="1392" data-path="images/Bildschirmfoto-2026-07-01-um-12.01.36-2.png" />
    </Frame>
  </Step>

  <Step title="Methode wählen">
    Wähle die Methode, die zu deinem Setup passt:

    <Tabs>
      <Tab title="Plugin (empfohlen)">
        Installiere ein Plugin wie **Insert Headers and Footers** (oder **WPCode**). Öffne die Einstellungen und füge das Script in den **Footer**-/**Body**-Bereich ein:

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

        Speichern. Das Plugin bindet das Script auf jeder Seite ein.
      </Tab>

      <Tab title="functions.php">
        Hänge dich in der `functions.php` deines Child-Themes in `wp_footer` ein:

        ```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">
        Öffne im Theme-Editor die `footer.php` und füge das Script direkt vor dem schließenden `</body>`-Tag ein. Nutze ein Child-Theme, damit deine Änderung Theme-Updates übersteht.
      </Tab>
    </Tabs>
  </Step>

  <Step title="Speichern und neu laden">
    Speichere deine Änderungen und lade deinen Shop neu.
  </Step>
</Steps>

<Check>
  Lade deinen Shop neu. Die homie-Chat-Bubble erscheint unten rechts. Öffne sie und sende eine Testnachricht.
</Check>

<Warning>
  Bearbeite Theme-Dateien nur in einem Child-Theme. Änderungen direkt am Parent-Theme gehen beim Theme-Update verloren.
</Warning>

## Fehlerbehebung

* **Keine Bubble sichtbar?** Leere ein eventuelles Caching-Plugin und deinen Browser-Cache und versuche es im Inkognito-Fenster.
* **Script entfernt?** Manche Editoren bereinigen `<script>`-Tags – nutze stattdessen ein Header/Footer-Plugin.

Für tiefergehende Konfiguration und Methoden siehe die [Client API](/de/api-reference/client/overview).

## Nächste Schritte

<CardGroup cols={2}>
  <Card title="Client API" icon="code" href="/de/api-reference/client/overview">
    Konfiguriere das Widget und rufe Methoden von deiner Seite auf.
  </Card>

  <Card title="Installation – Überblick" icon="plug" href="/de/user-guide/installation/overview">
    Vergleiche die Installationsmethoden für jede Plattform.
  </Card>
</CardGroup>