Widget Events API

Übersicht

Die Lymbe AI Widget Events API ermöglicht es dir, das Chat-Widget programmatisch zu steuern und auf Ereignisse zu reagieren. Sobald das Widget geladen ist, steht das globale Objekt window.LymbeWidget zur Verfügung.

Ready Event

// Warten bis das Widget bereit ist
window.addEventListener('lymbe:ready', function() {
  console.log('Lymbe AI Widget ist bereit!');
  console.log(window.LymbeWidget); // API-Objekt verfügbar
});

Methoden

open()

Öffnet das Chat-Fenster programmatisch.

window.LymbeWidget.open();

// Beispiel: Chat öffnen wenn Nutzer auf einen CTA-Button klickt
document.getElementById('help-button').addEventListener('click', function() {
  window.LymbeWidget.open();
});

close()

Schließt das Chat-Fenster.

window.LymbeWidget.close();

toggle()

Wechselt zwischen offenem und geschlossenem Zustand.

window.LymbeWidget.toggle();

sendMessage(text)

Sendet eine Nachricht im Namen des Nutzers. Das Chat-Fenster wird automatisch geöffnet.

// Nachricht senden
window.LymbeWidget.sendMessage('Ich habe eine Frage zu meiner Bestellung');

// Beispiel: Kontextbezogene Frage basierend auf der aktuellen Seite
var product = document.querySelector('h1.product-title')?.textContent;
if (product) {
  window.LymbeWidget.sendMessage('Ich habe eine Frage zu: ' + product);
}

setUser(userData)

Übergibt Nutzerdaten an das Widget, um personalisierte Antworten zu ermöglichen und Lead-Daten vorab zu befüllen.

window.LymbeWidget.setUser({
  name: 'Max Mustermann',
  email: 'max@example.com',
  phone: '+49 123 4567890',
  company: 'Musterfirma GmbH',
  customFields: {
    kundennummer: 'K-12345',
    plan: 'enterprise'
  }
});

reset()

Setzt den Chat zurück und startet ein neues Gespräch. Alle bisherigen Nachrichten werden entfernt.

window.LymbeWidget.reset();

destroy()

Entfernt das Widget komplett aus dem DOM. Nützlich für Single-Page-Apps.

window.LymbeWidget.destroy();

Event-Listener

Reagiere auf Ereignisse im Widget mit Callback-Funktionen:

onMessage

// Wird aufgerufen wenn eine Nachricht gesendet oder empfangen wird
window.LymbeWidget.onMessage(function(message) {
  console.log('Nachricht:', message);
  // message.type  -> 'user' | 'bot' | 'agent'
  // message.text  -> Der Nachrichtentext
  // message.timestamp -> ISO-8601 Zeitstempel
});

onOpen / onClose

window.LymbeWidget.onOpen(function() {
  console.log('Chat wurde geöffnet');
  // z. B. Analytics-Event tracken
  gtag('event', 'chat_opened', { event_category: 'engagement' });
});

window.LymbeWidget.onClose(function() {
  console.log('Chat wurde geschlossen');
});

onLeadCaptured

window.LymbeWidget.onLeadCaptured(function(lead) {
  console.log('Lead erfasst:', lead);
  // lead.name, lead.email, lead.phone, lead.company
  // z. B. an dein CRM senden
  fetch('/api/crm/leads', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(lead)
  });
});

onHandover

window.LymbeWidget.onHandover(function(data) {
  console.log('Übergabe an Agent:', data);
  // data.agentName -> Name des zugewiesenen Agenten
  // data.waitTime  -> Geschätzte Wartezeit in Sekunden
});

Vollständiges Beispiel

<script src="https://app.lymbe.ai/widget.js" data-bot-id="BOT_ID" data-hide-button="true"></script>

<button id="chat-trigger" class="btn btn-primary">
  Chat starten
</button>

<script>
  window.addEventListener('lymbe:ready', function() {
    // Button zum Öffnen des Chats
    document.getElementById('chat-trigger').addEventListener('click', function() {
      window.LymbeWidget.open();
    });

    // Bekannten Nutzer setzen
    var userData = JSON.parse(localStorage.getItem('user') || 'null');
    if (userData) {
      window.LymbeWidget.setUser({
        name: userData.name,
        email: userData.email
      });
    }

    // Events tracken
    window.LymbeWidget.onMessage(function(msg) {
      if (msg.type === 'user') {
        analytics.track('Chat Message Sent');
      }
    });

    window.LymbeWidget.onLeadCaptured(function(lead) {
      analytics.track('Lead Captured', lead);
    });
  });
</script>