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

# Shopware

> Füge das homie-AI-Chat-Widget über dein Theme-Template oder einen CMS-Block zu deinem Shopware-Storefront hinzu.

Du kannst homie AI zu Shopware hinzufügen, indem du das Embed Script in deinem Storefront platzierst, sodass es auf jeder Seite lädt. Füge es einmal in dein Theme-Layout ein oder binde es über einen CMS-HTML-Block (Erlebniswelten) 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
  * Zugriff auf deine Shopware-Theme-Dateien oder den CMS-Editor
</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.00.53.png?fit=max&auto=format&n=m0ZcYuq9OdpATfdE&q=85&s=7e196270da9dddd209a7fd0b8cf8f3fd" 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="1372" data-path="images/Bildschirmfoto-2026-07-01-um-12.00.53.png" />

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

  <Step title="Storefront-Layout-Template öffnen">
    Öffne in deinem Theme (oder einem eigenen Theme, das das Storefront erweitert) das Basis-Layout-Template – üblicherweise `Resources/views/storefront/base.html.twig`. Überschreibe es in deinem eigenen Theme, statt das Core-Template direkt zu bearbeiten.
  </Step>

  <Step title="Vor dem schließenden Body-Tag einfügen">
    Füge das Script direkt vor dem schließenden `</body>`-Tag innerhalb eines Twig-Blocks ein, damit es auf jeder Storefront-Seite gerendert wird:

    ```twig base.html.twig theme={null}
    {% block base_body_script %}
        {{ parent() }}
        <script
          src="https://cdn.yourhomie.ai/embed.min.js"
          chatbotId="YOUR-CHATBOT-ID"
          defer
        ></script>
    {% endblock %}
    ```
  </Step>

  <Step title="Cache leeren und neu bauen">
    Leere den Shopware-Cache und baue das Storefront neu, damit deine Template-Änderung wirksam wird.
  </Step>
</Steps>

<Tip>
  Du möchtest keine Theme-Dateien bearbeiten? Im **Erlebniswelten**-Editor kannst du ein **HTML**-Element zu einem Layout hinzufügen, das allen Seiten zugewiesen ist, und dort dasselbe Script einfügen.
</Tip>

<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 Shopware-Cache, dann deinen Browser-Cache oder nutze ein Inkognito-Fenster.
* **Template-Änderung nicht übernommen?** Stelle sicher, dass du das Template in deinem aktiven Theme überschreibst und das Theme neu kompiliert wurde.

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>