1. Einführung
Zuletzt aktualisiert: 23.08.2021
Weiterleitung an Kundenservicemitarbeiter mit Business Messages
Mit der Funktion zur Weiterleitung an einen Kundenservicemitarbeiter in Business Messages kann Ihr Agent eine Unterhaltung als Bot starten und während der Unterhaltung zu einem Kundenservicemitarbeiter (menschlicher Vertreter) wechseln. Ihr Bot kann häufig gestellte Fragen wie „Wie sind die Öffnungszeiten?“ beantworten, während Ihr Kundenservicemitarbeiter mit mehr Zugriff auf den Kontext des Nutzers eine personalisierte Erfahrung bieten kann. Wenn der Übergang zwischen diesen beiden Erfahrungen nahtlos ist, werden die Fragen der Nutzer schnell und genau beantwortet. Das führt zu einer höheren Rate an wiederkehrenden Interaktionen und einer höheren 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 Agent, der Live-Agent-Transferereignisse senden und empfangen kann. Sie verwenden eine einfache Benutzeroberfläche, die vom Startercode bereitgestellt wird, um zu testen, was Sie erstellt haben.
Lerninhalte
- So speichern und verwalten Sie den Unterhaltungsstatus.
- Live-Agent-Übergabeereignisse mit Business Messages senden
- Webhook und einfache Benutzeroberfläche für die Teilnahme an Unterhaltungen als Agent einrichten
- Best Practices für die Verwendung der Business Messages API.
In diesem Codelab geht es darum, die Business Message API zu verwenden, um die Übergabe an einen Live-Kundenservicemitarbeiter zu implementieren. Sie können sich den Startercode für jede Phase ansehen, müssen aber nur Code im Zusammenhang mit Business Messages implementieren.
Voraussetzungen
- Ein Business Messages-Agent, einschließlich Ihres Dienstkontoschlüssels. Eine Anleitung zum Erstellen eines Agents finden Sie unter Agent erstellen.
- Eine funktionierende Cloud Datastore-Konfiguration, die mit dem GCP-Projekt Ihres Agents verknüpft ist. Sie können die Cloud Datastore-Schnellstartanleitung verwenden, um dies einzurichten. Sie müssen nicht wissen, wie Cloud Datastore verwendet wird.
- Ein Computer, auf dem das Google Cloud SDK und Node.js (Version 10 oder höher) installiert sind.
- Ein Android-Gerät (mit Version 5 oder höher) oder ein iOS-Gerät zum Testen der Nutzerfreundlichkeit.
- Erfahrung in der Programmierung von Webanwendungen. Sie schreiben ein wenig JavaScript-Code und müssen ihn möglicherweise debuggen.
2. Echo-Bot erstellen
In diesem Schritt stellen Sie einen einfachen Bot-Vertreter bereit, einen sogenannten „Echo-Bot“. Dieser Bot nimmt Nutzernachrichten entgegen, protokolliert sie in einem Konversations-Thread in Cloud Datastore und gibt die Nachricht des Nutzers dann zurück, indem er mit demselben Inhalt antwortet. Wenn Sie einen einfachen Bot und eine Protokollierungsinfrastruktur haben, können Sie diese in den späteren Schritten erweitern, um eine vollständige Implementierung der Weiterleitung an einen Live-Kundenservicemitarbeiter zu erstellen.
Startcode abrufen
Klonen Sie in einem Terminal den Startercode für die Live-Agent-Übergabe mit dem folgenden Befehl in das Arbeitsverzeichnis Ihres Projekts:
git clone https://github.com/google-business-communications/bm-nodejs-live-agent-transfer
Startcode verstehen
Sehen wir uns die Struktur des Startcodes an, mit dem Sie im gesamten Codelab arbeiten werden.
Rufen Sie das Verzeichnis step-1 auf und sehen Sie sich den Inhalt an. Sie enthält die folgenden Elemente:
- bin: Dieses Verzeichnis enthält das www-Startskript, mit dem der Server eingerichtet und konfiguriert wird.
- libs: Dieses Verzeichnis enthält
datastore_util.js, das praktische Methoden zum Lesen und Schreiben von Daten in Cloud Datastore enthält. Sie müssen nicht verstehen, wie diese Datei funktioniert. Beachten Sie einfach die verfügbaren Methoden und ihre Funktion. - resources: Dieser Ordner enthält Ihren Dienstkontoschlüssel als Datei mit dem Namen
credentials.json. - routes: Die Datei
index.jsenthält den Webhook und alle zugehörigen Hilfsmethoden. Dies ist die Hauptdatei, mit der Sie arbeiten und die Sie ergänzen werden. - 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: Mit 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-Datei mit den Anmeldedaten in jedes Ressourcenverzeichnis im Beispielcode. Wiederholen Sie den Schritt für jeden Schritt des Codelabs.
cp credentials.json bm-nodejs-live-agent-transfer/step-<step number>/resources/credentials.json
Startcode bereitstellen
Wechseln Sie in einem Terminal zum Verzeichnis step-1 des Beispiels. Legen Sie dann das gcloud-Tool für die Verwendung Ihres Google Cloud-Projekts fest, indem Sie die Projekt-ID festlegen, mit der Sie sich für die APIs registriert haben.
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 gerade bereitgestellte Startcode enthält eine Webanwendung mit einem Webhook zum Empfangen von Nachrichten von Business Messages. Die Anwendung gibt Nachrichten an den Nutzer zurück und protokolliert Nachrichtenverläufe in Cloud Datastore.
Konfigurieren Sie den Agent
Rufen Sie in der Business Communications Developer Console die Seite „Kontoeinstellungen“ auf und legen Sie Ihren Webhook auf die URL Ihrer bereitgestellten Anwendung fest. Beispiel: https://PROJECT_ID.appspot.com/callback/.
Konfigurieren Sie dann auf der Seite mit den Agent-Informationen die primären und sekundären Interaktionstypen auf „Bot“ bzw. „Mensch“.
Unterhaltung mit dem Echo-Bot
Öffnen Sie Ihren Agent in der Developer Console. Die Seite Übersicht wird angezeigt. Hier können Sie die Details Ihres Agents einsehen. Kopieren Sie die Agent-Test-URL, die zu Ihrem mobilen Testgerät passt. Mit dieser URL können Sie die Konversationsschnittstelle Ihres Agenten auf Ihrem Mobilgerät starten.
Interagieren Sie mit dem Agenten, indem Sie einige Nachrichten senden. Die Konversationsoberfläche kopiert nur, was Sie sagen – das ist nicht sehr nützlich. Wenn es doch nur eine Möglichkeit gäbe, mit einem echten Menschen zu sprechen!
3. Mitreden
Sehen wir uns nun die Unterhaltung aus der Perspektive des Kundenservicemitarbeiters an. Als Kundenservicemitarbeiter müssen Sie vor dem Beitritt einige Dinge über die Unterhaltung wissen, 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 diese Informationen aufzurufen und als Live-Kundenservicemitarbeiter an der Unterhaltung teilzunehmen.
Der Startcode für diesen Schritt fügt ein einfaches CRM hinzu, in dem alle laufenden Konversations-Threads für den Agent aufgeführt sind. Sehen wir uns das CRM an, um herauszufinden, welche Unterhaltungen die Aufmerksamkeit eines Kundenservicemitarbeiters erfordern.
Rufen Sie das Verzeichnis step-2 auf und stellen Sie die App noch einmal bereit, wie Sie es im vorherigen Schritt getan haben.
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 „Bot-managed“, da der Echo-Bot in dieser Unterhaltung als Vertreter unseres Agents fungiert.
Die Schaltfläche Chat beitreten wird angezeigt, löst aber noch keine Aktion aus. Außerdem ist in dieser Benutzeroberfläche nicht ersichtlich, ob der Nutzer mit einem Kundenservicemitarbeiter sprechen möchte.
Business Messages bietet das live agent requested event, das angibt, wann der Nutzer mit einem Kundenservicemitarbeiter sprechen möchte. Sie müssen diesen Status im Blick behalten, um ihn in der Benutzeroberfläche aufzulisten.
Sehen Sie sich die Callback-Methode in index.js an. Ein TODO-Kommentar gibt an, wo Sie die Anfrage des Nutzers nach einem Kundenservicemitarbeiter abfangen und den Threadstatus aktualisieren müssen.
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 Unterhaltungsverlauf zu laden und seinen Status auf QUEUED_THREAD_STATE zu aktualisieren.
Wenn Sie nicht sicher sind, was Sie tun sollen, sehen Sie sich die Lösungen an. Der Startcode enthält in jedem Schritt, in dem Sie Code ergänzen müssen, ein solutions-Verzeichnis. Diese Verzeichnisse enthalten eine Kopie der gesamten App mit der vollständigen Implementierung für den jeweiligen Schritt.
Nachdem 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 Kundenservicemitarbeiter anfordern.
Wenn Sie jetzt zum CRM zurückkehren, sollte in Ihrem Unterhaltungsthread der Hinweis „Live-Kundenservicemitarbeiter angefordert“ angezeigt werden. Dieser Nutzer benötigt Hilfe von einem Menschen. Sie müssen den joinConversation-Endpunkt implementieren, damit die Schaltfläche funktioniert.
Suchen Sie den anderen TODO-Kommentar in der Stub-Methode für /joinConversation.
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 Text des Ereignisses. Sie sollten „eventType“ und „representative“ festlegen. |
Weitere Informationen finden Sie auf der Referenzseite für die create-Methode oder der Referenzseite für Ereignisse.
Wenn Sie mit der Implementierung fertig sind, stellen Sie die App noch einmal bereit und klicken Sie auf die Schaltfläche Chat beitreten. Das Dialogfeld Unterhaltung beigetreten wird angezeigt und der Chatstatus ändert sich zu „Livechat“. Wenn Sie sich die Unterhaltung auf Ihrem Mobilgerät ansehen, wird im Chat eine Benachrichtigung angezeigt, dass Ihr Kundenservicemitarbeiter beigetreten ist.
Glückwunsch! Im nächsten Schritt sehen wir uns an, wie Sie Ihren Live-Kundenservicemitarbeiter mit dem Nutzer sprechen lassen.
4. Nachrichten als Kundenservicemitarbeiter
Nachdem Sie der Unterhaltung beigetreten sind, ist es an der Zeit, als Kundenservicemitarbeiter Nachrichten zu senden.
Wechseln Sie zum Verzeichnis step-3 und stellen Sie die App noch einmal bereit. Klicken Sie im CRM auf den Konversationsverlauf aus dem vorherigen Schritt. Sie sollten jetzt eine einfache Chatoberfläche sehen. Hier können Sie die Nachrichten des Nutzers in Echtzeit sehen.
Das Senden einer Nachricht als Agent ist jedoch noch nicht implementiert. Das müssen Sie in diesem Schritt erledigen.
Öffnen Sie die Datei routes/index.js und sehen Sie sich die drei neu hinzugefügten Endpunkte an:
/messages: Ruft die Ansichtsdateimessages.ejsab und rendert sie im Browser. Wenn Sie im Index auf einen Unterhaltungs-Thread klicken, werden Sie zu einer dieser Seiten weitergeleitet./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: Sendet eine Nachricht vom Kundenservicemitarbeiter an den Nutzer. Die Seite „Nachrichten“ ruft diese Funktion auf, wenn Sie auf „Senden“ klicken. Derzeit nicht implementiert.
Sehen Sie sich nun die vorhandene Methode storeAndSendResponse 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 die eingehenden Nachrichtendaten zuerst im Cloud Datastore-Objekt für die Unterhaltung. Anschließend wird die Antwortnachricht gesendet. Sehen Sie sich das erstellte Nachrichtenobjekt genau an, insbesondere den repräsentativen Typ.
Implementieren Sie nun den /sendMessage-Endpunkt selbst. Sie können hier die vorhandene storeAndSendResponse-Methode verwenden, um den Großteil der Arbeit zu erledigen. Wichtig ist, dass Sie den richtigen Vertreter festlegen.
Wenn das funktioniert, stellen Sie die App noch einmal bereit und kehren Sie zur Unterhaltung im CRM zurück. Ihre Nachrichten werden jetzt im Chatverlauf angezeigt. Sie können auch sehen, wie die Nachrichten Ihres Agents auf Ihrem mobilen Testgerät angezeigt werden.
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 verlassen.
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.
Wechseln Sie zum Verzeichnis step-4, stellen Sie die App noch einmal bereit und kehren Sie zu Ihrem Unterhaltungsverlauf zurück. Unten im Thread befindet sich jetzt der Link Unterhaltung schließen und verlassen. Dieser Link funktioniert noch nicht, da der leaveConversation-Endpunkt nicht implementiert ist.
Sehen Sie sich die Datei index.js an. Es gibt einen TODO-Kommentar, der Sie anweist, 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.
*/
Dazu müssen Sie alles zusammenfügen, was Sie bisher in diesem Codelab gelernt haben. Dieser Endpunkt sollte Folgendes tun:
- Aktualisieren Sie den Thread auf
BOT_THREAD_STATE. - Senden Sie ein
REPRESENTATIVE_LEFT-Ereignis. - Senden Sie eine Nachricht in der Unterhaltung, um dem Nutzer mitzuteilen, dass er mit dem Echo-Bot spricht. Verwenden Sie die Methode
storeAndSendResponse. Denken Sie daran, dass der Vertreter wiederBOTist.
Im letzten Schritt wird der Status des Gesprächs für den Nutzer verdeutlicht. Der Nutzer sieht ein Ereignis, wenn ein Kundenservicemitarbeiter den Chat verlässt. Er weiß aber nicht unbedingt, dass er wieder mit dem Echo-Bot spricht. Wenn Sie eine Nachricht direkt vom Bot senden, können Sie Verwirrung bei Nutzern vermeiden und die Nutzerfreundlichkeit verbessern.
Da der Bot die Angelegenheit bearbeitet, kann sich der Kundenservicemitarbeiter einem anderen Gespräch widmen. Sie können den Beispielcode und das CRM beliebig oft ausprobieren. Testen Sie verschiedene Ideen für die Weiterleitung an einen Live-Kundenservicemitarbeiter und sehen Sie, was dabei herauskommt.
6. Zusammenfassung
Herzlichen Glückwunsch zum Abschluss des Codelabs zum Übergeben an einen Live-Kundenservicemitarbeiter.
Sie haben einen Agent erstellt, der Live-Agent-Übergaben von Anfang bis Ende abwickeln kann. Außerdem haben Sie eine Möglichkeit kennengelernt, den Status der Unterhaltung mit Cloud Datastore zu verfolgen.
Mit der Weiterleitung an einen Kundenservicemitarbeiter können Sie häufige Anfragen Ihrem Bot überlassen, während Ihre Kundenservicemitarbeiter komplexere Anfragen bearbeiten. Ihre Nutzer sind zufriedener mit der neuen, personalisierten und nützlichen Erfahrung. Das erhöht die Wahrscheinlichkeit, dass sie wiederkehren und Ihr Unternehmen weiterempfehlen.
Nächste Schritte
Hier sind einige Codelabs:
Weitere Informationen
- Die Grundlagen der Übergabe an einen Live-Agenten finden Sie im Leitfaden zur Übergabe vom Bot an einen Live-Agenten.
- Dialogflow-Anleitung