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

> Steuere das eingebettete homie-Chat-Widget von deiner Website aus über die globale Browser-API window.homieBot.

Die Client-API ist eine browserseitige JavaScript-Schnittstelle, die vom homie-Embed-Skript bereitgestellt wird. Sobald das Skript geladen ist, steht ein globales `window.homieBot`-Objekt zur Verfügung. Damit öffnest oder schließt du das Widget, prüfst seinen Zustand, sendest programmatisch Nachrichten, hängst Metadaten an und liest den Chat-Verlauf — alles aus deinem eigenen Seitencode.

<Note>
  Diese Seite dokumentiert die clientseitige Browser-API des Embed-Skripts. Für serverseitige REST-Endpunkte siehe die
  [REST API](/de/api-reference/backend/overview).
</Note>

## Embed-Skript einbinden

Füge das Embed-Skript zu deiner Seite hinzu. Styling und Verhalten werden in der homie Plattform verwaltet und vom Embed automatisch geladen.

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

Plattformspezifische Installationsschritte findest du in der [Installations-Übersicht](/de/user-guide/installation/overview).

## Voraussetzungen

1. Das Skript muss auf deiner Seite eingebunden sein.
2. `chatbotId` muss gesetzt sein (am Script-Tag oder über `window.homieBotConfig`).

Alle Script-Attribute und globalen Konfigurationsobjekte findest du unter [Konfiguration](/de/api-reference/client/configuration).

## Wann die API verfügbar ist

Das `window.homieBot`-Objekt existiert erst, **nachdem** das Embed initialisiert wurde. Geh nicht davon aus, dass es beim Seitenaufruf schon vorhanden ist.

<Warning>
  Wenn du `window.homieBot` direkt beim Seitenaufruf liest, kann es `undefined` sein. Höre auf das Event
  `homiebot:api-ready` oder nutze den `waitForHomie()`-Polling-Fallback aus den
  [Beispielen](/de/api-reference/client/examples).
</Warning>

Das Embed löst Browser-Events aus, sobald es die jeweilige Lebenszyklus-Phase erreicht:

| Event                      | Wann                                                    |
| -------------------------- | ------------------------------------------------------- |
| `homiebot:api-ready`       | `window.homieBot` ist verfügbar                         |
| `homiebot:assistant-ready` | Chat-Iframe ist bereit für `sendMessage` / `getHistory` |
| `homiebot:opened`          | Chat-Widget wurde geöffnet                              |
| `homiebot:closed`          | Chat-Widget wurde geschlossen                           |

Jedes Event enthält `{ chatbotId }` in `event.detail`. Details findest du unter [Events](/de/api-reference/client/events).

## Methoden im Überblick

| Methode                                         | Zweck                                                 |
| ----------------------------------------------- | ----------------------------------------------------- |
| `open()`                                        | Chat öffnen                                           |
| `close()`                                       | Chat schließen                                        |
| `toggle()`                                      | Zwischen offen/geschlossen wechseln                   |
| `isOpen()`                                      | Prüfen, ob das Widget offen ist                       |
| `isReady()`                                     | Prüfen, ob das Iframe für Nachrichten bereit ist      |
| `sendMessage(input, options?)`                  | Eine Nachricht in den Chat einfügen                   |
| `getHistory()`                                  | Aktuellen Chat-Verlauf lesen                          |
| `updateMessageMetadata(metadata)`               | Metadaten an die nächste Nachricht anhängen           |
| `sendCustomPdpQuestion(questionSetId)`          | Den eigenen Produktfragen-Flow öffnen                 |
| `trackPdpQuestionsView(element, questionSetId)` | Einen View für selbst gerenderte Produktfragen melden |

Die vollständige Referenz findest du unter [Methoden](/de/api-reference/client/methods).

## Client-API entdecken

<CardGroup cols={2}>
  <Card title="Konfiguration" icon="gear" href="/de/api-reference/client/configuration">
    Script-Attribute, globale Konfigurationsobjekte, Sprach- und Shopify-Markt-Auflösung.
  </Card>

  <Card title="Methoden" icon="code" href="/de/api-reference/client/methods">
    Vollständige Referenz für jede Methode auf `window.homieBot`.
  </Card>

  <Card title="Events" icon="bell" href="/de/api-reference/client/events">
    Vom Embed ausgelöste Browser-Events für Lebenszyklus und Interaktion.
  </Card>

  <Card title="Beispiele" icon="lightbulb" href="/de/api-reference/client/examples">
    Praktische Rezepte zum Öffnen, Senden und Tracken.
  </Card>

  <Card title="Fehlerbehebung" icon="wrench" href="/de/api-reference/client/troubleshooting">
    Lösungen für die häufigsten Integrationsprobleme.
  </Card>
</CardGroup>