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.
- Informationen abrufen: Ein Klick auf ein Element wie "Kontakt aufnehmen" auf der Webseite öffnet unmittelbar das Chat-Widget und startet das redaktionelle Thema für Kontaktinformationen, sodass Nutzer:innen die benötigten Auskünfte direkt im Chat erhalten.
4. Live-Demo
Um zu testen, wie sich die Übergabe eines Kontextes für Nutzer:innen auf der Webseite anfühlt, steht eine interaktive Demonstration zur Verfügung.
🚀 Live-Demo: Formular oder Thema direkt im Chat öffnen
Beim Klick auf den Demo-Link öffnet sich das Chat-Widget direkt über die startWith()-Funktion. Anstelle der allgemeinen Begrüßung startet das Widget sofort mit dem hinterlegten redaktionellen Thema oder Formular und spielt folgende Nachricht im Chat aus:
"Hi, das hier ist ein redaktionelles Thema, welches du mit einem Klick auf den Link ausgelöst hast. Mit der startWith() Funktion öffnet sich das Chat-Widget und beginnt statt mit einer Begrüßung mit dem hinterlegten Formular oder Thema. Ich könnte mit Dir nun spezifische/relevante Informationen teilen oder ein Formular zur Abfrage deines spezifischen Anliegens starten. Anschließend schlage ich weitere Themen vor und stehe für Folgefragen zur Verfügung.
Hast du weitere Fragen zu diesem Thema oder benötigst du Hilfe bei der eigenen Einrichtung?"
Im Anschluss werden Nutzer:innen beispielhaft folgende Antwortoptionen (Multiple-Choice) angeboten:
-
Hilfe bei der Einrichtung: Ermöglicht die Übermittlung des Anliegens per E-Mail, Ticket oder direkt im Chat zur Bearbeitung durch das Customer Success Team.
-
Frage zur Interaktion zwischen Webseite und Chat-Widget stellen: Übergibt die Konversation an den spezialisierten KI-Agenten für Widgets & Kanäle, um gezielte Fachfragen zu beantworten.
🚀 Live-Demo: Formular oder Thema direkt im Chat öffnen