Benutzerdefinierter Datumswähler im Chatbot

Benutzerdefinierter Datumswähler im Chatbot


Einführung

Mit der Kiko-Software können Sie einen Chatbot erstellen, der Ihre Online-Formulare ersetzt - https://www.kiko.bot/ 

Sie können das Verhalten des Formulardialogs selbst definieren, indem Sie einen externen Subbot und Webservice verwenden. 
Sie können dabei Ihre eigenen Datentypen und Steuerelemente im Webchat verwenden.
In dieser Anleitung lernen Sie ein Beispiel für einen Formulardialog mit einem benutzerdefinierten Datumspicker kennen.

Chatbot mit Datums-Wähler

Der Beispielcode basiert auf Nodejs und nutzt eine Firestore-Datenbank von Google zur Zwischenspeicherung der Formulardaten. 
Für den Datums-Wähler wurde im Beispiel der VanillaJS-Datepicker genutzt.
Der hier beschriebene Webservice kann z. B. bei Google Cloud Run gehostet werden.
Sie können das Lernprogramm online mit Google Cloud Run ausprobieren. Open in Cloud Shell

Den hier beschriebenen Code finden Sie auf Github unter https://github.com/kiko-software/kiko-datepicker-guide

Für einen Formulardialog in Kiko Webchat mit eigenem Datumspicker werden Einstellungen an drei Stellen vorgenommen:
- Webseite
- Chatbot
- Webservice zur Formularsteuerung

Beispiel-Webseite

Der Kiko Webchat wird auf einer eigenen Seite mit einem Code-Snippet eingebunden. 
Zusätzlich ist die externe Datepicker-Bibliothek im Header zu laden. 
Ein weiteres Code-Snippet am Ende der Seite wird zur Überwachung der eingehenden Chatbot-Nachrichten und Ausgabe der des Datepickers benötigt.

Kiko-Chatbot

Ein Chatbot wird im Kiko CMS erstellt und als Widget auf der eigenen Webseite eingebunden. Benutzer werden dort vom Chatbot begrüßt und können auf den Intent mit dem Formulardialog weitergeleitet werden. 
In diesem Intent werden alle Formularfelder sowie eine Vorlage für den finalen Antworttext definiert.
Auch hier werden die Benutzereingaben an die Webservices eines externen Subbots weitergeleitet, der die individuelle Ablaufsteuerung des Formulardialogs übernimmt. 
Wenn der externe Subbot alle benötigten Daten gesammelt und zur Verarbeitung geschickt hat, gibt er die Kontrolle an den Chatbot zurück.

Webservice des externen Subbots

Aufgabe des Webservice ist es, dem Benutzer sukzessive die Fragen zu stellen, die zum Ausfüllen eines Formulars notwendig sind. 
Die Formularantworten des Benutzers sollen so lange gespeichert werden, bis der Formulardialog abgeschlossen ist.
Wenn ein Formularfeld vom Typ Datum ist, soll die Anzeige des Datumspickers ausgelöst werden. 
Am Ende des Formulardialogs sollen alle gesammelten Daten an einen anderen Webservice oder an einen Mitarbeiter zur späteren Beantwortung übergeben werden. Es ist aber auch möglich, dass mit diesen Daten bereits die endgültige Antwort für den Benutzer berechnet wird.

Blick auf den Code

public/index.html

Der Kiko Webchat wird auf einer eigenen Seite mit einem Code-Snippet eingebunden. Die Konstante  "kikoBotIdentifier" ist individuell anzupassen (siehe "Bot Liste" / "Metabot" / "Bot bearbeiten" / "Identifier")
  1.   <script async>
  2.       const dateElementId = 'mydatepicker'
  3.       const kikoCmsDomain = "cloud02-7c83ec0.prod.1000grad.de";
  4.       const kikoBotIdentifier = "6d5abc25-6110-31fa-87a2-77cd2422c3d5";
  5.       const script = document.createElement('script');
  6.       script.src = '//' + kikoCmsDomain + '/chat/assets/js/main.js';
  7.       script.id = 'tgd-chat-script';
  8.       script.onload = async function () {
  9.         window.$chatbot = new TGDChatBot({ identifier: kikoBotIdentifier });
  10.         await window.$chatbot.startApp();
  11.       };
  12.       document.getElementsByTagName('body')[0].appendChild(script);
  13.     </script>
Ein weiteres Code-Snippet am Ende der Seite wird zur Überwachung aller eingehenden Chatbot-Nachrichten benötigt. Der Datepicker wird angezeigt, wenn ein Datepicker-HTML-Element in einer Formular-Dialognachricht gefunden wird. Nach der Änderung des Datums wird das Ergebnis als Nutzereingabe an den Chatbot gesendet.
  1.         const parser = new DOMParser()
  2.         window.$chatbot.on('messageReceived', (event) => {
  3.           event.detail.forEach((message) => {
  4.             if (message.data.type === 'text/html' && message.data.hasOwnProperty('content')) {
  5.               const htmlDoc = parser.parseFromString(message.data.content, 'text/html');
  6.               if (htmlDoc.getElementById(dateElementId)) {
  7.                 const elem = document.getElementById(dateElementId);
  8.                 const datepicker = new Datepicker(elem,{ language: 'de' });
  9.                 elem.addEventListener('changeDate', e => {
  10.                   window.$chatbot.sendAsUser({ text: Datepicker.formatDate(e.detail.date, 'dd.mm.yyyy', 'de') });
  11.                 });              
  12.               }
  13.             }
  14.           });
  15.         });

