Tutorial: Interaktion mit der Host-Webseite

Sie können benutzerdefinierte Antworten und Ereignisse verwenden, damit der Webchat mit der Webseite, auf der er angezeigt wird, interagieren kann.

Kunden könnten Ihren Assistenten zum Beispiel nutzen, um Informationen zu finden, die sie zum Ausfüllen eines Formulars benötigen. Anstatt zu erwarten, dass der Kunde diese Informationen manuell in das Formular kopiert, können Sie den Webchat die Informationen automatisch ausfüllen lassen.

Eine vollständige, funktionierende Version des Beispiels in diesem Tutorial finden Sie unter Seiteninteraktionen für den Webchat des KI-Assistenten.

In diesem Beispiel wird eine benutzerdefinierte Antwort verwendet, um eine Schaltfläche im Web-Chat darzustellen, die ein Formularfeld mit der Kontonummer des Kunden ausfüllt:

1. Erstellen Sie einen Handler für das Ereignis " customResponse. Dieser Handler rendert eine benutzerdefinierte Schaltfläche und erstellt einen Click-Handler für sie. Der Click-Handler verwendet die Methode " Document.querySelector(), um mit dem DOM zu interagieren und ein Formularfeld mit der Kontonummer des Kunden zu füllen.

   In diesem Beispiel wird die fest codierte Kontonummer " 1234567 verwendet. In einem typischen Produktionsassistenten würde Ihr Assistent diesen Wert aus einer Sitzungsvariablen abrufen oder ihn von einem externen System abfragen.

   function customResponseHandler(event) {
     const { element } = event.data;
   
     const button = document.createElement('button');
     button.type = 'button';
     button.innerHTML = 'Enter account number';
     button.addEventListener('click', () => {
       // Look for the account number element in the document, and enter the account number.
       document.querySelector('#account-number').value = '1234567';
     });
   
     element.appendChild(button);
   }
   

2. Verwenden Sie in Ihrem ' onLoad die ' on() -Instanzmethode, um das ' customResponse zu abonnieren, und registrieren Sie den Handler als Callback. Dadurch kann der Assistent eine benutzerdefinierte Antwort senden, die die Schaltfläche zum Ausfüllen der Kontonummer anzeigt.

   instance.on({
     type: 'customResponse',
     handler: (event, instance) => {
       const { message } = event.data;
       if (message.user_defined && 
           message.user_defined.user_defined_type === 'fill_account_number') {
             accountNumberResponseHandler(event, instance);
           }
     },
   });
   

   In diesem Beispiel wird die benutzerdefinierte Eigenschaft " user_defined_type der benutzerdefinierten Antwort geprüft und die Funktion " accountNumberResponseHandler() nur aufgerufen, wenn der angegebene Typ " fill_account_number ist. Dies ist eine optionale Prüfung, die zeigt, wie Sie eine benutzerdefinierte Eigenschaft verwenden können, um mehrere verschiedene benutzerdefinierte Antworten zu definieren (jede mit einem anderen Wert für " user_defined_type).

Den vollständigen Arbeitscode finden Sie im Beispiel für den Web-Chat des KI-Assistenten.