> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dreizack-medien.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Widgets

> Suchwidget und Berater-Chat pro Shopsprache konfigurieren

## Allgemeine Einstellungen

Gilt für das gesamte Embed, unabhängig davon, ob Suche, Chat oder beides aktiv ist.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/HXyitjfAiy0u1yWt/images/panderra-ai-widgets-allgemeine-einstellungen.png?fit=max&auto=format&n=HXyitjfAiy0u1yWt&q=85&s=d2e534f8d4e2a046b8ad3bd6a4f1c3f4" alt="Allgemeine Einstellungen" width="2020" height="680" data-path="images/panderra-ai-widgets-allgemeine-einstellungen.png" />
  </Frame>
</div>

<ParamField path="Widget im Footer ausspielen" type="boolean">
  Master-Schalter. Ohne Aktivierung wird kein Snippet injiziert.
</ParamField>

<ParamField path="Panderra-Origin" type="string" placeholder="https://dzm.app.panderra.ai">
  Vollständige URL inkl. Tenant. Lädt das widget.js-Bundle (auch im reinen Chat-Betrieb) und dient der Suche als `api-url`-Attribut.
</ParamField>

<ParamField path="Auflösung" type="string">
  So wird das Script eingebunden. Die Sprache entscheidet, in welcher Sprache Panderra die Widget-Texte ausliefert: `https://dzm.app.panderra.ai/widget.js?lang=<Sprache des Widgets>&v=1.3.0`
</ParamField>

<ParamField path="Akzentfarbe" type="string" placeholder="#3d6b4c">
  Wird als `accent`-Attribut ausgegeben (Hex).
</ParamField>

<ParamField path="Trigger" type="string" placeholder="Selektor + Enter (z. B. #search)">
  CSS-Selektoren, die das Such-Overlay öffnen, nur Such-Auslöser. Der Floating-Chat-Button gehört hier NICHT hinein, er öffnet den Berater-Chat direkt. Mehrere Werte werden kommagetrennt zusammengeführt.
</ParamField>

## Suche

Produktsuche gegen Panderra AI. Sprach-spezifische Werte (Site-ID, populäre Begriffe, Placeholder, Empty-State) liegen bei den Sprach-Widgets unten.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/HXyitjfAiy0u1yWt/images/panderra-ai-widgets-suche.png?fit=max&auto=format&n=HXyitjfAiy0u1yWt&q=85&s=247e9306bbad924b7b1b071477a65f79" alt="Suche" width="2022" height="1259" data-path="images/panderra-ai-widgets-suche.png" />
  </Frame>
</div>

<ParamField path="Suche aktiv" type="boolean">
  Spielt das Such-Overlay aus. Ist nur der Chat aktiv, wird das Embed im chat-only-Modus geladen (ohne Suche).
</ParamField>

<ParamField path="Widget-Token" type="string">
  Wird im Frontend-DOM ausgegeben (`token`-Attribut) und ist daher öffentlich sichtbar.
</ParamField>

<ParamField path="Darstellung der Trefferliste" type="select" default="Standard (Einstellung im Panderra-Tenant)">
  Getrennt zeigt die Trefferklassen als eigene Abschnitte, durchgehend als eine fortlaufende Liste. "Standard" lässt die Einstellung des Panderra-Tenants gelten, das Attribut wird dann nicht ausgegeben.
</ParamField>

<ParamField path="Score anzeigen (show-scores)" type="boolean">
  Zeigt den Trefferscore in der Trefferliste an.
</ParamField>

<ParamField path="Suchsessions zusammenfassen" type="boolean">
  Bei Aktivierung wird das `session-id`-Attribut mit dem JTL-Session-Token belegt, sodass mehrere Suchen einer Sitzung zusammengefasst werden.
</ParamField>

<ParamField path="Enter öffnet JTL-Suchergebnisseite" type="boolean">
  Bei Bestätigung mit Enter im Widget wird die native JTL-Suchergebnisseite mit genau den Panderra-Treffern (in deren Reihenfolge) geöffnet, inklusive Sidebar-Filter, Sortierung und Pagination.

  <Note>
    Voraussetzung: Standard-Such-Sortierung = "Suchrelevanz".
  </Note>
</ParamField>

<ParamField path="debounce-suggest-ms" type="number" placeholder="300 ms">
  Verzögerung bei Suchvorschlägen. Standard 150, maximal 2000.
</ParamField>

<ParamField path="debounce-search-ms" type="number" placeholder="500 ms">
  Verzögerung bei der Suche. Standard 300, maximal 2000.
</ParamField>

<ParamField path="vielleicht-initial" type="number" placeholder="3">
  Anzahl initialer Vielleicht-Treffer. Standard 3.
</ParamField>

<ParamField path="vielleicht-step" type="number" placeholder="5">
  Schrittweite beim Nachladen. Standard 5.
</ParamField>

<ParamField path="pin-max-count" type="number" placeholder="10">
  Maximal angepinnte Treffer. Standard 10.
</ParamField>

## CRM-Chat

Berater-Chat, der im CRM-Posteingang landet, die KI antwortet, ein Mitarbeiter kann übernehmen. Voraussetzung im CRM: einen Chat-Kanal anlegen (liefert den `wch_`-Token) und die Shop-Domain in der Website-Freigabe (CORS) eintragen, sonst blockt der Browser die Aufrufe.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/HXyitjfAiy0u1yWt/images/panderra-ai-widgets-crm-chat.png?fit=max&auto=format&n=HXyitjfAiy0u1yWt&q=85&s=fd7006650921fd4737b8ed48ea29fde5" alt="CRM-Chat" width="2016" height="698" data-path="images/panderra-ai-widgets-crm-chat.png" />
  </Frame>
