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

# WordPress

> Füge das homie-AI-Chat-Widget per Footer, Header/Footer-Plugin oder Custom-HTML-Block zu deiner WordPress-Seite hinzu.

Du kannst homie AI zu jeder WordPress-Seite hinzufügen, indem du das Embed Script im Seiten-Footer platzierst, sodass es überall lädt. Ein Header/Footer-Plugin ist die einfachste Option, aber du kannst auch deinen Theme-Footer oder einen Custom-HTML-Block nutzen.

<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-10.30.21.png?fit=max&auto=format&n=m0ZcYuq9OdpATfdE&q=85&s=efc7e5b2aff6ffcc42ea1d05ba872688" 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="3008" height="1420" data-path="images/Bildschirmfoto-2026-07-01-um-10.30.21.png" />

      <img src="https://mintcdn.com/homieai/m0ZcYuq9OdpATfdE/images/Bildschirmfoto-2026-07-01-um-10.30.21-1.png?fit=max&auto=format&n=m0ZcYuq9OdpATfdE&q=85&s=f7d61a520321cebacfff73001a882043" 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="3008" height="1420" data-path="images/Bildschirmfoto-2026-07-01-um-10.30.21-1.png" />
    </Frame>
  </Step>

  <Step title="Methode wählen">
    <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="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 die Änderung Theme-Updates übersteht.
      </Tab>

      <Tab title="Custom-HTML-Block">
        Für eine einzelne Landingpage fügst du im Block-Editor einen **Custom HTML**-Block hinzu und fügst das Script dort ein. Beachte: So lädt das Widget nur auf dieser Seite, nicht seitenweit.
      </Tab>
    </Tabs>
  </Step>

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

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

<Tip>
  Nutzt du WooCommerce? Im [WooCommerce-Guide](/de/user-guide/installation/woocommerce) findest du dieselben Schritte mit shop-spezifischen Hinweisen.
</Tip>

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