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

# Manuell

> Füge das homie-AI-Chat-Widget zu jeder Website hinzu, indem du das Embed Script vor dem schließenden Body-Tag einfügst.

Die manuelle Methode ist der universelle Weg, homie AI zu installieren. Sie funktioniert auf jeder Seite, die HTML bearbeiten lässt: Füge das Embed Script auf jeder Seite vor dem schließenden `</body>`-Tag ein und die Chat-Bubble lädt für deine Kund:innen.

<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
  * Die Möglichkeit, das HTML deiner Seite zu bearbeiten
</Note>

## Embed Script 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="Vor dem schließenden Body-Tag einfügen">
    Füge das Script auf jeder Seite deiner Website direkt vor dem schließenden `</body>`-Tag ein:

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

    <Warning>
      Ersetze `YOUR-CHATBOT-ID` durch deine eigene `chatbotId` aus der Plattform. Wenn du das Script direkt aus dem **Veröffentlichen**-Bereich kopierst, ist das bereits erledigt.
    </Warning>
  </Step>

  <Step title="Speichern und prüfen">
    Speichere deine Datei und lade die Seite im Browser neu.
  </Step>
</Steps>

## Optionale Attribute

Das Script akzeptiert optionale Attribute, um deinem Assistenten zusätzlichen Kontext zu übergeben:

| Attribut   | Zweck                                                   |
| ---------- | ------------------------------------------------------- |
| `storeId`  | Verknüpft die Session mit einem bestimmten Store        |
| `platform` | Gibt die Host-Plattform an (z. B. `platform="shopify"`) |
| `lang`     | Erzwingt die Widget-Sprache                             |
| `country`  | Übergibt das Land der Kund:innen                        |
| `currency` | Übergibt die aktive Währung                             |

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

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

<Tip>
  Mit dem Embed Script musst du die aktuelle Seiten-URL nicht manuell übergeben. Das Embed sendet sie automatisch an
  den Chat — auch wenn sich die Seite später ändert.
</Tip>

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

## Direkte Iframe-Einbindung

Wenn du den Chat bewusst als eigenständiges Iframe rendern willst — zum Beispiel auf Terminals, Kiosksystemen oder in einer kontrollierten App-Shell — kannst du das Embed Script überspringen und die Chat-URL direkt nutzen:

```html theme={null}
<iframe
  src="https://chat.yourhomie.ai/YOUR-CHATBOT-ID"
  width="420"
  height="760"
  style="border:0;"
  allow="microphone"
  title="homie AI chat"
></iframe>
```

Beim direkten Iframe wird der Kontext als reguläre Query-Parameter angehängt:

```html theme={null}
<iframe
  src="https://chat.yourhomie.ai/YOUR-CHATBOT-ID?store=store-berlin-001&currentUrl=https%3A%2F%2Fwww.example-store.com%2Fproducts%2Fcordless-drill-123&disableLink=true"
  width="420"
  height="760"
  style="border:0;"
  allow="microphone"
  title="homie AI chat"
></iframe>
```

| Parameter     | Zweck                                                                                            |
| ------------- | ------------------------------------------------------------------------------------------------ |
| `store`       | Verknüpft die Session mit einem bestimmten Store — der Name lautet hier `store`, nicht `storeId` |
| `currentUrl`  | Die Seite, auf der sich die Kund:innen befinden — immer URL-encodiert übergeben                  |
| `disableLink` | Auf `true` setzen, wenn Produkt- und Content-Links im Chat nicht klickbar sein sollen            |

<Warning>
  Bei einer direkten Iframe-URL ist `currentUrl` nur der initiale Kontext. Ändert sich die Host-Seite später, musst du
  die Iframe-URL selbst aktualisieren. Das Embed Script erledigt das automatisch.
</Warning>

## Fehlerbehebung

* **Widget nicht sichtbar?** Prüfe, ob deine `chatbotId` mit der in der Plattform übereinstimmt, ob das Script vor dem schließenden `</body>`-Tag steht und ob deine Content Security Policy das Embed Script von `cdn.yourhomie.ai` sowie das Laden des Chats von `chat.yourhomie.ai` erlaubt.
* **Script oder Iframe lädt nicht?** Öffne die Browser-Konsole, achte auf Netzwerk- oder Fehlermeldungen und prüfe die Domain in der URL.
* **`currentUrl` wird nicht erkannt?** Prüfe, ob die URL encodiert übergeben wird.
* **Immer noch festgefahren?** Siehe den [Troubleshooting-Guide der Client API](/de/api-reference/client/troubleshooting).

## 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="Fehlerbehebung" icon="bug" href="/de/api-reference/client/troubleshooting">
    Löse häufige Installations- und Laufzeitprobleme.
  </Card>
</CardGroup>