Widgets

Widgets ermöglichen es, einen Agent als Chat-Komponente in externe Websites oder Anwendungen einzubetten. So können Unternehmen z. B. einen KI-gestützten Helpdesk auf der eigenen Website oder in einem Kundenportal bereitstellen.

Jedes Widget ist mit einem Agent oder einer Agent Gruppe verknüpft und kann individuell konfiguriert werden — von der Chat-Darstellung über die Funktionalität bis hin zu Farben und Avatar. Pro Workspace können mehrere Widgets erstellt werden.

Widget erstellen

Beim Erstellen eines Widgets wird konfiguriert:

• Name: Interner Name zur Identifikation des Widgets.
• Beschreibung: Kurze Erklärung zum Einsatzzweck des Widgets.
• Agent oder Agent Gruppe: Der Agent bzw. die Agent Gruppe, die das Widget antreibt. Bei einem einzelnen Agent wird die jeweils aktive Version verwendet. Bei einer Agent Gruppe können Benutzer im Widget zwischen den Agents der Gruppe wechseln.

Chat-Einstellungen

Die Chat-Einstellungen bestimmen, welche Funktionen im Widget verfügbar sind:

• Chat Header: Zeigt den Header mit Icon, Anzeigename und einer Schaltfläche zum Neuladen der Konversation.
• Anzeigename: Der Name, der Benutzern im Widget-Header angezeigt wird.
• Verlauf anzeigen: Zeigt die bisherige Chat-Historie an. Wenn deaktiviert, startet jeder Chat ohne sichtbaren Verlauf. Im Gegensatz zu „Meine Chats" (Backend) wird im externen Widget keine persönliche, dauerhafte Historie geführt.
• Disclaimer anzeigen: Zeigt einen Haftungsausschluss beim ersten Öffnen des Chats.
• Feedback aktivieren: Zeigt Daumen-hoch/runter-Buttons zur Bewertung von Antworten.
• Temporärer Chat: Ermöglicht einen Button für temporäre Chats im Widget. Ist der temporäre Modus aktiv, werden Konversationen nicht dauerhaft auf dem Server gespeichert und temporäre Dateien automatisch gelöscht.
• Node Updates aktivieren: Zeigt Echtzeit-Updates während der Agent längere Anfragen verarbeitet.

Standalone-Modus

• Als eigenständiges Widget verwenden: Bestimmt, ob der Chat als Popup-Widget (mit abgerundeten Ecken und Schatten) oder als eingebettete Vollansicht (ohne Rahmen, fügt sich in die umgebende Seite ein) dargestellt wird.

Theming

Jedes Widget kann visuell an das eigene Branding angepasst werden.

Primärfarben

• Main: Die Hauptfarbe des Widgets (z. B. Buttons, Hervorhebungen).
• Light: Helle Variante der Hauptfarbe.
• Dark: Dunkle Variante der Hauptfarbe.
• Kontrasttext: Textfarbe auf farbigen Hintergründen.
• Senden-Icon: Farbe des Senden-Buttons.

Avatar

• Avatar-Hintergrund: Hintergrundfarbe des Avatars.
• Avatar-Bild: Ein eigenes SVG-Icon, das den Standard-Avatar ersetzt.

Integration

Um ein Widget in eine Website einzubetten, wird ein HTML-Snippet bereitgestellt, das in die Seite integriert werden muss:

<ai-hub-chat language="de" height="690" width="570" integration-location="#IHR_STANDORT" api-key="#IHR_API_KEY" widget-id="[WIDGET_ID]" />
<script src="[SCRIPT_URL]" defer></script>

Das Snippet kann direkt aus der Widget-Übersicht in die Zwischenablage kopiert werden.

Attribute

Attribut	Beschreibung
widget-id	Die ID des Widgets (wird automatisch eingesetzt)
api-key	Der API-Schlüssel für die Authentifizierung
integration-location	Ein frei wählbarer Bezeichner, der in den Chat-Protokollen anzeigt, wo das Widget eingebettet ist (z. B. „Homepage", „Support-Seite")
language	Sprachcode für die Oberfläche (z. B. de, en)
height	Höhe des Widgets in Pixeln
width	Breite des Widgets in Pixeln

warnung

Für die Integration wird ein API-Schlüssel vom Typ Agent benötigt. Bei öffentlichen Widgets sollte ein öffentlicher Schlüssel mit konfigurierten erlaubten Domains verwendet werden.

Storybook & Code-Snippets

Zusätzlich zum Embed-Code-Snippet stehen direkt in den Widget-Einstellungen eine Storybook-Anleitung und Code-Snippets zur Verfügung. Diese zeigen Beispiele für die Einbindung in unterschiedlichen Umgebungen (z. B. frameworkspezifisch).

Vorschau

Über die Widget-Vorschau können alle erstellten Widgets live getestet werden, ohne sie in eine externe Website einbetten zu müssen. Wählen Sie ein Widget aus dem Dropdown, um die Vorschau zu laden.