Tutorial: Implementierung benutzerdefinierter Optionsschaltflächen im Webchat

Dieses Tutorial zeigt, wie Sie das Standard-Rendering einer Options-Antwort durch Ihre eigenen anklickbaren Schaltflächen ersetzen können.

Eine vollständige, funktionsfähige Version des in diesem Tutorial beschriebenen Beispiels finden Sie unter „Benutzerdefinierte Schaltflächen für den Web-Chat des KI-Assistenten “.

Standardmäßig zeigt der Web-Chat eine Optionsantwort immer als eine Reihe von anklickbaren Schaltflächen (für 4 oder weniger Optionen) oder als Dropdown-Liste (für 5 oder mehr Optionen) an. Dieses Beispiel zeigt das Standard-Rendering einer Optionsantwort mit 3 Optionen:

In diesem Tutorial werden wir diese Standarddarstellung durch größere, kartenähnliche Schaltflächen ersetzen:

Da die Darstellung einer Optionsantwort nicht geändert werden kann, werden wir dies tun, indem wir alle eingehenden Optionsantworten des Assistenten abfangen und sie in benutzerdefinierte (user_defined) Antworten umwandeln. Wir können dann ein benutzerdefiniertes Rendering für diese Antworten implementieren.

1. Erstelle einen Handler für das pre:receive Ereignis. In diesem Handler suchen Sie nach ' option in der Nutzlast der Nachricht und wandeln sie in ' user_defined um.

    function preReceiveHandler(event) {
      const message = event.data;
      if (message.output.generic) {
        message.output.generic.forEach(messageItem => {
          if (messageItem.response_type === 'option') {
            messageItem.response_type = 'user_defined';
          }
        })
      }
    }

1. Erstelle einen Handler für das customResponse Ereignis. Dieser Handler rendert die benutzerdefinierten Schaltflächen unter Verwendung eines benutzerdefinierten " CardButton -Stils, den wir im CSS definieren können. (Die Definition dieses Stils findest du im vollständigen Beispiel.)

    function customResponseHandler(event) {
      const { message, element, fullMessage } = event.data;
      message.options.forEach((messageItem, index) => {
        const button = document.createElement('button');
        button.innerHTML = messageItem.label;
        button.classList.add('CardButton');
        button.addEventListener('click', () => onClick(messageItem, button,     fullMessage, index));
        element.appendChild(button);
      });
    }

1. Verwenden Sie in Ihrem onLoad Ereignis-Handler die on() Instanzmethode, um die Ereignisse pre:receive customResponse und zu abonnieren, und registrieren Sie die Handler als Callbacks.

    instance.on({ type: 'customResponse', handler: customResponseHandler });
    instance.on({ type: 'pre:receive', handler: preReceiveHandler });

1. Erstellen Sie einen Click-Handler, der reagiert, wenn der Kunde auf eine der benutzerdefinierten Schaltflächen klickt. Verwenden Sie im Handler die send() Instanzmethode, um eine Nachricht an den Assistenten zu senden, wobei Sie die Beschriftung der Schaltfläche als Nachrichtentext verwenden.

Außerdem fügen wir der angeklickten Schaltfläche die benutzerdefinierte CSS-Klasse " CardButton--selected hinzu und ändern damit ihr Aussehen, um anzuzeigen, dass sie ausgewählt wurde. (Diese Klasse ist auch im vollständigen Beispiel definiert.)

    function onClick(messageItem, button, fullMessage, itemIndex) {
      webChatInstance.send({ input: { text: messageItem.label }});
      button.classList.add('CardButton--selected');
    }

1. Wenn der Benutzer die Seite neu lädt oder zu einer anderen Seite navigiert, wird der Webchat aus dem Sitzungsverlauf neu geladen. In diesem Fall soll der Status "ausgewählt" für alle angeklickten Schaltflächen erhalten bleiben.

Verwenden Sie dazu im onClick Handler die updateHistoryUserDefined Instanzmethode, um in der Sitzungshistorie eine Variable zu speichern, die angibt, welche Schaltfläche angeklickt wurde.

    webChatInstance.updateHistoryUserDefined(fullMessage.id, { selectedIndex:     itemIndex });

Lesen Sie dann im Handler " customResponse diesen Wert aus und verwenden Sie ihn, um den Anfangszustand der Schaltflächen in allen benutzerdefinierten Antworten festzulegen, die sich bereits im Sitzungsverlauf befinden.

    if (fullMessage.history?.user_defined?.selectedIndex === index) {
      button.classList.add('CardButton--selected');
    }

Den vollständigen Code finden Sie im Beispiel „Benutzerdefinierte Schaltflächen für den Web-Chat des KI-Assistenten “. Das Beispiel zeigt auch, wie die Schaltflächen in einer benutzerdefinierten Antwort deaktiviert werden können, nachdem der Kunde eine Nachricht gesendet hat, wodurch verhindert wird, dass die Schaltflächen verwendet werden, um eine Nachricht außer der Reihe zu senden.