Die drei Code-Schnipsel aus der Beispielseite können auf jeder Webseite integriert werden, die einen Chatbot mit individuellem Datumswähler benötigen. 

Nun folgen einige Erläuterungen zur Verarbeitung der Nutzeranfrage im Webservice.

src/index.js

Zu Beginn wird der Webserver initialisiert.
Die Route "/v1/webhook-message-sent" führt zur Verarbeitung der Nutzernachrichten. Sie ist die Zieladresse für den Webhook des Subbots (Nutzer-Nachricht empfangen).

src/functions.js

Sobald der Formular-Intent im Chatbot erkannt wurde, werden alle weiteren Benutzernachrichten an den Subbot und die Funktion "postWebhookMessageSent" gesendet.

postWebhookMessageSent

Diese Funktion nimmt den Request entgegen, ermittelt die Daten des Servers und leitet die Nachrichten weiter an die Dialog-Funktion.
  1.   const { conversationId, messages } = req.body
  2.   const referer = req.get('referer') || req.query.referer
  3.   if (!referer) throw createError(400, 'Missing referer.')
  4.   const endpointBaseUrl = referer.replace(/\/\//g, 'https://')
  5.   await runDatePickerDialog({ endpointBaseUrl, conversationId, messages })

runDatePickerDialog

In dieser Funktion werden die Formular-Felder bzw. -Parameter durchlaufen, welche in den Metadaten des Intents definiert sind.

  1.   const lastParameterPos = formSessionData ? formSessionData.lastParameterPos : null
  2.   const lastParameter = lastParameterPos !== null ? metadata.parameters[lastParameterPos] : null
  3.   if (lastParameter) {
  4.     // save form parameter input data if necessary
  5.     const fieldInputContent = messages[0].data ? messages[0].data.content : undefined
  6.     newFormSessionData.content = newFormSessionData.content || {}
  7.     newFormSessionData.content[lastParameter.name] = fieldInputContent
  8.   }
  9.   const pos = (lastParameterPos === null ? 0 : lastParameterPos + 1)
  10.   const parameter = metadata.parameters[pos] ? metadata.parameters[pos] : null
Je Datentyp kann eine individuelle Funktion zur Ausgabe der Formularfrage aufgerufen werden.
  1.     const typeToFunctionMapping = {
  2.       '@sys.any': getAnyQuestionMessages,
  3.       '@sys.date': getDateQuestionMessages
  4.     }
  5.     const myFunction = typeToFunctionMapping[parameter.dataType] || getAnyQuestionMessages
  6.     const questionMessages = await myFunction.call(this, parameter)
  7.     await kikoBotService.sendMessage(questionMessages, false)
  8.       .catch((err) => { throw createError(500, 'sendMessage: ' + err.message) })
Nachdem die Formulardaten in der Variable "newFormSessionData.content" gesammelt wurden, können sie an einen anderen Webdienst oder an eine E-Mail-Adresse zur Verarbeitung weitergeleitet werden. (Im Beispiel nicht enthalten.)
  1.     const outputMessages = metadata.intent.output
  2.     // form session ends here - remove session data
  3.     await kikoFormSession.removeData(conversationId)
  4.     // send the form content to somewhere
  5.     // ... newFormSessionData.content
Als Antwort erhält der Benutzer nun den im Intent hinterlegten Ergebnistext aus "metadata.intent.output".
  1.     await kikoBotService.sendMessage(outputMessages, true).catch((err) => { throw createError(500, 'sendMessage: ' + err.message) })

getDateQuestionMessages

Die Funktion für das Datums-Format generiert eine zusätzliche Nachricht an den Webchat mit einem HTML-DIV-Element mit der ID 'mydatepicker'. Weiterhin kann das voreingestellte Datum übergeben werden.
  1. const dateElementId = 'mydatepicker'
  2.   const selectedDate = '14.2.2021'
  3.   return [
  4.     {
  5.       type: 'message',
  6.       data: {
  7.         content: parameter.question,
  8.         type: 'text/plain'
  9.       }
  10.     },
  11.     {
  12.       type: 'message',
  13.       data: {
  14.         content: `
  15.         <div id="${dateElementId}" data-date="${selectedDate}"></div>            
  16.         `,
  17.         type: 'text/html'
  18.       }
  19.     }
  20.   ]

Livestellung

Verwenden Sie für die Livestellung die Cloud Code Cloud-Run-Erweiterung Ihres Code-Editors.
- Klicken Sie in der Fußzeile des Editors auf "Cloud Code".
- Klicken Sie auf "Deploy to Cloud Run".
Deployment zu Google Cloud Run
- Wählen Sie Ihre bevorzugte Region und klicken Sie auf "Deploy".
- Verwenden Sie die Ergebnis-URL, d. h.: URL: https://kiko-datepicker-guide-....a.run.app/ als Basis für Ihre externe Subbot-Webdienst-Endpunkt-URL.

Kiko Chatbot

Erstellen Sie Ihr eigenes Kiko CMS-Konto: https://www.kiko.bot/kostenlos-registrieren-chatbot-cms/
Erstellen Sie im CMS über das Menü "Botlist" einen externen Subbot mit dem Namen "subbot-datepicker". 
Tragen Sie im Subbot über den Untermenüpunkt "Webhooks bearbeiten" im Feld "Nachricht empfangen" die URL des veröffentlichten Webservices ein.
Legen Sie über das Menü "Inhalt" im "Metabot" einen Intent mit dem Namen "Datepicker-Formular-Dialog" an und geben Sie als Weiterleitung des Subbots "subbot-datepicker" ein.
Tragen Sie in "Inhalt" unter "Ergebnis" den Textwert "Formular gesendet." ein.

Intent mit Antworttext
Legen Sie zur Erkennung den Entitätstyp "topic" mit dem Entitätswert "Formular" an.
Geben Sie in "Ablaufsteuerung" unter "Metadaten für externen Subbot" den folgenden Wert ein
  1. {       
  2.       "action":"date-picker-dialog",       
  3.       "parameters": [                  
  4.              {
  5.                   "name": "date-field-01",
  6.                   "question": "Wie lautet das Datum",
  7.                   "dataType": "@sys.date"
  8.             },
  9.             {
  10.                   "name": "text-field-02",
  11.                   "question": "Wie lautet der Titel 02",
  12.                   "dataType": "@sys.any"
  13.             }
  14.       ]
  15. }
Lassen Sie das Feld "Abfrageparameter" deaktiviert.

Konfiguration der Formularfelder
Veröffentlichen Sie alle Bots im Menü "Bot Liste".

Test

Für den Test benötigen Sie die oben erwähnte Beispielseite mit der enthaltenen Bibliothek für den Datepicker
Die Konstante  "kikoBotIdentifier" ist in der index.html individuell anzupassen (siehe "Bot Liste" / "Metabot" / "Bot bearbeiten" / "Identifier")
Führen Sie nach dieser Anpassung die Livestellung Ihres Webservice (erneut) aus, damit die letzte Anpassung der Datei index.html wirksam wird.
Rufen Sie diese Webseite nun auf.
Im Chat unten rechts sollte nach Eingabe des Wortes "Formular" der Formular-Dialog erscheinen mit dem Datepicker.
Mit Klick auf ein Datum wird das Datum automatisch in die Texteingabe übernommen und abgesendet.
Die Dialogsteuerung stellt daraufhin die nächste Frage. Am Ende erscheint die Meldung "Formular gesendet."
Chatbot mit Datums-Wähler
Den Code für diese Beispiel finden Sie auf Github: https://github.com/kiko-software/kiko-datepicker-guide/ 

    • Related Articles

    • Chatbot Design - Tutorial für Grafiker

      Dieses Tutorial soll Grafiker bei der Erstellung eines individuellen Chatbot-Designs unterstützen. Sie lernen den Webchat Konfigurator näher kennen und erfahren hilfreiche Tipps zur Anpassung an das gewünschte Corporate Design.  Abschnitt 1 - Planung ...

    • Chatbot Vorlagen

      Hier werden Ihnen Vorlagen aus dem CMS vorgestellt. Diese können unter “Start” und “Vorlagen” in Ihr Konto importiert werden. 1. Hilfestellung zur Nutzung Um Ihnen das Erstellen von Chatbots zu erleichtern, bieten wir Vorlagen für den leichten ...

    • Einführung Chatbot-Plattform

      Mit der Chatbot-Plattform Kiko können Sie sich einen eigenen Chatbot mit einem CMS entwickeln. Diesen Chatbot können Sie in die eigene Website oder in andere Kommunikationskanäle integrieren und Ihren Nutzern zur Verfügung stellen. Die Inhalte und ...

    • Telefon-Chatbot einrichten (Phonebot)

      Jeder kennt die Sprachdialogsysteme herkömmlicher Telefonanlagen (auch TK-Anlage), welche den Anrufer zum Ansprechpartner für ein bestimmtes Thema leiten oder einen hinterlegten Ansagetext abspielen. Diese sogenannten IVRs (=Interactive Voice ...

    • FAQ - Chatbot erstellen und verbessern

      Wie kann die Spracherkennung mit der Zeit verbessert werden? Eine unerkannte Nutzer-Anfrage kann zur Erweiterung der Schlagwort-Liste einer bestehenden Absicht verwendet werden. Je umfangreicher die Synonym-Liste ist, um so besser funktioniert die ...