Such-Widget einbinden

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

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.

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>

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>

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

string

required

Widget-Token (wt_…) aus dem Admin-UI. Bindet das Widget an deinen Tenant.

string

required

Basis-URL deiner Panderra-Instanz, z. B. https://app.panderra.ai.

string

CSS-Selektor(en), die das Overlay öffnen. Mehrere komma-getrennt (#suche, .header-search).

string

Marken-Akzentfarbe als Hex (#476247). Alle abgeleiteten Töne (Hover, Schatten, Tints) folgen automatisch. Ohne Angabe nutzt das Widget einen neutralen Default.

string

Komma-getrennte Begriffe, die als anklickbare Vorschläge erscheinen, solange das Suchfeld leer ist.

string

Platzhalter-Text im Suchfeld.

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.

string

"true" / "false" — blendet den „Berater fragen”-Button (KI-Chat) ein oder aus. Default: an.

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:

Attribut	Default	Wirkung
`debounce-suggest-ms`	`150`	Verzögerung bis Vorschläge erscheinen (ab 2 Zeichen)
`debounce-search-ms`	`300`	Verzögerung bis die Auto-Suche feuert (ab 3 Zeichen)
`vielleicht-initial`	`3`	Anzahl initial sichtbarer „Vielleicht”-Treffer
`vielleicht-step`	`5`	Nachladeschritt für „Vielleicht”-Treffer
`pin-max-count`	`10`	Maximal 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.

Get Started

Tutorials

Widget

API Reference

Such-Widget einbinden

Voraussetzungen

Schnellstart

Attribute

Feintuning (optional)

Weiter

Widget steuern und Events

​Voraussetzungen

​Schnellstart

​Attribute

​Feintuning (optional)

​Weiter

Widget steuern und Events

Voraussetzungen

Schnellstart

Attribute

Feintuning (optional)

Weiter