Skip to main content
Das Panderra-Such-Widget legt sich als Overlay über deine Seite: eine Produktsuche mit vier Ergebnis-Stufen und einem eingebauten KI-Berater („Berater fragen”). Es läuft in einem Shadow DOM — eigene Styles, die nicht mit deinem Shop-CSS kollidieren — und kommt als eine JavaScript-Datei, ohne externe Abhängigkeiten.
Das Widget erbt die Schrift deiner Seite und hält die Oberfläche neutral. Die einzige Marken-Farbe steuerst du über das accent-Attribut (siehe unten) — so fügt es sich in jedes Shop-Theme ein.

​
Voraussetzungen

Widget-Token (wt_…) — im Admin-UI unter Einstellungen → Widget erstellt. Der Token ist öffentlich (er steht im Quelltext deiner Seite) und nur auf Such- und Chat-Zugriff beschränkt.
API-URL deiner Panderra-Instanz, z. B. https://app.panderra.ai.

​
Schnellstart

1

Einbettungs-Code holen

Den fertigen Script-Tag mit deinem Token findest du im Admin-UI unter Einstellungen → Widget. Die folgenden Schritte erklären, woraus er besteht.
2

Script laden

Lade das Widget-Bundle einmal pro Seite — am besten kurz vor </body>:
<script src="https://app.panderra.ai/widget/ai-knowledger-widget.js" defer></script>
3

Widget-Element einsetzen

Platziere das Custom-Element irgendwo im <body>. Es rendert nichts Sichtbares, bis es geöffnet wird:
<ai-knowledger-search
  token="wt_dein_token"
  api-url="https://app.panderra.ai"
  trigger="#shop-suche"
  popular-terms="Vergaser, Auspuff, Zündkerze"
  accent="#476247"
></ai-knowledger-search>
4

Trigger verbinden

trigger nimmt einen oder mehrere CSS-Selektoren (komma-getrennt). Ein Klick oder Fokus auf ein passendes Element öffnet das Overlay — typischerweise dein vorhandenes Suchfeld:
<input id="shop-suche" type="search" placeholder="Suchen…" />
Ohne trigger öffnest du das Widget programmatisch über window.Panderra.openSearch().

​
Attribute

​
token
string
required
Widget-Token (wt_…) aus dem Admin-UI. Bindet das Widget an deinen Tenant.
​
api-url
string
required
Basis-URL deiner Panderra-Instanz, z. B. https://app.panderra.ai.
​
trigger
string
CSS-Selektor(en), die das Overlay öffnen. Mehrere komma-getrennt (#suche, .header-search).
​
accent
string
Marken-Akzentfarbe als Hex (#476247). Alle abgeleiteten Töne (Hover, Schatten, Tints) folgen automatisch. Ohne Angabe nutzt das Widget einen neutralen Default.
​
popular-terms
string
Komma-getrennte Begriffe, die als anklickbare Vorschläge erscheinen, solange das Suchfeld leer ist.
​
placeholder
string
Platzhalter-Text im Suchfeld.
​
session-id
string
Optionale Host-Session-ID (z. B. die Shop-Session). Gruppiert Suchanfragen derselben Sitzung in der Statistik. Ohne Angabe vergibt das Widget eine eigene, tab-lokale ID.
​
advisor-enabled
string
"true" / "false" — blendet den „Berater fragen”-Button (KI-Chat) ein oder aus. Default: an.
​
show-scores
string
"true" / "false" — zeigt pro Treffer einen Relevanz-Score. Nützlich beim Onboarding und Tuning, für Endkunden eher aus. Default: aus.

​
Feintuning (optional)

Diese Attribute haben sinnvolle Defaults und müssen selten gesetzt werden:
AttributDefaultWirkung
debounce-suggest-ms150Verzögerung bis Vorschläge erscheinen (ab 2 Zeichen)
debounce-search-ms300Verzögerung bis die Auto-Suche feuert (ab 3 Zeichen)
vielleicht-initial3Anzahl initial sichtbarer „Vielleicht”-Treffer
vielleicht-step5Nachladeschritt für „Vielleicht”-Treffer
pin-max-count10Maximal anheftbare Artikel
empty-state-message—Eigener Text, wenn nichts gefunden wurde
site-id—Site-Kontext für Multi-Site-Tenants

​
Weiter

Widget steuern und Events

Das Overlay per JavaScript öffnen, auf ungelesene Nachrichten reagieren und Conversions zurückmelden.