1. Présentation
Dernière mise à jour:23/08/2021
Transfert vers un agent avec Business Messages
La fonctionnalité de transfert vers un agent en direct de Business Messages permet à votre agent de démarrer une conversation en tant que bot et de passer à un agent en direct (représentant humain) en cours de conversation. Votre bot peut répondre aux questions courantes, comme les horaires d'ouverture, tandis que votre agent en direct peut offrir une expérience personnalisée avec un accès plus important au contexte de l'utilisateur. Lorsque la transition entre ces deux expériences est fluide, les utilisateurs obtiennent des réponses à leurs questions rapidement et précisément, ce qui entraîne un taux d'engagement plus élevé et une plus grande satisfaction client.
Cet atelier de programmation vous explique comment exploiter pleinement la fonctionnalité de transfert d'agent en direct.
Objectifs de l'atelier
Dans cet atelier de programmation, vous allez créer un webhook pour votre agent qui peut envoyer et recevoir des événements de transfert d'agent en direct. Vous allez utiliser une UI de base fournie par le code de démarrage pour tester ce que vous avez créé.
Points abordés
- Stocker et gérer l'état de la conversation
- Utiliser Business Messages pour envoyer des événements de transfert d'agent en direct
- Configurer un webhook et une UI de base pour rejoindre des conversations en tant qu'agent
- Bonnes pratiques pour utiliser l'API Business Messages
Cet atelier de programmation est axé sur l'utilisation de l'API Business Messages pour implémenter le transfert d'un agent en direct. Vous pouvez consulter le code de démarrage de chaque étape, mais vous n'avez besoin d'implémenter que le code lié à Business Messages.
Prérequis
- Un agent Business Messages, y compris votre clé de compte de service. Pour créer un agent, suivez le guide de création d'un agent.
- Une configuration Cloud Datastore fonctionnelle associée au projet GCP de votre agent. Vous pouvez utiliser le guide de démarrage rapide Cloud Datastore pour configurer cette fonctionnalité. Vous n'avez pas besoin de savoir comment utiliser Cloud Datastore.
- Un ordinateur sur lequel le SDK Google Cloud et Node.js (version 10 ou ultérieure) sont installés.
- Un appareil Android (version 5 ou ultérieure) ou un appareil iOS pour tester l'expérience utilisateur
- Expérience dans la programmation d'applications Web Vous allez écrire une petite quantité de code JavaScript et vous devrez peut-être le déboguer.
2. Créer un bot d'écho
À cette étape, vous allez déployer un représentant de bot de base appelé "bot Echo". Ce bot récupère les messages des utilisateurs, les consigne dans un fil de discussion dans Cloud Datastore, puis "répète" le message de l'utilisateur en répondant avec le même contenu. Une fois que vous avez une infrastructure de base pour le bot et la journalisation, vous pouvez l'étendre pour créer une implémentation complète du transfert vers un agent en direct dans les étapes suivantes.
Télécharger le code de démarrage
Dans un terminal, clonez le code de démarrage du transfert vers un agent en direct vers le répertoire de travail de votre projet à l'aide de la commande suivante:
git clone https://github.com/google-business-communications/bm-nodejs-live-agent-transfer
Comprendre le code de démarrage
Examinons la structure du code de départ que vous utiliserez tout au long de l'atelier de programmation.
Accédez au répertoire step-1 et affichez son contenu. Il contient les éléments suivants:
- bin: ce répertoire contient le script de démarrage www qui configure le serveur.
- libs: ce répertoire contient
datastore_util.js, qui contient des méthodes pratiques pour lire et écrire dans Cloud Datastore. Vous n'avez pas besoin de comprendre le fonctionnement de ce fichier. Notez simplement les méthodes disponibles et leur fonction. - resources: contient votre clé de compte de service sous la forme d'un fichier nommé
credentials.json. - routes: le fichier
index.jscontient le webhook et toutes ses méthodes d'assistance. Il s'agit du fichier principal avec lequel vous allez travailler et auquel vous allez ajouter des éléments. - views: ce répertoire contient les fichiers de modèle EJS pour les éléments d'interface utilisateur. Il contiendra d'autres fichiers dans les étapes suivantes.
- app.js, app.yaml, package.json: ces fichiers configurent l'application et ses dépendances.
Avant le déploiement, téléchargez la clé de votre compte de service GCP et copiez le fichier d'identifiants JSON dans chaque répertoire de ressources de l'exemple de code. Répétez l'opération pour chaque étape de l'atelier de programmation.
cp credentials.json bm-nodejs-live-agent-transfer/step-<step number>/resources/credentials.json
Déployer le code de démarrage
Dans un terminal, accédez au répertoire step-1 de l'exemple. Définissez ensuite l'outil gcloud pour qu'il utilise votre projet Google Cloud en définissant l'ID de projet que vous avez utilisé pour vous inscrire auprès des API.
gcloud config set project <PROJECT_ID>
Pour déployer l'application, exécutez la commande suivante:
gcloud app deploy
Notez l'URL de l'application déployée dans le résultat de la dernière commande :
Deployed service [default] to [https://PROJECT_ID.appspot.com]
Le code de démarrage que vous venez de déployer contient une application Web avec un webhook permettant de recevoir des messages de Business Messages. L'application renvoie les messages à l'utilisateur et consigne les fils de discussion dans Cloud Datastore.
Configurez votre agent.
Accédez à la page "Paramètres du compte" dans la console pour les développeurs Business Communications et définissez votre webhook sur l'URL de votre application déployée. Par exemple, https://PROJECT_ID.appspot.com/callback/.
Sur la page "Informations sur l'agent", configurez les types d'interactions principaux et secondaires sur "Robot" et "Humain", respectivement.
Discuter avec le bot Echo
Ouvrez votre agent dans la console pour développeurs. La page Vue d'ensemble s'affiche. Elle vous permet de consulter les informations sur votre agent. Copiez l'URL de test de l'agent correspondant à votre appareil mobile de test. Utilisez cette URL sur votre appareil mobile pour lancer la surface de conversation de votre agent.
Interagissez avec l'agent en lui envoyant quelques messages. La surface de conversation ne copie que ce que vous dites, ce qui n'est pas une expérience utilisateur très utile. Si seulement il y avait un moyen de parler à une personne réelle !
3. Rejoindre la conversation
Voyons maintenant la conversation du point de vue de votre agent en direct. En tant qu'agent en direct, vous devez connaître certains éléments de la conversation avant de la rejoindre, comme son ID. Il est également utile de savoir si l'utilisateur a demandé à parler à un agent. À cette étape, vous allez utiliser une page CRM (Customer Relationship Management) de base pour afficher ces informations et rejoindre la conversation en tant qu'agent en direct.
Le code de démarrage de cette étape ajoute un CRM de base qui liste tous les fils de discussion en cours pour l'agent. Voyons ce que dit le CRM pour voir quelles conversations pourraient nécessiter l'attention d'un agent en direct.
Accédez au répertoire step-2 et déployez à nouveau l'application comme à l'étape précédente.
Lorsque vous déployez l'application, une URL cible s'affiche. Accédez à cette URL dans un navigateur pour afficher une fiche avec le fil de discussion que vous avez commencé à l'étape précédente. L'état de la conversation est actuellement "Géré par le bot", car le bot Echo agit en tant que représentant de notre agent dans cette conversation.
Le bouton Joindre la discussion s'affiche, mais n'a encore aucun effet. Vous ne pouvez pas non plus savoir si l'utilisateur souhaite parler à un agent en direct à partir de cette interface.
Business Messages fournit un événement "Agent en direct demandé" qui indique quand l'utilisateur souhaite parler à un agent en direct. Vous devez suivre cet état pour l'afficher dans l'UI.
Examinez la méthode de rappel dans index.js. Un commentaire TODO indique où vous devez intercepter la demande de l'utilisateur d'un agent en direct et mettre à jour l'état de la discussion.
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.
}
}
});
...
});
Vous devez utiliser les méthodes de libs/datastore_utils.js pour charger le fil de discussion actuel et définir son état sur QUEUED_THREAD_STATE.
Si vous ne savez pas quoi faire, consultez les solutions. Le code de démarrage inclut un répertoire solutions sous chaque étape où vous devez ajouter du code. Ces répertoires contiennent une copie de l'application entière avec l'implémentation complète de l'étape donnée.
Une fois l'implémentation terminée et l'application redéployée, utilisez le menu à développer de la conversation sur votre appareil mobile pour demander l'intervention d'un agent en direct.
Si vous revenez au CRM, une note "Agent en direct demandé" devrait s'afficher dans le fil de discussion. Cet utilisateur a besoin d'aide humaine. Vous devez implémenter le point de terminaison joinConversation pour que le bouton fonctionne.
Recherchez l'autre commentaire TODO dans la méthode fictive pour /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',
});
});
Vous devez à nouveau mettre à jour l'état du thread, cette fois sur LIVE_AGENT_THREAD_STATE. En outre, vous devez utiliser la méthode conversations.events.create de l'API Business Messages pour publier un événement REPRESENTATIVE_JOINED.
Pour créer la charge utile de la requête, vous devez définir les champs indiqués dans le tableau suivant:
Nom de champ | Indice |
| Définissez cette valeur sur "conversations/{conversationId}". |
| Générez votre propre ID aléatoire pour l'événement. |
| Utilisez la méthode |
| Il s'agit du corps de l'événement en lui-même. Vous devez définir eventType et representative. |
Pour obtenir de l'aide, consultez la page de référence de la méthode create ou la page de référence des événements.
Une fois l'implémentation terminée, redéployez l'application, puis cliquez sur le bouton Joindre la discussion. La boîte de dialogue Conversation rejointe s'affiche et l'état du chat passe à "Chat en direct". Si vous consultez la conversation sur votre appareil mobile, vous verrez une note dans le chat indiquant que votre agent en direct a rejoint la discussion.
Félicitations ! À l'étape suivante, nous allons voir comment faire en sorte que votre agent en direct parle à votre utilisateur.
4. Envoyer des messages en tant qu'agent
Maintenant que vous avez rejoint la conversation, il est temps d'envoyer des messages en tant qu'agent en direct.
Accédez au répertoire step-3 et redéployez l'application. Dans le CRM, cliquez sur le fil de discussion de l'étape précédente. Une interface de chat de base devrait maintenant s'afficher. Vous pouvez alors voir les messages de l'utilisateur en temps réel.
Toutefois, l'envoi d'un message en tant qu'agent n'est pas encore implémenté. Vous devez le faire à cette étape.
Ouvrez le fichier routes/index.js et examinez les trois points de terminaison nouvellement ajoutés:
/messages: récupère le fichier de vuemessages.ejset l'affiche dans le navigateur. Lorsque vous cliquez sur un fil de discussion dans l'index, vous accédez à l'une de ces pages./retrieveMessages: récupère le contenu des messages d'un fil de discussion et renvoie une liste formatée de tous les messages de la conversation. La page "Messages" appelle régulièrement ce point de terminaison pour afficher les derniers messages./sendMessage: envoie un message de l'agent à l'utilisateur. La page des messages appelle cette méthode lorsque vous cliquez sur "Envoyer". Elle n'est pas implémentée pour le moment.
Examinez maintenant la méthode storeAndSendResponse existante:
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) {
...
}
Le webhook utilise déjà cette méthode pour envoyer des réponses du bot Echo. La méthode stocke d'abord les données du message entrant dans l'objet Cloud Datastore pour la conversation. Ensuite, il envoie le message de réponse. Examinez attentivement l'objet de message qu'il crée, en particulier le type de représentant.
Implémentez maintenant le point de terminaison /sendMessage. Vous pouvez utiliser la méthode storeAndSendResponse existante ici pour effectuer la majeure partie du travail. L'important est de ne pas oublier de définir le bon représentant.
Une fois que vous avez effectué cette opération, redéployez l'application et revenez à votre conversation dans le CRM. Vos messages s'affichent désormais dans l'historique des chats. Vous pouvez également voir les messages de votre agent s'afficher sur votre appareil mobile de test.
Avant de continuer, assurez-vous de bien comprendre le fonctionnement des nouveaux points de terminaison. À l'étape suivante, vous ajouterez votre propre point de terminaison pour quitter la conversation.
5. Quitter la conversation
Une fois que vous avez répondu aux questions de l'utilisateur, vous pouvez quitter la conversation et lui permettre de parler à nouveau au bot. Dans Business Messages, ce changement est signalé par un événement REPRESENTATIVE_LEFT.
Accédez au répertoire step-4, redéployez l'application, puis revenez à votre fil de discussion. Un lien Fermer et quitter la conversation s'affiche désormais en bas du fil de discussion. Ce lien ne fonctionne pas pour le moment, car le point de terminaison leaveConversation n'est pas implémenté.
Examinez le fichier index.js. Un commentaire "À FAIRE" vous invite à créer un point de terminaison leaveConversation.
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.
*/
Pour ce faire, vous devez rassembler tout ce que vous avez appris dans cet atelier de programmation. Ce point de terminaison doit effectuer les opérations suivantes:
- Mettez à jour le thread avec le
BOT_THREAD_STATE. - Envoyez un événement
REPRESENTATIVE_LEFT. - Envoyez un message dans la conversation pour indiquer à l'utilisateur qu'il parle au bot Echo. Utilisez la méthode
storeAndSendResponse. N'oubliez pas que le représentant est à nouveauBOT.
La dernière étape clarifie l'état de la conversation pour l'utilisateur. L'utilisateur voit un événement lorsqu'un représentant quitte la discussion, mais il ne sait pas nécessairement qu'il parle à nouveau au bot d'écho. En envoyant un message directement depuis le bot, vous réduisez la confusion chez l'utilisateur et améliorez son expérience.
Maintenant que le robot s'occupe de la demande, votre agent en direct peut rejoindre une autre conversation. Essayez de jouer avec l'exemple de code et le CRM autant que vous le souhaitez. Testez différentes idées que vous avez pour l'expérience de transfert d'agent en direct de votre entreprise, et voyez ce que vous trouvez.
6. Conclusion
Félicitations ! Vous avez terminé l'atelier de programmation sur le transfert vers un agent en direct.
Vous avez créé un agent capable de gérer les transferts d'agents en direct du début à la fin. Vous avez également appris une méthode pour suivre l'état de la conversation avec Cloud Datastore.
Grâce à cette fonctionnalité, vous pouvez laisser votre bot gérer les demandes courantes, tandis que vos agents en direct gèrent les demandes plus complexes. Vos utilisateurs seront plus satisfaits de cette nouvelle expérience personnalisée et utile, ce qui augmentera la probabilité qu'ils reviennent et recommandent votre établissement à leurs amis.
Et ensuite ?
Découvrez quelques-uns de ces ateliers de programmation:
Complément d'informations
- Consultez les principes de base du transfert vers un agent en direct dans le guide de transfert du robot à un agent en direct.
- Passez de votre bot Echo à un bot de questions fréquentes en suivant le guide Dialogflow.