1. Einführung
Zuletzt aktualisiert:23.08.2021
Live-Agent-Übertragung mit Business Messages
Mit der Funktion zur Live-Übertragung mit einem Kundenservicemitarbeiter kann Ihr Kundenservicemitarbeiter eine Unterhaltung als Bot starten und während der Unterhaltung zu einem Kundenservicemitarbeiter wechseln. Ihr Bot kann allgemeine Fragen wie Öffnungszeiten beantworten, während Ihr Kundenservicemitarbeiter Ihnen eine personalisierte Umgebung bieten kann, die mehr Zugriff auf den Nutzerkontext bietet. Wenn der Wechsel zwischen diesen beiden Umgebungen nahtlos ist, werden die Fragen der Nutzer schnell und präzise beantwortet, was zu einer höheren Interaktionsrate bei der Website führt und die Kundenzufriedenheit steigert.
In diesem Codelab erfährst du, wie du die Funktion für die Live-Agent-Übertragung optimal nutzt.
Inhalt
In diesem Codelab erstellen Sie einen Webhook für Ihren Agent, der Live-Übertragungsereignisse senden und empfangen kann. Sie verwenden eine einfache Benutzeroberfläche, die vom Startcode bereitgestellt wird, um zu testen, was Sie erstellt haben.
Aufgaben in diesem Lab
- Unterhaltungsstatus speichern und verwalten
- Mit Business Messages Live-Übertragungsereignisse für Kundenservicemitarbeiter senden
- Hier erfahren Sie, wie Sie einen Webhook und eine einfache UI einrichten, um als Agent an Unterhaltungen teilzunehmen.
- Best Practices für die Verwendung der Business Messages API
In diesem Codelab geht es vor allem um die Business Message API, um die Live-Übertragung mit einem Kundenservicemitarbeiter zu implementieren. Sie können den Startcode für jede Phase einlesen, müssen aber nur den Code für Business Messages implementieren.
Voraussetzungen
- Einen Business Messages-Agent, einschließlich Ihres Dienstkontoschlüssels. Wie Sie einen Agent erstellen, erfahren Sie im Leitfaden zum Erstellen eines Agents.
- Eine funktionierende Cloud Datastore-Konfiguration, die mit dem GCP-Projekt Ihres Agents verknüpft ist. Sie können die Cloud Datastore-Kurzanleitung verwenden, um dies einzurichten. Sie müssen nicht wissen, wie man Cloud Datastore verwendet.
- Einen Computer, auf dem das Google Cloud SDK und Node.js (Version 10 oder höher) installiert sind
- Ein Android-Gerät (Version 5 oder höher) oder ein iOS-Gerät zum Testen der Nutzererfahrung.
- Erfahrung mit dem Programmieren von Webanwendungen Sie schreiben ein wenig JavaScript-Code und müssen eventuell etwas debuggen, was Sie geschrieben haben.
2. Echo-Bot erstellen
In diesem Schritt stellen Sie einen einfachen Bot-Mitarbeiter namens „Echo-Bot“ bereit. Dieser Bot nimmt Nutzernachrichten, protokolliert sie in einem Unterhaltungsthread in Cloud Datastore und gibt dann „Echo“ zurück die Nachricht des Nutzers, indem er mit demselben Inhalt antwortet. Sobald Sie eine grundlegende Bot- und Logging-Infrastruktur haben, können Sie diese erweitern, um in den späteren Schritten eine vollständige Implementierung der Live-Agent-Übertragung zu erstellen.
Startercode abrufen
Klonen Sie in einem Terminal den Startcode für 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
Einstiegscode
Sehen wir uns die Struktur des Startcodes an, mit dem Sie in diesem Codelab arbeiten werden.
Wechseln Sie zum Verzeichnis step-1 und sehen Sie sich seinen Inhalt an. Es enthält die folgenden Elemente:
- bin: Dieses Verzeichnis enthält das www-Starterskript, mit dem der Server eingerichtet und konfiguriert wird.
- libs: Dieses Verzeichnis enthält die Datei
datastore_util.jsmit praktischen Methoden zum Lesen und Schreiben in Cloud Datastore. Sie brauchen nicht zu verstehen, wie diese Datei funktioniert. Notieren Sie sich die verfügbaren Methoden und was sie bewirken. - resources: Enthält Ihren Dienstkontoschlüssel in Form 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. - views: Dieses Verzeichnis enthält EJS-Vorlagendateien für UI-Elemente. In späteren Schritten werden weitere Dateien enthalten sein.
- 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. Führen Sie diese Schritte für jeden Schritt im Codelab durch.
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 es Ihr Google Cloud-Projekt verwendet, indem Sie die Projekt-ID angeben, die Sie für die 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 gerade bereitgestellte Startcode 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 Nachrichten-Threads 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/.
Konfiguriere dann auf der Seite mit den Agent-Informationen die primären und sekundären Interaktionstypen als Bot bzw. Mensch.
Unterhaltung mit dem Echo-Bot
Öffnen Sie den Agent in der Developer Console. Sie sehen die Seite Übersicht, auf der Sie die Details Ihres Agents prüfen können. Kopieren Sie die Agent-Test-URL, die mit dem mobilen Testgerät übereinstimmt. Verwenden Sie diese URL auf Ihrem Mobilgerät, um die dialogorientierte Oberfläche des Agents zu starten.
Sie können mit dem Agent interagieren, indem Sie ein paar Nachrichten senden. Die Konversationsoberfläche kopiert nur das, was Sie sagen – keine sehr nützliche User Experience. Wenn es doch nur eine Möglichkeit gäbe, mit einem echten Menschen zu sprechen!
3. Mitreden
Sehen wir uns nun das Gespräch aus der Perspektive des Live-Kundenservicemitarbeiters an. Als Live-Kundenservicemitarbeiter müssen Sie einige Dinge über die Unterhaltung wissen, bevor Sie teilnehmen können, z. B. die Unterhaltungs-ID. Es ist auch hilfreich zu wissen, ob der Nutzer um ein Gespräch mit einem Kundenservicemitarbeiter gebeten hat. In diesem Schritt verwenden Sie eine einfache 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, in dem alle laufenden Unterhaltungsthreads für den Agent aufgelistet werden. Sehen wir uns dieses CRM an, um herauszufinden, welche Unterhaltungen die Aufmerksamkeit eines Kundenservicemitarbeiters erfordern könnten.
Rufen Sie das Verzeichnis step-2 auf und stellen Sie die Anwendung noch einmal wie im vorherigen Schritt 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 aufzurufen, den Sie im vorherigen Schritt gestartet 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 Dem Chat beitreten wird zwar angezeigt, es ist aber noch nichts passiert. An dieser Oberfläche lässt sich auch nicht erkennen, ob der Nutzer mit einem Kundenservicemitarbeiter sprechen möchte.
Business Messages stellt ein von einem Kundenservicemitarbeiter angefordertes Ereignis bereit, 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 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 Thread-Status 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.
Falls 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 ausführen 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 wieder 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, sollten Sie in Ihrem Unterhaltungsthread den Hinweis „Live-Kundenservicemitarbeiter angefordert“ sehen. Dieser Nutzer benötigt Hilfe von einem Mitarbeiter. Du musst den Endpunkt joinConversation 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',
});
});
Du musst den Thread-Status 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.
Um die Nutzlast der Anfrage zu erstellen, müssen Sie die in der folgenden Tabelle beschriebenen Felder festlegen:
Feldname | Tipp |
| Legen Sie hierfür "conversations/{conversationId}" fest. |
| Sie können eine eigene Zufalls-ID für das Ereignis generieren. |
| Verwende die bereitgestellte |
| Dies ist der Ereignistext selbst. „eventType“ und „repräsentativ“ |
Informationen hierzu finden Sie auf der Referenzseite für die Erstellungsmethode 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 An Chat teilnehmen. Das Dialogfeld Unterhaltung beigetreten wird angezeigt und der Chatstatus ändert sich zu „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 erfahren Sie, wie Sie Ihren Kundenservicemitarbeiter dazu bringen, mit Ihren Nutzern zu kommunizieren.
4. Nachrichten als Kundenservicemitarbeiter senden
Da Sie der Unterhaltung beigetreten sind, ist es an der Zeit, einige Nachrichten als Kundenservicemitarbeiter zu senden.
Rufen Sie das Verzeichnis step-3 auf und stellen Sie die Anwendung noch einmal bereit. Klicken Sie im CRM 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 als Agent ist jedoch immer 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 die Ansichtsdateimessages.ejsab und rendert sie im Browser. Wenn Sie auf einen Konversationsthread im Index klicken, wechseln Sie zu einer dieser Seiten./retrieveMessages: Ruft den Nachrichteninhalt eines Threads ab und gibt eine formatierte Liste aller Nachrichten in der Konversation zurück. Die Seite „Nachrichten“ ruft regelmäßig diesen Endpunkt auf, um die neuesten Nachrichten anzuzeigen./sendMessage: Vom Kundenservicemitarbeiter wird eine Nachricht an den Nutzer gesendet. Sie wird auf der Nachrichtenseite aufgerufen, wenn Sie auf „Senden“ klicken. Sie ist derzeit nicht implementiert.
Werfen Sie nun einen Blick auf die vorhandene storeAndSendResponse-Methode:
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 eingehenden Nachrichtendaten für die Konversation im Cloud Datastore-Objekt. Anschließend wird die Antwortnachricht gesendet. Sehen Sie sich das erstellte Nachrichtenobjekt genau an, insbesondere den repräsentativen Typ.
Implementieren Sie nun selbst den Endpunkt /sendMessage. Für den Großteil der Arbeit können Sie hier die vorhandene Methode storeAndSendResponse verwenden. Wichtig ist, den richtigen Vertreter festzulegen.
Wenn das funktioniert, stellen Sie die App noch einmal bereit und kehren Sie zu Ihrer Unterhaltung im CRM zurück. Ihre Nachrichten werden jetzt im Chatprotokoll angezeigt. Die Nachrichten des Agents werden auch auf deinem 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ügen Sie Ihren 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.
Rufen Sie das Verzeichnis step-4 auf, stellen Sie die Anwendung noch einmal bereit und kehren Sie zum Unterhaltungsthread zurück. Unten im Thread gibt es jetzt den Link Unterhaltung schließen und verlassen. Dieser Link funktioniert noch nicht, da der Endpunkt leaveConversation nicht implementiert ist.
Sehen Sie sich die Datei index.js an. Es gibt einen TODO-Kommentar, der dich 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 zusammenstellen, was Sie bisher im Codelab gelernt haben. Dieser Endpunkt sollte Folgendes tun:
- Thread aktualisieren auf
BOT_THREAD_STATE. REPRESENTATIVE_LEFT-Ereignis senden.- Senden Sie in der Unterhaltung eine Nachricht, in der Sie dem Nutzer mitteilen, dass er mit dem Echo-Bot spricht. Verwenden Sie die Methode
storeAndSendResponse. Denken Sie daran, dass der Ansprechpartner 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, erfährt aber nicht unbedingt, dass er noch einmal mit dem Echo-Bot spricht. Wenn Sie eine Nachricht direkt über den Bot senden, vermeiden Sie Verwirrung beim Nutzer und verbessern die Nutzererfahrung.
Der Bot kümmert sich jetzt darum und Ihr Kundenservicemitarbeiter kann sich einer anderen Unterhaltung anschließen. Probieren Sie den Beispielcode und das CRM nach Belieben aus. Probieren Sie verschiedene Ideen aus, die Sie für die Live-Agent-Übertragung Ihres Unternehmens haben, und sehen Sie selbst, was Ihnen einfällt.
6. Zusammenfassung
Glückwunsch! Du hast das Codelab für die Live-Agent-Übertragung abgeschlossen.
Sie haben einen Agent erstellt, der den Anfang bis zum Ende von Live-Agent-Übertragungen verarbeiten kann. Außerdem haben Sie eine Möglichkeit kennengelernt, den Status einer Konversation mit Cloud Datastore zu verfolgen.
So können Sie dem Bot häufige Anfragen überlassen, während Ihre Kundenservicemitarbeiter komplexere Anfragen bearbeiten. Ihre Nutzer werden mit der neuen, personalisierten und nützlichen Erfahrung zufriedener sein, sodass die Wahrscheinlichkeit steigt, dass sie zurückkehren und Ihr Unternehmen weiterempfehlen.
Was liegt als Nächstes an?
Sehen Sie sich einige dieser Codelabs an:
Weitere Informationen
- Im Leitfaden zum Handoff vom Bot zum Kundenservicemitarbeiter erfahren Sie mehr über die Grundlagen der Übertragung von Live-Kundenservicemitarbeitern.
- Aktualisieren Sie Ihren Echo-Bot mithilfe der Dialogflow-Anleitung auf einen FAQ-Bot.