Widget steuern & Events

Das Widget spricht in zwei Richtungen mit deiner Seite:

Du steuerst das Widget über Methoden auf window.Panderra (öffnen, schließen, Conversion melden).
Das Widget meldet sich über panderra:*-Events, die es auf dem <ai-knowledger-search>-Element auslöst.

Faustregel: kommandieren = Methode, zuhören = Event.

Steuern: `window.Panderra`

window.Panderra ist verfügbar, sobald das Bundle geladen ist. Rufst du eine Methode auf, bevor das Widget fertig gemountet ist, wird der Aufruf gepuffert und nachgeholt — du musst also nicht auf ein „ready”-Signal warten.

// Such-Overlay öffnen (optional mit vorausgefüllter Suche)
window.Panderra.openSearch()
window.Panderra.openSearch('Vergaser')

// Direkt im KI-Berater öffnen (bestehender Verlauf bleibt erhalten)
window.Panderra.openChat()

// Overlay schließen
window.Panderra.close()

Methode	Wirkung
`openSearch(query?)`	Öffnet das Overlay in der Suche. Mit `query` wird sofort gesucht.
`openChat()`	Öffnet das Overlay direkt im KI-Berater.
`close()`	Schließt das Overlay.
`trackConversion(payload)`	Meldet einen Suchergebnis-Klick außerhalb des Widgets — siehe Conversion-Tracking.

Typischer Einsatz: ein eigener „Frag die KI”-Button irgendwo auf der Seite, der window.Panderra.openChat() aufruft. So findet der Endkunde den Berater, ohne erst die Suche öffnen zu müssen.

Zuhören: Events

Die Events laufen auf dem <ai-knowledger-search>-Element und durchdringen das Shadow DOM (composed: true):

const widget = document.querySelector('ai-knowledger-search')

// Nach jeder frischen Ergebnis-Ladung (Auto-Suche + Enter)
widget.addEventListener('panderra:search-results', (e) => {
  console.log(e.detail.query, e.detail.results, e.detail.searchLogId)
})

// Wenn der Nutzer mit Enter bestätigt — dein Signal zum Navigieren
widget.addEventListener('panderra:search-submit', (e) => {
  location.href = `/suche?q=${encodeURIComponent(e.detail.query)}`
})

// Ungelesene Operator-Nachricht (Live-Chat) — fürs Badge am Launcher
widget.addEventListener('panderra:unread', (e) => {
  setBadge(e.detail.count)   // steigt bei neuer Nachricht, 0 sobald gelesen
})

Event	`detail`	Wann
`panderra:search-results`	`{ query, results, searchLogId }`	Nach jeder frischen Ergebnis-Ladung
`panderra:search-submit`	`{ query, results, searchLogId }`	Nutzer bestätigt per Enter — Moment zum Navigieren
`panderra:unread`	`{ count }`	Operator-Nachricht trifft ein, während der Chat nicht sichtbar ist; `0`, sobald gelesen

Conversion-Tracking

Wenn du per panderra:search-submit auf deine eigene Ergebnisseite weiterleitest, verlässt der Nutzer das Widget. Der anschließende Klick auf einen Artikel passiert außerhalb — und ginge der Lernschleife verloren. trackConversion meldet ihn zurück:

// Auf deiner Ergebnisseite, beim Klick auf einen Artikel:
artikelLink.addEventListener('click', () => {
  window.Panderra.trackConversion({ productId: 'A-12345' })
})

string

required

Produkt-ID / SKU des geklickten Artikels.

string

Die Suche, zu der der Klick gehört. Optional — fehlt sie, nutzt das Widget die zuletzt gemerkte Suche (übersteht einen Reload im selben Tab).

string

Host-Session-ID. Optional — fällt sonst auf die Such-Session des Widgets zurück.

string

Aus welcher Stufe der Artikel kam: treffer, ergebnisse, aehnliche, vielleicht oder pinned. Nur für die Statistik.

Für den typischen Ablauf (Suche im Widget → Enter → Weiterleitung → Klick im selben Tab) reicht trackConversion({ productId }) ohne weitere IDs — das Widget merkt sich die Suche über die Sitzung. Willst du es tab-übergreifend exakt, gibst du die searchLogId aus panderra:search-submit über die Weiterleitung mit (z. B. als URL-Parameter) und reichst sie hier wieder ein.

Beispiel: JTL-Shop-Integration

So greift alles ineinander — Enter leitet auf die Standard-Ergebnisseite, der Artikelklick dort schließt die Lernschleife:

const widget = document.querySelector('ai-knowledger-search')

// 1. Enter im Widget → auf die native Shop-Ergebnisseite, searchLogId mitnehmen
widget.addEventListener('panderra:search-submit', (e) => {
  const q = encodeURIComponent(e.detail.query)
  const log = encodeURIComponent(e.detail.searchLogId ?? '')
  location.href = `/suche?q=${q}&pq=${log}`
})

// 2. Auf der Ergebnisseite: jeden Artikelklick zurückmelden
const searchLogId = new URLSearchParams(location.search).get('pq') || undefined
document.querySelectorAll('.produkt-kachel a').forEach((link) => {
  link.addEventListener('click', () => {
    window.Panderra.trackConversion({
      productId: link.dataset.artikelId,
      searchLogId,
    })
  })
})

Get Started

Tutorials

Widget

API Reference

Widget steuern & Events

Steuern: `window.Panderra`

Zuhören: Events

Conversion-Tracking

Beispiel: JTL-Shop-Integration

​Steuern: window.Panderra

​Zuhören: Events

​Conversion-Tracking

​Beispiel: JTL-Shop-Integration

Steuern: `window.Panderra`

Zuhören: Events

Conversion-Tracking

Beispiel: JTL-Shop-Integration