1. Einführung
Letzte Aktualisierung:23. August 2021
Weiterleitung an einen Kundenservicemitarbeiter mit Business Messages
Mit der Funktion zur Weiterleitung an einen Kundenservicemitarbeiter in Business Messages kann Ihr Kundenservicemitarbeiter eine Unterhaltung als Bot starten und während der Unterhaltung zu einem Kundenservicemitarbeiter (menschlichem Kundenservicemitarbeiter) wechseln. Ihr Bot kann häufig gestellte Fragen wie Öffnungszeiten beantworten, während Ihr Kundenservicemitarbeiter eine personalisierte Interaktion mit mehr Zugriff auf den Kontext des Nutzers bietet. Wenn der Übergang zwischen diesen beiden Optionen nahtlos ist, erhalten Nutzer schnell und korrekt Antworten auf ihre Fragen. Das führt zu einer höheren Interaktionsrate und mehr Kundenzufriedenheit.
In diesem Codelab erfahren Sie, wie Sie die Funktion zur Weiterleitung an einen Live-Kundenservicemitarbeiter optimal nutzen.
Umfang
In diesem Codelab erstellen Sie einen Webhook für Ihren Kundenservicemitarbeiter, mit dem Live-Ereignisse für die Kundenservicemitarbeiterweiterleitung gesendet und empfangen werden können. Sie verwenden eine einfache Benutzeroberfläche, die im Startercode enthalten ist, um Ihre App zu testen.
Aufgaben in diesem Lab
- Informationen zum Speichern und Verwalten des Unterhaltungsstatus
- So senden Sie mit Business Messages Ereignisse für die Weiterleitung an einen Live-Kundenservicemitarbeiter.
- Hier erfahren Sie, wie Sie einen Webhook und eine einfache Benutzeroberfläche einrichten, um als Kundenservicemitarbeiter an Unterhaltungen teilzunehmen.
- Best Practices für die Verwendung der Business Messages API
In diesem Codelab geht es darum, mit der Business Messages API eine Weiterleitung an einen Live-Kundenservicemitarbeiter zu implementieren. Sie können sich den Startercode für jede Phase ansehen, müssen aber nur Code für Business Messages implementieren.
Voraussetzungen
- Einen Business Messages-Agenten, einschließlich Ihres Dienstkontoschlüssels. Eine Anleitung zum Erstellen eines Kundenservicemitarbeiters finden Sie im Hilfeartikel Kundenservicemitarbeiter erstellen.
- Eine funktionierende Cloud Datastore-Konfiguration, die mit dem GCP-Projekt deines Kunden verknüpft ist. Sie können die Cloud Datastore-Schnellstartanleitung verwenden, um dies einzurichten. Sie müssen nicht wissen, wie Sie Cloud Datastore verwenden.
- Ein Computer mit installiertem Google Cloud SDK und Node.js (Version 10 oder höher)
- Ein Android-Gerät (Version 5 oder höher) oder ein iOS-Gerät zum Testen der Nutzerfreundlichkeit
- Erfahrung mit der Programmierung von Webanwendungen Sie schreiben einen kleinen JavaScript-Code und müssen ihn möglicherweise debuggen.
2. Echo-Bot erstellen
In diesem Schritt stellen Sie einen einfachen Bot-Repräsentanten bereit, der als „Echo-Bot“ bezeichnet wird. Dieser Bot nimmt Nutzernachrichten auf, protokolliert sie in einem Unterhaltungs-Thread in Cloud Datastore und gibt die Nachricht des Nutzers dann durch eine Antwort mit demselben Inhalt zurück. Sobald Sie eine grundlegende Bot- und Protokollierungsinfrastruktur haben, können Sie in den nächsten Schritten eine vollständige Implementierung der Live-Kundenservicemitarbeiter-Weiterleitung erstellen.
Startcode abrufen
Klonen Sie in einem Terminal den Startercode für die Live-Kundenservicemitarbeiterweiterleitung mit dem folgenden Befehl in das Arbeitsverzeichnis Ihres Projekts:
git clone https://github.com/google-business-communications/bm-nodejs-live-agent-transfer
Startcode
Sehen wir uns die Startcodestruktur an, mit der Sie im gesamten Codelab arbeiten werden.
Rufen Sie das Verzeichnis step-1 auf und sehen Sie sich den Inhalt an. Er enthält die folgenden Elemente:
- bin: Dieses Verzeichnis enthält das Startskript „www“, mit dem der Server eingerichtet und konfiguriert wird.
- libs: Dieses Verzeichnis enthält
datastore_util.js, das praktische Methoden zum Lesen von und Schreiben in Cloud Datastore enthält. Sie müssen nicht wissen, wie diese Datei funktioniert. Notieren Sie sich einfach die verfügbaren Methoden und ihre Funktionsweise. - resources: Diese enthält Ihren Dienstkontoschlüssel als Datei namens
credentials.json. - routes: Die
index.js-Datei enthält den Webhook und alle zugehörigen Hilfsmethoden. Das ist die Hauptdatei, mit der Sie arbeiten und der Sie Inhalte hinzufügen. - views: Dieses Verzeichnis enthält EJS-Vorlagendateien für UI-Elemente. In späteren Schritten werden weitere Dateien hinzugefügt.
- app.js, app.yaml, package.json: In diesen Dateien werden die Anwendung und ihre Abhängigkeiten konfiguriert.
Laden Sie vor der Bereitstellung den Schlüssel Ihres GCP-Dienstkontos herunter und kopieren Sie die JSON-Anmeldedatendatei in jedes Ressourcenverzeichnis im Beispielcode. Wiederholen Sie dies für jeden Schritt des Codelabs.
cp credentials.json bm-nodejs-live-agent-transfer/step-<step number>/resources/credentials.json
Startcode bereitstellen
Rufen Sie in einem Terminal das Verzeichnis step-1 des Beispiels auf. Legen Sie dann im gcloud-Tool die Projekt-ID fest, mit der Sie sich bei den APIs registriert haben, damit das Google Cloud-Projekt verwendet wird.
gcloud config set project <PROJECT_ID>
Führen Sie den folgenden Befehl aus, um die Anwendung bereitzustellen:
gcloud app deploy
Notieren Sie sich die URL der bereitgestellten Anwendung in der Ausgabe des letzten Befehls:
Deployed service [default] to [https://PROJECT_ID.appspot.com]
Der Startcode, den Sie gerade bereitgestellt haben, enthält eine Webanwendung mit einem Webhook zum Empfangen von Nachrichten von Business Messages. Die Anwendung sendet Nachrichten an den Nutzer zurück und protokolliert Nachrichtenthreads in Cloud Datastore.
Konfigurieren Sie den Agent
Rufen Sie in der Business Communications Developer Console die Seite „Kontoeinstellungen“ auf und legen Sie den Webhook auf die URL Ihrer bereitgestellten Anwendung fest. Beispiel: https://PROJECT_ID.appspot.com/callback/.
Konfigurieren Sie dann auf der Seite mit den Informationen zum Kundenservicemitarbeiter die primären und sekundären Interaktionstypen als „Bot“ bzw. „Mensch“.
Unterhaltung mit dem Echo-Bot
Öffnen Sie Ihren Bot in der Developer Console. Sie sehen die Seite Übersicht, auf der Sie Details zu Ihrem Kundenservicemitarbeiter sehen. Kopieren Sie die URL für den Kundenservicemitarbeiter-Test, die mit Ihrem mobilen Testgerät übereinstimmt. Verwenden Sie diese URL auf Ihrem Mobilgerät, um die Konversationsoberfläche Ihres Kundenservicemitarbeiters zu starten.
Senden Sie dem Kundenservicemitarbeiter einige Nachrichten. Die Konversationsoberfläche kopiert nur das, was Sie sagen – was nicht sehr nützlich ist. Wenn es nur eine Möglichkeit gäbe, mit einer echten Person zu sprechen!
3. Unterhaltung beitreten
Sehen wir uns nun die Unterhaltung aus der Perspektive Ihres Kundenservicemitarbeiters an. Als Live-Kundenservicemitarbeiter müssen Sie einige Dinge über die Unterhaltung wissen, bevor Sie daran teilnehmen, z. B. die Unterhaltungs-ID. Es ist auch hilfreich zu wissen, ob der Nutzer darum gebeten hat, mit einem Kundenservicemitarbeiter zu sprechen. In diesem Schritt verwenden Sie eine einfache CRM-Seite (Customer Relationship Management), um sich diese Informationen anzusehen und der Unterhaltung als Kundenservicemitarbeiter beizutreten.
Der Starter-Code für diesen Schritt fügt ein einfaches CRM hinzu, in dem alle laufenden Unterhaltungsthreads für den Kundenservicemitarbeiter aufgeführt sind. Sehen wir uns das CRM an, um herauszufinden, welche Unterhaltungen die Aufmerksamkeit eines Kundenservicemitarbeiters erfordern könnten.
Rufen Sie das Verzeichnis step-2 auf und stellen Sie die App wie im vorherigen Schritt wieder bereit.
Wenn Sie die App bereitstellen, wird eine Ziel-URL angezeigt. Rufen Sie diese URL in einem Browser auf, um eine Liste mit dem Unterhaltungs-Thread zu sehen, den Sie im vorherigen Schritt begonnen haben. Der Status der Unterhaltung ist derzeit „Vom Bot verwaltet“, da der Echo-Bot in dieser Unterhaltung als Vertreter unseres Kundenservicemitarbeiters fungiert.
Die Schaltfläche Am Chat teilnehmen wird angezeigt, funktioniert aber noch nicht. Außerdem ist anhand dieser Benutzeroberfläche nicht ersichtlich, ob der Nutzer mit einem Kundenservicemitarbeiter sprechen möchte.
Business Messages bietet ein Ereignis vom Typ „Live-Kundenservicemitarbeiter angefragt“, das angibt, wann der Nutzer mit einem Kundenservicemitarbeiter sprechen möchte. Sie müssen diesen Status im Auge behalten, um ihn in der Benutzeroberfläche anzugeben.
Sehen Sie sich die Callback-Methode in index.js an. Ein TODO-Kommentar gibt an, wo du die Anfrage des Nutzers nach einem Kundenservicemitarbeiter aufnehmen und den Threadstatus aktualisieren musst.
step-2/routes/index.js
/**
* The webhook callback method.
*/
router.post('/callback', async function(req, res, next) {
...
} else if (requestBody.userStatus !== undefined) {
if (requestBody.userStatus.requestedLiveAgent !== undefined) {
...
// TODO: Update the thread state to QUEUED_THREAD_STATE.
}
}
});
...
});
Sie müssen die Methoden in libs/datastore_utils.js verwenden, um den aktuellen Unterhaltungs-Thread zu laden und seinen Status auf QUEUED_THREAD_STATE zu aktualisieren.
Wenn Sie sich nicht sicher sind, was Sie tun sollen, sehen Sie sich die Lösungen an. Der Startcode enthält unter jedem Schritt ein solutions-Verzeichnis, in dem Sie Code einfügen müssen. Diese Verzeichnisse enthalten eine Kopie der gesamten App mit der vollständigen Implementierung für den jeweiligen Schritt.
Sobald Sie die Implementierung abgeschlossen und die App neu bereitgestellt haben, können Sie über das Dreipunkt-Menü in der Unterhaltung auf Ihrem Mobilgerät einen Live-Kundenservicemitarbeiter anfordern.
Wenn du jetzt zum CRM zurückkehrst, sollte in deinem Unterhaltungsverlauf die Notiz „Live-Kundenservicemitarbeiter angefragt“ angezeigt werden. Dieser Nutzer benötigt Hilfe von einem Mitarbeiter. Sie müssen den joinConversation-Endpunkt implementieren, damit die Schaltfläche funktioniert.
Suchen Sie in der Stub-Methode für /joinConversation nach dem anderen TODO-Kommentar.
step-2/routes/index.js
/**
* Updates the thread state and sends a representative join signal to the user.
*/
router.post('/joinConversation', async function(req, res, next) {
let conversationId = req.body.conversationId;
// TODO: Update the thread state to LIVE_AGENT_THREAD_STATE and post a REPRESENTATIVE_JOINED event.
res.json({
'result': 'ok',
});
});
Sie müssen den Threadstatus noch einmal aktualisieren, diesmal auf LIVE_AGENT_THREAD_STATE. Außerdem müssen Sie die Methode conversations.events.create der Business Messages API verwenden, um ein REPRESENTATIVE_JOINED-Ereignis zu posten.
Zum Erstellen der Anfragenutzlast müssen Sie die in der folgenden Tabelle beschriebenen Felder festlegen:
Feldname | Tipp |
| Legen Sie diesen Wert auf „conversations/{conversationId}“ fest. |
| Generieren Sie eine eigene zufällige ID für das Ereignis. |
| Verwenden Sie die bereitgestellte Methode |
| Dies ist der Ereignistext selbst. Sie sollten „eventType“ und „representative“ festlegen. |
Weitere Informationen finden Sie auf der Referenzseite für die create-Methode oder auf der Referenzseite für Ereignisse.
Wenn Sie mit der Implementierung fertig sind, stellen Sie die App wieder bereit und klicken Sie auf die Schaltfläche Chat beitreten. Das Dialogfeld Unterhaltung beigetreten wird angezeigt und der Chatstatus ändert sich in „Livechat“. Wenn Sie sich die Unterhaltung auf Ihrem Mobilgerät ansehen, sehen Sie im Chat eine Notiz, dass Ihr Kundenservicemitarbeiter beigetreten ist.
Glückwunsch! Im nächsten Schritt sehen wir uns an, wie Sie Ihren Kundenservicemitarbeiter mit dem Nutzer verbinden.
4. Als Kundenservicemitarbeiter chatten
Nachdem Sie der Unterhaltung beigetreten sind, ist es an der Zeit, einige Nachrichten als Live-Kundenservicemitarbeiter zu senden.
Rufen Sie das Verzeichnis step-3 auf und stellen Sie die App neu bereit. Klicken Sie im CRM auf den Konversations-Thread aus dem vorherigen Schritt. Jetzt sollte eine einfache Chatoberfläche angezeigt werden. Hier sehen Sie die Nachrichten des Nutzers in Echtzeit.
Das Senden einer Nachricht im Namen des Kundenservicemitarbeiters ist jedoch noch nicht implementiert. Das müssen Sie in diesem Schritt tun.
Öffnen Sie die Datei routes/index.js und sehen Sie sich die drei neu hinzugefügten Endpunkte an:
/messages: Ruft diemessages.ejs-Ansichtsdatei ab und rendert sie im Browser. Wenn Sie im Index auf einen Konversations-Thread klicken, gelangen Sie zu einer dieser Seiten./retrieveMessages: Ruft den Nachrichteninhalt eines Threads ab und gibt eine formatierte Liste aller Nachrichten in der Unterhaltung zurück. Die Seite „Nachrichten“ ruft diesen Endpunkt regelmäßig auf, um die neuesten Nachrichten anzuzeigen./sendMessage: Eine Nachricht vom Kundenservicemitarbeiter an den Nutzer wird gesendet. Die Seite „Nachrichten“ ruft diese Funktion auf, wenn Sie auf „Senden“ klicken. Diese Funktion ist derzeit nicht implementiert.
Sehen wir uns nun die vorhandene storeAndSendResponse-Methode an:
step-3/routes/index.js
/**
* Updates the thread, adds a new message and sends a response to the user.
*
* @param {string} message The message content that was received.
* @param {string} conversationId The unique id for this user and agent.
* @param {string} threadState Represents who is managing the conversation for the CRM.
* @param {string} representativeType The representative sending the message, BOT or HUMAN.
*/
async function storeAndSendResponse(message, conversationId, threadState, representativeType) {
...
}
Der Webhook verwendet diese Methode bereits, um Antworten vom Echo-Bot zu senden. Die Methode speichert zuerst die Daten der eingehenden Nachricht im Cloud Datastore-Objekt für die Unterhaltung. Anschließend wird die Antwortnachricht gesendet. Sehen Sie sich das erstellte Nachrichtenobjekt genauer an, insbesondere den Vertretertyp.
Implementieren Sie jetzt den /sendMessage-Endpunkt selbst. Sie können die vorhandene storeAndSendResponse-Methode verwenden, um den Großteil der Arbeit zu erledigen. Achten Sie darauf, den richtigen Ansprechpartner festzulegen.
Wenn das funktioniert, stellen Sie die App neu bereit und kehren Sie zur Unterhaltung im CRM zurück. Ihre Nachrichten werden jetzt im Chatverlauf angezeigt. Sie können auch die Nachrichten des Kundenservicemitarbeiters auf Ihrem Mobilgerät sehen.
Bevor Sie fortfahren, sollten Sie sich mit der Funktionsweise der neuen Endpunkte vertraut machen. Im nächsten Schritt fügen Sie Ihren eigenen Endpunkt hinzu, um die Unterhaltung zu beenden.
5. Unterhaltung verlassen
Nachdem Sie dem Nutzer bei seinen Fragen geholfen haben, können Sie die Unterhaltung verlassen und den Nutzer wieder mit dem Bot sprechen lassen. In Business Messages wird diese Änderung durch ein REPRESENTATIVE_LEFT-Ereignis signalisiert.
Rufen Sie das Verzeichnis step-4 auf, stellen Sie die App wieder bereit und kehren Sie zum Unterhaltungs-Thread zurück. Unten im Thread gibt es jetzt den Link Unterhaltung schließen und verlassen. Dieser Link funktioniert noch nicht, da der leaveConversation-Endpunkt noch nicht implementiert ist.
Sehen Sie sich die Datei index.js an. In einem TODO-Kommentar werden Sie aufgefordert, einen neuen leaveConversation-Endpunkt zu erstellen.
step-4/routes/index.js
/*
* TODO: Create a '/leaveConversation' endpoint that does the following:
* - Updates the thread to BOT_THREAD_STATE.
* - Sends a REPRESENTATIVE_LEFT event.
* - Sends a message to the thread informing the user that they are speaking to the echo bot again.
*
* Hint: You can use the same methods that '/joinConversation' uses.
*/
Um dies zu implementieren, müssen Sie alles zusammenstellen, was Sie bisher in diesem Codelab gelernt haben. Dieser Endpunkt sollte Folgendes tun:
- Aktualisieren Sie den Thread auf die
BOT_THREAD_STATE. - Senden Sie ein
REPRESENTATIVE_LEFT-Ereignis. - Senden Sie in der Unterhaltung eine Nachricht, in der Sie den Nutzer darüber informieren, dass er mit dem Echo-Bot spricht. Verwenden Sie die Methode
storeAndSendResponse. Denken Sie daran, dass der Kundenservicemitarbeiter wiederBOTist.
Im letzten Schritt wird der Status der Unterhaltung für den Nutzer verdeutlicht. Der Nutzer sieht ein Ereignis, wenn ein Kundenservicemitarbeiter den Chat verlässt, weiß aber nicht unbedingt, dass er wieder mit dem Echo-Bot spricht. Wenn Sie eine Nachricht direkt vom Bot senden, verringern Sie die Verwirrung der Nutzer und verbessern die Nutzerfreundlichkeit.
Da der Bot die Angelegenheit jetzt übernimmt, kann sich Ihr Kundenservicemitarbeiter einer anderen Unterhaltung widmen. Sie können den Beispielcode und das CRM so oft wie Sie möchten ausprobieren. Testen Sie verschiedene Ideen für die Weiterleitung an einen Kundenservicemitarbeiter in Ihrem Unternehmen und sehen Sie, was Sie sich einfallen lassen.
6. Zusammenfassung
Herzlichen Glückwunsch zum Abschluss des Codelabs zur Weiterleitung an einen Live-Kundenservicemitarbeiter.
Sie haben einen Agenten erstellt, der die Weiterleitung an einen Kundenservicemitarbeiter von Anfang bis Ende abwickeln kann. Außerdem haben Sie gelernt, wie Sie den Status der Unterhaltung mit Cloud Datastore verfolgen.
Bei der Weiterleitung an einen Kundenservicemitarbeiter können Sie die häufig gestellten Anfragen an Ihren Bot weiterleiten, während Ihre Kundenservicemitarbeiter sich um komplexere Anfragen kümmern. Ihre Nutzer sind mit der neuen personalisierten und nützlichen Umgebung zufriedener. Die Wahrscheinlichkeit, dass sie wiederkommen und Ihr Unternehmen an Freunde weiterempfehlen, steigt.
Was liegt als Nächstes an?
Sehen Sie sich diese Codelabs an:
Weitere Informationen
- Im Leitfaden für die Weiterleitung von einem Bot an einen Live-Kundenservicemitarbeiter finden Sie die Grundlagen der Weiterleitung an einen Live-Kundenservicemitarbeiter.
- Mit dem Dialogflow-Leitfaden können Sie Ihren Echo-Bot zu einem FAQ-Bot umwandeln.