Beispiele - homie Documentation

Diese Rezepte decken die häufigsten Client-API-Integrationen ab. Alle setzen voraus, dass das Embed-Skript installiert ist — siehe Übersicht und Konfiguration.

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:

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:

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:

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:

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:

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:

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:

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

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

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:

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:

window.homieBot.sendMessage({ text: 'Start over, please.', newChat: true });

​Warten, bis die API bereit ist

​Automatisch bei Interesse öffnen

​Nach Scroll-Tiefe öffnen

​Eine Produktfrage auslösen

​Metadaten an die nächste Nachricht anhängen

​Den Chat-Verlauf lesen

​Eine neue Konversation erzwingen