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

# Einführung

> Wähle deine Plattform und füge das homie-AI-Chat-Widget mit einem einzigen Embed Script zu deinem Shop hinzu.

Du installierst homie AI, indem du ein kleines Embed Script zu deinem Shop hinzufügst. Du kopierst das Script aus der Plattform – es enthält bereits deine `chatbotId` – und fügst es in deine Seite ein, sodass es auf jeder Seite geladen wird. Das Script wird von `cdn.yourhomie.ai` ausgeliefert, ist `defer` und bleibt auf deiner Seite leichtgewichtig.

<CardGroup cols={2}>
  <Card title="Shopify" icon="shopify" href="/de/user-guide/installation/shopify">
    Füge das Script in dein Theme ein oder nutze die verbundene Shopify-Integration.
  </Card>

  <Card title="Google Tag Manager" icon="google" href="/de/user-guide/installation/google-tag-manager">
    Rolle das Widget über einen Custom-HTML-Tag aus – ganz ohne Theme-Code.
  </Card>

  <Card title="Shopware" icon="bag-shopping" href="/de/user-guide/installation/shopware">
    Füge das Script in dein Storefront-Theme oder einen CMS-Block ein.
  </Card>

  <Card title="WooCommerce" icon="wordpress" href="/de/user-guide/installation/woocommerce">
    Nutze den Theme-Footer, ein Header/Footer-Plugin oder die `functions.php`.
  </Card>

  <Card title="Magento" icon="cart-shopping" href="/de/user-guide/installation/magento">
    Füge das Script per Layout-XML oder über die Footer-HTML-Einstellung hinzu.
  </Card>

  <Card title="WordPress" icon="wordpress" href="/de/user-guide/installation/wordpress">
    Füge das Script per Footer, Header/Footer-Plugin oder Custom-HTML-Block hinzu.
  </Card>

  <Card title="Manuell" icon="code" href="/de/user-guide/installation/manual">
    Die universelle Methode – funktioniert auf jeder Seite, die HTML bearbeiten lässt.
  </Card>
</CardGroup>

## So funktioniert die Installation

Jede Installationsmethode macht dasselbe: Sie platziert das homie Embed Script in deinem Shop, sodass die Chat-Bubble für deine Kund:innen geladen wird.

<Steps>
  <Step title="Script aus der Plattform kopieren">
    Öffne deinen Assistenten in der Plattform, gehe zu seinem **Veröffentlichen**-Bereich und kopiere das Script. Es enthält bereits deine echte `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="In deine Seite einfügen">
    Füge das Script über die zu deiner Plattform passende Methode in deinen Shop ein – meist direkt vor dem schließenden `</body>`-Tag oder über einen Tag Manager bzw. ein Plugin.
  </Step>

  <Step title="Prüfen, ob das Widget lädt">
    Lade deinen Shop neu. Die Chat-Bubble erscheint unten rechts. Öffne sie und sende eine Testnachricht.
  </Step>
</Steps>

Das kanonische Embed-Snippet sieht so aus:

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

<Note>
  Kopiere das Script immer aus der Plattform, statt es von Hand zu tippen – so passt die `chatbotId` garantiert zu deinem Assistenten.
</Note>

## Installationsmethoden im Vergleich

| Plattform          | Methode                                                   | Einrichtungszeit |
| ------------------ | --------------------------------------------------------- | ---------------- |
| Shopify            | In `theme.liquid` einfügen oder Integration nutzen        | \~2 Min.         |
| Google Tag Manager | Custom-HTML-Tag, Trigger „All Pages"                      | \~1 Min.         |
| Shopware           | Storefront-Theme-Template oder CMS-Block                  | \~5 Min.         |
| WooCommerce        | Theme-Footer, Header/Footer-Plugin oder `functions.php`   | \~5 Min.         |
| Magento            | Layout-XML oder Footer-HTML                               | \~5 Min.         |
| WordPress          | Theme-Footer, Header/Footer-Plugin oder Custom-HTML-Block | \~5 Min.         |
| Manuell            | `<script>` auf jeder Seite vor `</body>` einfügen         | \~2 Min.         |

## Nächste Schritte

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

  <Card title="Shopify-Integration" icon="shopify" href="/de/user-guide/integrations/shopify">
    Verbinde Shopify per OAuth, um deinen Produktkatalog zu synchronisieren.
  </Card>
</CardGroup>