1. Einführung
Zuletzt aktualisiert:23. August 2021
Live-Übertragung von Kundenservicemitarbeitern mit Business Messages
Mit der Live-Übertragungsfunktion von Business Messages kann Ihr Kundenservicemitarbeiter eine Unterhaltung als Bot beginnen und mitten in der Unterhaltung zu einem menschlichen Kundenservicemitarbeiter wechseln. Ihr Bot kann häufig gestellte Fragen beantworten, z. B. zu Öffnungszeiten, und der Live-Kundenservicemitarbeiter kann individuelle Ergebnisse mit mehr Zugriff auf den Kontext des Nutzers bieten. Wenn der Wechsel zwischen diesen beiden Umgebungen nahtlos ist, werden ihre Fragen schnell und präzise beantwortet, was zu einer höheren Interaktionsrate und Kundenzufriedenheit führt.
In diesem Codelab erfahren Sie, wie Sie die Live-Übertragungsfunktion für Kundenservicemitarbeiter optimal nutzen.
Inhalt
In diesem Codelab erstellen Sie einen Webhook für Ihren Agent, der Live-Übertragungsereignisse von Agents senden und empfangen kann. Sie verwenden eine einfache Benutzeroberfläche, die vom Startcode bereitgestellt wird, um zu testen, was Sie erstellt haben.
Lerninhalte
- Unterhaltungsstatus speichern und verwalten
- Hier erfahren Sie, wie Sie mit Business Messages Live-Übertragungsereignisse an Kundenservicemitarbeiter senden.
- Webhook und grundlegende 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 hauptsächlich um die Verwendung der Business Message API zur Implementierung einer Live-Agent-Übertragung. Sie können den Startcode für jede Phase durchlesen, müssen aber nur Code für Business Messages implementieren.
Voraussetzungen
- Ein Business Messages-Agent, einschließlich Ihres Dienstkontoschlüssels. Informationen zum Erstellen eines Agents finden Sie in der Anleitung zum Erstellen eines Agents.
- Eine funktionierende Cloud Datastore-Konfiguration, die mit dem GCP-Projekt des Agents verknüpft ist. Sie können die Cloud Datastore-Kurzanleitung verwenden, um dies einzurichten. Sie müssen nicht wissen, wie Sie Cloud Datastore verwenden.
- Einen 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 Nutzererfahrung.
- Erfahrung mit der Programmierung von Webanwendungen Sie schreiben lediglich einen kleinen JavaScript-Code und müssen möglicherweise Ihren Code debuggen.
2. Echo-Bot erstellen
In diesem Schritt stellen Sie einen einfachen Bot-Repräsentanten namens „Echo-Bot“ bereit. Dieser Bot nimmt Nutzernachrichten auf, protokolliert sie in einem Unterhaltungsthread in Cloud Datastore und gibt dann die Nachricht des Nutzers „echo“, indem er mit demselben Inhalt antwortet. Sobald Sie eine grundlegende Bot- und Logging-Infrastruktur haben, können Sie diese ergänzen, um in den späteren Schritten eine vollständige Implementierung der Live-Agent-Übertragung zu erstellen.
Startcode abrufen
Klonen Sie in einem Terminal den Startercode für die Live Agent Transfer mit dem folgenden Befehl in das Arbeitsverzeichnis Ihres Projekts:
git clone https://github.com/google-business-communications/bm-nodejs-live-agent-transfer
Startcode verstehen
Werfen wir einen Blick auf die Codestruktur für den Einstieg, mit der Sie in diesem Codelab arbeiten werden.
Rufen Sie das Verzeichnis step-1 auf und sehen Sie sich seinen Inhalt an. Es 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.jsmit praktischen Methoden zum Lesen und Schreiben aus Cloud Datastore. Sie müssen nicht verstehen, wie diese Datei funktioniert. Notieren Sie sich einfach die verfügbaren Methoden und ihre Funktion. - resources: Enthält Ihren Dienstkontoschlüssel in einer Datei namens
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: Diese Dateien konfigurieren die Anwendung und ihre Abhängigkeiten.
Laden Sie vor der Bereitstellung Ihren GCP-Dienstkontoschlüssel herunter und kopieren Sie die JSON-Datei mit den Anmeldedaten in jedes Ressourcenverzeichnis im Beispielcode. Tun 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. Richten Sie dann das gcloud-Tool so ein, dass Ihr Google Cloud-Projekt verwendet wird, indem Sie die Projekt-ID festlegen, die Sie zur Registrierung bei den APIs verwendet 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 Startcode, den Sie gerade bereitgestellt haben, enthält eine Webanwendung mit einem Webhook, über den Nachrichten von Business Messages empfangen werden können. Die Anwendung gibt 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 mit den Kontoeinstellungen auf und legen Sie für den Webhook die URL der bereitgestellten Anwendung fest. Beispiel: https://PROJECT_ID.appspot.com/callback/.
Konfigurieren Sie dann auf der Informationsseite des Agents den primären und den sekundären Interaktionstyp als Bot bzw. Mensch.
Eine Unterhaltung mit dem Echo-Bot führen
Öffnen Sie den Agent in der Developer Console. Sie sehen die Seite Übersicht, auf der Sie Details zu Ihrem Agent prüfen können. Kopieren Sie die Agent-Test-URL, die Ihrem Testgerät für Mobilgeräte entspricht. Verwenden Sie diese URL auf Ihrem Mobilgerät, um die Unterhaltungsoberfläche des Agents zu starten.
Senden Sie einige Nachrichten, um mit dem Agent zu interagieren. Die Konversationsoberfläche kopiert nur das, was Sie sagen – keine sehr nützliche User Experience. Wenn es nur eine Möglichkeit gäbe, mit einem echten Menschen zu sprechen!
3. An Unterhaltung teilnehmen
Sehen wir uns nun die Unterhaltung aus der Perspektive des Kundenservicemitarbeiters an. Als Kundenservicemitarbeiter müssen Sie ein paar Dinge über die Unterhaltung wissen, z. B. die ID der Unterhaltung. Es ist auch hilfreich zu wissen, ob der Nutzer mit einem Kundenservicemitarbeiter sprechen möchte. In diesem Schritt verwenden Sie eine grundlegende CRM-Seite (Customer-Relationship-Management), um diese Informationen anzusehen und als Kundenservicemitarbeiter an der Unterhaltung teilzunehmen.
Mit dem Startcode für diesen Schritt wird ein einfaches CRM hinzugefügt, das alle laufenden Konversationsthreads für den Agent auflistet. Sehen wir uns dieses CRM einmal genauer an, um herauszufinden, welche Unterhaltungen die Aufmerksamkeit eines Kundenservicemitarbeiters erfordern könnten.
Rufen Sie das Verzeichnis step-2 auf und stellen Sie die Anwendung wie im vorherigen Schritt noch einmal bereit.
Wenn Sie die Anwendung bereitstellen, wird eine Ziel-URL angezeigt. Rufen Sie diese URL in einem Browser auf, um eine Liste mit dem Unterhaltungsthread zu sehen, den Sie im vorherigen Schritt begonnen haben. Der Status der Unterhaltung ist derzeit „Von Bots verwaltet“, weil der Echo-Bot als Vertreter für unseren Agent in dieser Unterhaltung fungiert.
Die Schaltfläche Chat beitreten wird angezeigt, hat aber noch keine Funktion. Außerdem lässt sich auf dieser Oberfläche nicht erkennen, ob der Nutzer mit einem Kundenservicemitarbeiter sprechen möchte.
Business Messages bietet ein von einem Kundenservicemitarbeiter angefordertes Ereignis, das angibt, wann der Nutzer mit einem Kundenservicemitarbeiter sprechen möchte. Sie müssen diesen Status im Auge behalten, um ihn in der UI aufzulisten.
Sehen Sie sich die Callback-Methode in index.js an. Ein TODO-Kommentar gibt an, wo Sie die Anfrage des Nutzers nach einem Live-Agent 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 Unterhaltungsthread zu laden und seinen Status auf QUEUED_THREAD_STATE zu aktualisieren.
Wenn Sie nicht sicher sind, was Sie tun sollen, werfen Sie einen Blick auf die Lösungen. Der Startcode enthält unter jedem Schritt, in dem Sie Code vervollständigen müssen, ein solutions-Verzeichnis. Diese Verzeichnisse enthalten eine Kopie der gesamten Anwendung mit der vollständigen Implementierung für den jeweiligen Schritt.
Nachdem Sie die Implementierung abgeschlossen und die App noch einmal bereitgestellt haben, können Sie über das Dreipunkt-Menü in der Unterhaltung auf Ihrem Mobilgerät einen Live-Agent anfordern.
Wenn Sie jetzt zum CRM zurückkehren, sollten Sie im Unterhaltungsthread den Hinweis „Live-Kundenservicemitarbeiter angefordert“ sehen. Dieser Nutzer benötigt Hilfe von einem Menschen. Sie müssen den Endpunkt joinConversation implementieren, damit die Schaltfläche funktioniert.
Suche in der Stub-Methode für /joinConversation den 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 auf LIVE_AGENT_THREAD_STATE aktualisieren. Außerdem müssen Sie die Methode conversations.events.create der Business Messages API verwenden, um ein REPRESENTATIVE_JOINED-Ereignis zu posten.
Um die Nutzlast der Anfrage zu erstellen, müssen Sie die in der folgenden Tabelle aufgeführten Felder festlegen:
Feldname | Tipp |
| Legen Sie dafür „conversations/{conversationId}“ fest. |
| Erstellen Sie Ihre eigene Zufalls-ID für das Ereignis. |
| Verwenden Sie die bereitgestellte Methode |
| Dies ist der Ereignistext selbst. Sie sollten den „eventType“-Wert und einen repräsentativen Wert festlegen. |
Weitere Informationen finden Sie auf der Referenzseite für die Methode „create“ oder auf 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 Beigenommener Unterhaltung wird angezeigt und der Chatstatus ändert sich in „Livechat“. Wenn Sie sich die Unterhaltung auf Ihrem Mobilgerät ansehen, wird im Chat der Hinweis angezeigt, dass der Kundenservicemitarbeiter beigetreten ist.
Glückwunsch! Im nächsten Schritt erfahren Sie, wie Sie Ihren Kundenservicemitarbeiter dazu bringen können, mit dem Nutzer zu sprechen.
4. Nachrichten als Kundenservicemitarbeiter senden
Sie nehmen jetzt an der Unterhaltung teil und senden als Kundenservicemitarbeiter ein paar Nachrichten.
Rufen Sie das Verzeichnis step-3 auf und stellen Sie die Anwendung noch einmal bereit. Klicken Sie im CRM-System auf den Unterhaltungsthread aus dem vorherigen Schritt. Sie sollten jetzt eine einfache Chatoberfläche sehen. Von hier aus können Sie die Nachrichten des Nutzers in Echtzeit sehen.
Das Senden einer Nachricht ist jedoch noch nicht möglich, da der Agent noch nicht implementiert wurde. Das müssen Sie in diesem Schritt abschließen.
Ö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 Konversationsthread 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: Sendet eine Nachricht vom zuständigen Kundenservicemitarbeiter an den Nutzer. Diese wird auf der Nachrichtenseite aufgerufen, wenn Sie auf „Senden“ klicken. Sie ist derzeit nicht implementiert.
Sehen Sie sich 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 genau an, insbesondere den repräsentativen Typ.
Implementieren Sie jetzt den Endpunkt /sendMessage selbst. Sie können hier die vorhandene Methode storeAndSendResponse für den Großteil der Arbeit verwenden. Wichtig ist, dass Sie den richtigen Ansprechpartner festlegen.
Sobald dies funktioniert, stellen Sie die App noch einmal bereit und kehren Sie zu Ihrem Gespräch im CRM zurück. Ihre Nachrichten werden jetzt im Chatprotokoll angezeigt. Die Nachrichten Ihres Agents werden auch auf dem Testgerät für Mobilgeräte angezeigt.
Bevor Sie fortfahren, sollten Sie sich mit der Funktionsweise der neuen Endpunkte vertraut machen. Im nächsten Schritt fügst du deinen eigenen Endpunkt hinzu, um die Unterhaltung zu verlassen.
5. Unterhaltung wird verlassen
Nachdem Sie dem Nutzer bei seinen Fragen geholfen haben, sollten 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 Anwendung noch einmal bereit und kehren Sie zu Ihrem Unterhaltungsthread zurück. Unten im Thread finden Sie jetzt den Link Unterhaltung schließen und verlassen. Dieser Link funktioniert noch nicht, da der leaveConversation-Endpunkt nicht implementiert wurde.
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.
*/
Um dies zu implementieren, müssen Sie alles zusammenfassen, was Sie bisher im Codelab gelernt haben. Dieser Endpunkt sollte Folgendes tun:
- Aktualisieren Sie den Thread auf
BOT_THREAD_STATE. REPRESENTATIVE_LEFT-Ereignis senden.- 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 Bevollmächtigte wieder zuBOTgeändert wurde.
Im letzten Schritt wird der Status der Unterhaltung für den Nutzer geklärt. Der Nutzer sieht ein Ereignis, wenn ein Mitarbeiter den Chat verlässt. Er erfährt aber nicht, dass er noch einmal mit dem Echo-Bot spricht. Indem Sie eine Nachricht direkt vom Bot senden, reduzieren Sie die Verwirrung der Nutzer und verbessern die Nutzerfreundlichkeit.
Der Bot kümmert sich jetzt um Ihre Aufgaben. Der Kundenservicemitarbeiter kann jetzt an einer weiteren Unterhaltung teilnehmen. Probieren Sie den Beispielcode und das CRM nach Belieben aus. Probieren Sie verschiedene Ideen aus, wie Ihr Unternehmen per Livechat mit einem Kundenservicemitarbeiter verbunden werden kann, und lassen Sie sich überraschen.
6. Zusammenfassung
Sie haben das Codelab zur Live-Übertragung von Agents abgeschlossen.
Sie haben einen Agent erstellt, der von Anfang bis Ende Live-Agent-Übertragungen abwickeln kann. Außerdem haben Sie gelernt, wie Sie den Status der Unterhaltung mit Cloud Datastore verfolgen können.
Dabei müssen Sie die häufigsten Anfragen Ihrem Bot überlassen, während Ihre Kundenservicemitarbeiter komplexere Anfragen bearbeiten. Ihre Nutzer sind mit der neuen benutzerdefinierten und nützlichen Oberfläche zufriedener und erhöhen die Wahrscheinlichkeit, dass sie zu Ihrem Unternehmen zurückkehren und es Freunden weiterempfehlen.
Was liegt als Nächstes an?
Sehen Sie sich einige dieser Codelabs an:
Weitere Informationen
- Im Leitfaden zur Übergabe vom Bot an den Kundenservicemitarbeiter können Sie sich noch einmal die Grundlagen der Live-Übertragung von Kundenservicemitarbeitern ansehen.
- Aktualisieren Sie Ihren Echo-Bot mithilfe der Dialogflow-Anleitung auf einen FAQ-Bot.