</div>

<ParamField path="Chat aktiv" type="boolean">
  Bietet den Berater-Chat im Widget an (`advisor-enabled`-Attribut). Ist die Suche deaktiviert, wird das Embed als chat-only ausgespielt.
</ParamField>

<ParamField path="CRM-URL" type="string" placeholder="https://dzm.crm.panderra.ai">
  CRM-Host des Tenants. Wird als `crm-url`-Attribut ausgegeben.
</ParamField>

<ParamField path="Chat-Kanal-Token" type="string">
  `wch_`-Token aus CRM → Integrationen → Chat-Kanäle. Wird im Frontend-DOM ausgegeben (`chat-channel-token`-Attribut) und ist daher öffentlich sichtbar.
</ParamField>

<ParamField path="Floating Chat-Button" type="boolean">
  Schwebender Button, der den Berater-Chat direkt öffnet. Ein Ungelesen-Indikator reagiert auf das Widget-Event `panderra:unread`.
</ParamField>

<ParamField path="Button-Position" type="select" default="Rechts">
  Auf welcher Seite der schwebende Button erscheint.

  **Optionen:** Links, Rechts
</ParamField>

## Sprach-Widgets

Pro Shop-Sprache ein Widget, ein Widget kann als Default markiert werden und greift dann für Sprachen ohne eigene Konfiguration.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/HXyitjfAiy0u1yWt/images/panderra-ai-widgets-sprach-widgets.png?fit=max&auto=format&n=HXyitjfAiy0u1yWt&q=85&s=cd1447736f18d25a2aff6eba73858da0" alt="Sprach-Widgets" width="2068" height="1142" data-path="images/panderra-ai-widgets-sprach-widgets.png" />
  </Frame>
</div>

Jede Karte zeigt Sprache, Feed, Site-ID und Status, mit den Aktionen **Als Default**, **Bearbeiten** und Löschen. Genau ein Widget kann als Default markiert sein.

### Neues Widget

Über **Neues Widget** öffnet sich ein Dialog mit drei Bereichen: Grunddaten, Site-Auswahl und Text-Overrides.

#### Grunddaten

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/HXyitjfAiy0u1yWt/images/panderra-ai-widgets-neues-widget-grunddaten.png?fit=max&auto=format&n=HXyitjfAiy0u1yWt&q=85&s=a7de93ba61e50d92ca6e357c1d6d0d19" alt="Grunddaten" width="2012" height="522" data-path="images/panderra-ai-widgets-neues-widget-grunddaten.png" />
  </Frame>
</div>

<ParamField path="Name" type="string" placeholder="z. B. Suche Deutsch">
  Anzeigename im Plugin-Backend.
</ParamField>

<ParamField path="Sprache" type="select">
  Shop-Sprache, für die dieses Widget ausgespielt wird.
</ParamField>

<ParamField path="Status" type="boolean">
  Inaktive Widgets werden nicht ausgespielt.
</ParamField>

<ParamField path="Default / Fallback" type="boolean">
  Wird ausgespielt, wenn für die aktuelle Shop-Sprache kein eigenes Widget existiert. Es kann nur ein Default geben, der bisherige wird beim Speichern automatisch zurückgesetzt.
</ParamField>

#### Site-Auswahl

Welche Big-Panda-Site dieses Widget durchsucht.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/HXyitjfAiy0u1yWt/images/panderra-ai-widgets-neues-widget-site-auswahl.png?fit=max&auto=format&n=HXyitjfAiy0u1yWt&q=85&s=afb2efc4d49b44dd566e87d5d2b11ad6" alt="Site-Auswahl" width="2006" height="384" data-path="images/panderra-ai-widgets-neues-widget-site-auswahl.png" />
  </Frame>
</div>

<ParamField path="Feed (optional)" type="select">
  Hilfsfeld: Site-ID aus einem konfigurierten Feed übernehmen. Beliebiger Feed unabhängig von Sprache, ein Feed kann auch von mehreren Widgets genutzt werden.
</ParamField>

<ParamField path="Site-ID" type="string" placeholder="UUID der Panderra-Site">
  UUID der Panderra-Site, alternativ über "Feed (optional)" auswählen.
</ParamField>

#### Text-Overrides (optional)

Diese Texte pflegt Panderra je Sprache. Was hier steht, überschreibt den Panderra-Text nur für diesen Shop, leer lassen heißt Panderra-Standard.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/HXyitjfAiy0u1yWt/images/panderra-ai-widgets-neues-widget-text-overrides.png?fit=max&auto=format&n=HXyitjfAiy0u1yWt&q=85&s=04272b231ff48e48a52c0896b47a180b" alt="Text-Overrides" width="2014" height="492" data-path="images/panderra-ai-widgets-neues-widget-text-overrides.png" />
  </Frame>
</div>

<ParamField path="Populäre Suchbegriffe" type="string">
  Überschreibt den Panderra-Text, leer = Panderra-Standard (Sprache und Text pflegt Panderra).
</ParamField>

<ParamField path="Placeholder" type="string" placeholder="leer = Panderra-Standard">
  Überschreibt den Panderra-Text, leer = Panderra-Standard (Sprache und Text pflegt Panderra).
</ParamField>

<ParamField path="Empty-State-Hinweis" type="string" placeholder="leer = Panderra-Standard">
  Überschreibt den Panderra-Text, leer = Panderra-Standard (Sprache und Text pflegt Panderra).
</ParamField>

<div style={{height: '1px', backgroundColor: 'silver', margin: '24px 0'}} />