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

# Beispiele

> Praktische Rezepte zum Öffnen des Widgets, Senden von Nachrichten, Anhängen von Metadaten und Lesen des Verlaufs.

Diese Rezepte decken die häufigsten Client-API-Integrationen ab. Alle setzen voraus, dass das Embed-Skript installiert ist — siehe [Übersicht](/de/api-reference/client/overview) und [Konfiguration](/de/api-reference/client/configuration).

## Warten, bis die API bereit ist

Das Embed löst Browser-Events aus, sobald es bereit ist. Höre lieber auf diese, statt zu pollen.

Falls dein Code vor **oder** nach Bereitschaft des Embeds laufen kann, prüfe einmalig und höre dann:

```js theme={null}
if (window.homieBot) {
  if (window.homieBot.isReady()) {
    window.homieBot.open();
  } else {
    window.addEventListener('homiebot:assistant-ready', () => window.homieBot.open(), { once: true });
  }
} else {
  window.addEventListener('homiebot:api-ready', () => window.homieBot.open(), { once: true });
}
```

**Polling-Fallback** für ältere Embed-Versionen ohne Events:

```js theme={null}
function waitForHomie() {
  return new Promise((resolve) => {
    if (window.homieBot) return resolve(window.homieBot);
    const iv = setInterval(() => {
      if (window.homieBot) {
        clearInterval(iv);
        resolve(window.homieBot);
      }
    }, 200);
  });
}

await waitForHomie();
window.homieBot.open();
```

## Automatisch bei Interesse öffnen

Öffne das Widget nach einer Verzögerung, um zur Interaktion einzuladen:

```js theme={null}
window.addEventListener('homiebot:api-ready', () => {
  setTimeout(() => window.homieBot.open(), 10_000);
});
```

## Nach Scroll-Tiefe öffnen

Öffne den Chat, sobald der Besucher über einen Schwellenwert hinaus scrollt:

```js theme={null}
function openAfterScroll(px = 600) {
  const onScroll = () => {
    if (window.scrollY > px) {
      window.homieBot.open();
      window.removeEventListener('scroll', onScroll);
    }
  };
  window.addEventListener('scroll', onScroll, { passive: true });
}

window.addEventListener('homiebot:api-ready', () => openAfterScroll());
```

## Eine Produktfrage auslösen

Füge von einer Produktdetailseite aus einen kontextgetriebenen Prompt ein. `sendMessage` öffnet den Chat automatisch, falls er geschlossen ist:

```js theme={null}
window.addEventListener('homiebot:assistant-ready', () => {
  document.querySelector('#ask-about-product')?.addEventListener('click', () => {
    window.homieBot.sendMessage({
      text: 'Do you have this product in grey?',
      newChat: false,
    });
  });
});
```

Um den eigenen Produktfragen-Flow für ein Fragenset auszulösen:

```js theme={null}
window.homieBot.sendCustomPdpQuestion('pdp-questions-set-123');
```

## Metadaten an die nächste Nachricht anhängen

Füge Kontext wie das aktuelle Produkt hinzu, bevor der Besucher eine Nachricht sendet:

```js theme={null}
window.homieBot.updateMessageMetadata({
  productId: '12345',
  category: 'power-tools',
  source: 'pdp',
});
```

In einer Single-Page-App veraltete Metadaten bei Navigation löschen:

```js theme={null}
window.homieBot.updateMessageMetadata({
  productId: null,
  category: null,
  source: null,
});
```

## Den Chat-Verlauf lesen

Lies die aktuelle Konversation, etwa um sie an deine eigene Analytics weiterzugeben:

```js theme={null}
window.addEventListener('homiebot:assistant-ready', async () => {
  const history = await window.homieBot.getHistory();
  console.log('Chat history:', history);
});
```

## Eine neue Konversation erzwingen

Starte eine frische Konversation, indem du `newChat: true` setzt:

```js theme={null}
window.homieBot.sendMessage({ text: 'Start over, please.', newChat: true });
```