Interaktion zwischen Webseite und Chat-Widget erweitern
Webseiten-Anfragen direkt an das Chat-Widget übergeben, um kontextbezogene Unterhaltungen zu starten
Um Nutzer:innen auf der Webseite gezielt bei ihrem Anliegen abzuholen, kann das Chat-Widget direkt mit vordefinierten Informationen starten. Eingaben in Suchfelder, die Auswahl von Buttons oder Formularanfragen auf der Webseite werden als Kontext an den KI-Chatbot übergeben. Auf diese Weise beginnt die Unterhaltung im Widget nahtlos mit dem entsprechendem Thema. Das spart Zeit und gestaltet den Gesprächsverlauf für Nutzer:innen deutlich effizienter.
1. Vorbereitung im Hub
Bevor die Übergabe auf der Webseite eingerichtet werden kann, müssen die entsprechenden Ziele im Hub definiert sein:
- Intents: Zu Intents gehören Themen und Agenten, die beim Start des Widgets ausgelöst werden sollen. Diese müssen im Hub vorab angelegt und veröffentlicht sein. Wie Themen definiert und angelegt werden, ist in diesem Artikel beschrieben. Informationen zum Anlegen von KI-Agenten sind in diesem Artikel beschrieben.
- Formulare: Falls ein Formular gestartet werden soll, muss dieses im Hub unter dem Menüpunkt Formulare erstellt und der technische Name (ID) notiert sein. Was Formulare sind und wie sie erstellt werden, ist in diesem Artikel beschrieben.
Der technische Name des Intents oder Formulars ist das wichtigste Element für die Übergabe. Er muss exakt so kopiert werden, wie er im Hub hinterlegt ist. Der technische Name lässt sich im Hub beim öffnen des redaktionellen Themas oder des Formulars in der URL ablesen.
Formular: Alles was sich zwischen dem zweiten Schrägstrich "/" und "?" (dem Fragezeichen) befindet.

Thema: Alles was sich zwischen dem zweiten Schrägstrich "/" und "?" (dem Fragezeichen) befindet.

2. Technische Umsetzung auf der Webseite
Für die Anbindung ist eine kurze Code-Anpassung auf der Webseite erforderlich. Folgenden Informationen sind an die technische Abteilung oder die verantwortliche Person für die Webseiten-Betreuung weiterzuleiten:
- Die Funktion: Es wird die
startWith()-Funktion der moinAI JavaScript-API verwendet. - Die Dokumentation: Eine detaillierte technische Beschreibung inklusive Code-Beispielen findet sich unter API-Dokumentation.
- Übergabe: Es können wahlweise Text (z. B. ein Suchbegriff), Formulare oder Intents übergeben werden.
3. Anwendungsbeispiele
- Suchleiste: Nutzer:innen geben einen Begriff in die Suche der Webseite ein. Beim Absenden öffnet sich das Chat-Widget und der KI-Chatbot beantwortet direkt die passende Frage zum Suchbegriff.
- Angebot-Button: Über einen Button "Angebot anfordern" auf der Webseite wird das Chat-Widget direkt geöffnet und das entsprechende Kontaktformular geladen, ohne dass Nutzer:innen manuell nach dem Formular suchen müssen.
Live-Demo
Du möchtest sehen, wie sich die Übergabe für deine Nutzer:innen anfühlt?
Klicke auf den folgenden Link, um das Chat-Widget zu öffnen. Durch den Klick wird die Funktion moinAI.startWith({ form: 'faq_support__bernahme' }) aufgerufen und startet direkt unser Support-Intent im Widget, ohne dass du den Chat manuell navigieren musst:
🚀 Live-Demo: Formular direkt im Chat öffnen
Hinweis für die Einrichtung: In diesem Beispiel übergibt der Button die technische Formular-ID faq_support__bernahme. Dieselbe Logik kann für beliebige Buttons, Link-Klicks oder Interaktionen auf der eigenen Webseite genutzt werden.