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

# Magento

> Füge das homie-AI-Chat-Widget per Layout-XML oder über die Footer-HTML-Einstellung zu deinem Magento-2-Shop hinzu.

Du kannst homie AI zu Magento 2 hinzufügen, ohne ein Modul zu schreiben. Der schnellste Weg ist die Footer-HTML-Einstellung unter **Content → Configuration** im Admin; für Theme-Kontrolle bindest du das Script per Layout-XML ein.

<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 deinen Magento-2-Shop
</Note>

## Script zum Storefront 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.02.40.png?fit=max&auto=format&n=m0ZcYuq9OdpATfdE&q=85&s=cad4593736c9365fdd6a088f10f206b1" 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="3004" height="1490" data-path="images/Bildschirmfoto-2026-07-01-um-12.02.40.png" />

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

  <Step title="Methode wählen">
    <Tabs>
      <Tab title="Admin-Footer-HTML (empfohlen)">
        Gehe im Magento-Admin zu **Content → Design → Configuration**, bearbeite die passende Store View und öffne **HTML Head** oder **Footer**. Füge das Script in **Miscellaneous HTML** (Footer) ein:

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

        Speichere die Konfiguration.
      </Tab>

      <Tab title="Layout-XML">
        Füge in deinem eigenen theme einen Block zur `default.xml` hinzu, der ein kleines Template mit dem Script referenziert, oder nutze einen `<block>` mit dem Script im Container `before.body.end`:

        ```xml default.xml theme={null}
        <referenceContainer name="before.body.end">
            <block class="Magento\Framework\View\Element\Template"
                   name="homie.embed"
                   template="Magento_Theme::html/homie-embed.phtml" />
        </referenceContainer>
        ```

        Platziere das Embed-`<script>` in `homie-embed.phtml`.
      </Tab>
    </Tabs>
  </Step>

  <Step title="Cache leeren">
    Leere den Magento-Cache, damit deine Änderung ausgeliefert wird.
  </Step>
</Steps>

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

## Fehlerbehebung

* **Keine Bubble sichtbar?** Leere den Magento-Cache, dann deinen Browser-Cache oder nutze ein Inkognito-Fenster.
* **Auf den falschen Store angewendet?** Prüfe, ob du den richtigen **Store View**-Scope in der Konfiguration bearbeitet hast.

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>