1. Présentation
Dernière mise à jour : 23/08/2021
Transfert à un agent avec Business Messages
La fonctionnalité de transfert d'agent en direct de Business Messages permet à votre agent de commencer 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 en ayant davantage accès au contexte de l'utilisateur. Lorsque la transition entre ces deux expériences est fluide, les utilisateurs obtiennent des réponses rapides et précises à leurs questions, ce qui se traduit par un taux d'engagement de retour plus élevé et une satisfaction client accrue.
Cet atelier de programmation vous explique comment tirer pleinement parti de la fonctionnalité de transfert vers un agent en direct.
Objectifs de l'atelier
Dans cet atelier de programmation, vous allez créer un webhook pour votre agent, qui pourra envoyer et recevoir des événements de transfert d'agent en direct. Vous utiliserez une interface utilisateur 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
- Découvrez comment utiliser les messages professionnels pour envoyer des événements de transfert d'agent en direct.
- Configurer un webhook et une interface utilisateur de base pour rejoindre des conversations en tant qu'agent
- Bonnes pratiques pour utiliser l'API Business Messages.
Cet atelier de programmation porte sur l'utilisation de l'API Business Messages pour implémenter le transfert d'agent en direct. Vous pouvez lire le code de départ de chaque étape, mais vous n'avez besoin d'implémenter que le code lié aux messages professionnels.
Prérequis
- Un agent Business Messages, y compris la clé de votre compte de service. Vous pouvez créer un agent en suivant 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 de Cloud Datastore pour configurer cela. Vous n'avez pas besoin de savoir comment utiliser Cloud Datastore.
- Un ordinateur sur lequel sont installés le SDK Google Cloud et Node.js (version 10 ou ultérieure).
- Un appareil Android (avec la 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 un petit peu de code JavaScript et devrez peut-être le déboguer.
2. Créer un bot d'écho
Dans cette étape, vous allez déployer un bot de base appelé "bot Echo". Ce bot prend les messages des utilisateurs, les enregistre dans un fil de conversation dans Cloud Datastore, puis "fait écho" au message de l'utilisateur en répondant avec le même contenu. Une fois que vous disposez d'un bot de base et d'une infrastructure de journalisation, vous pouvez les développer pour créer une implémentation complète du transfert d'agent en direct lors des étapes ultérieures.
Télécharger le code de démarrage
Dans un terminal, clonez le code de démarrage du transfert d'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émarrage 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 des données dans Cloud Datastore. Vous n'avez pas besoin de comprendre le fonctionnement de ce fichier. Notez simplement les méthodes disponibles et ce qu'elles font. - resources : contient la clé de votre compte de service dans 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 du contenu. - views : ce répertoire contient les fichiers de modèle EJS pour les éléments d'interface utilisateur. Il contiendra d'autres fichiers lors des é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. Faites-le 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. Ensuite, configurez 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 enregistre les fils de discussion dans Cloud Datastore.
Configurez votre agent.
Accédez à la page des paramètres de votre 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/.
Ensuite, sur la page "Informations sur l'agent", configurez vos types d'interaction principal et secondaire sur "Bot" et "Humain", respectivement.
Avoir une conversation avec le bot d'écho
Ouvrez votre agent dans la console pour les développeurs. La page Vue d'ensemble s'affiche. Elle vous permet d'examiner les détails de 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 l'interface conversationnelle de votre agent.
Interagissez avec l'agent en lui envoyant quelques messages. La surface conversationnelle ne fait que copier ce que vous dites, ce qui n'est pas très utile pour l'expérience utilisateur. Si seulement il y avait un moyen de parler à une vraie personne !
3. Participer à la conversation
Examinons maintenant la conversation du point de vue de votre agent en direct. En tant qu'agent en direct, vous devez connaître certaines informations sur la conversation avant de la rejoindre, comme son ID. Il est également utile de savoir si l'utilisateur a demandé à parler à un agent réel. Dans 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. Examinons ce CRM pour voir quelles conversations peuvent 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 liste contenant le fil de discussion que vous avez commencé à l'étape précédente. L'état de la conversation est actuellement "Gérée par le bot", car le bot d'écho sert de représentant pour notre agent dans cette conversation.
Le bouton Rejoindre la discussion s'affiche, mais n'est pas encore associé à une action. De plus, cette interface ne vous permet pas de savoir si l'utilisateur souhaite parler à un agent réel.
Business Messages fournit un événement de demande d'agent réel qui indique quand l'utilisateur souhaite parler à un agent réel. 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 pour un agent en direct et mettre à jour l'état du fil de 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 conversation actuel et mettre à jour son état sur QUEUED_THREAD_STATE.
Si vous ne savez pas quoi faire, jetez un coup d'œil aux solutions. Le code de démarrage inclut un répertoire solutions à chaque étape où vous devez écrire du code. Ces répertoires contiennent une copie de l'intégralité de l'application 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 à trois points dans la conversation sur votre appareil mobile pour demander à parler à un agent réel.
Si vous revenez au CRM, vous devriez voir une note dans le fil de discussion indiquant "Agent en direct demandé". Cet utilisateur a besoin de l'aide d'une personne. Vous devez implémenter le point de terminaison joinConversation pour que le bouton fonctionne.
Recherchez l'autre commentaire TODO dans la méthode stub 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 modifier l'état du thread, cette fois en le définissant sur LIVE_AGENT_THREAD_STATE. De plus, 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 décrits 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. 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 et cliquez sur le bouton Rejoindre le chat. 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 conversation.
Félicitations ! À l'étape suivante, nous verrons 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 de messages 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 qui viennent d'être 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 êtes redirigé vers 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 des messages appelle régulièrement ce point de terminaison pour afficher les derniers messages./sendMessage: envoie un message de l'agent au client. La page "Messages" appelle cette fonction lorsque vous cliquez sur "Envoyer". Elle n'est pas encore implémentée.
Examinons 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 à partir du robot d'écho. 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 vous-même le point de terminaison /sendMessage. Vous pouvez utiliser la méthode storeAndSendResponse existante pour effectuer la majeure partie du travail. L'important est de ne pas oublier de définir le représentant approprié.
Une fois que tout fonctionne, redéployez l'application et revenez à votre conversation dans le CRM. Vos messages s'affichent désormais dans l'historique des discussions. 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
Après avoir répondu aux questions de l'utilisateur, vous pouvez quitter la conversation et le laisser à nouveau échanger avec le 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 et revenez à votre fil de discussion. Un lien Fermer et quitter la conversation est désormais disponible en bas du fil de discussion. Ce lien ne fonctionne pas encore, car le point de terminaison leaveConversation n'est pas implémenté.
Examinez le fichier index.js. Un commentaire TODO 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 implémenter cela, vous devez rassembler tout ce que vous avez appris jusqu'à présent dans cet atelier de programmation. Ce point de terminaison doit effectuer les opérations suivantes :
- Mettez à jour le thread sur
BOT_THREAD_STATE. - Envoyez un événement
REPRESENTATIVE_LEFT. - Envoyez un message dans la conversation pour indiquer à l'utilisateur qu'il parle au bot d'écho. Utilisez la méthode
storeAndSendResponse. N'oubliez pas que le représentant est redevenuBOT.
La dernière étape clarifie l'état de la conversation pour l'utilisateur. L'utilisateur voit un événement lorsqu'un agent quitte le chat, mais il ne sait pas forcément qu'il parle à nouveau au bot d'écho. En envoyant un message directement depuis le bot, vous réduisez la confusion des utilisateurs et améliorez leur expérience.
Maintenant que le bot s'en occupe, votre agent peut rejoindre une autre conversation. N'hésitez pas à tester l'exemple de code et le CRM autant que vous le souhaitez. Testez différentes idées pour l'expérience de transfert vers un agent en direct de votre entreprise et voyez ce que vous obtenez.
6. Conclusion
Félicitations ! Vous avez terminé l'atelier de programmation sur le transfert à un agent en direct.
Vous avez créé un agent capable de gérer les transferts vers un agent en direct de bout en bout. Vous avez également appris à suivre l'état de la conversation avec Cloud Datastore.
Grâce au transfert vers un agent, vous pouvez laisser votre bot gérer les demandes courantes, tandis que vos agents en direct s'occupent des 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 qu'ils recommandent votre entreprise à leurs amis.
Et ensuite ?
Découvrez quelques-uns de ces ateliers de programmation :
Complément d'informations
- Consultez les principes de base du transfert d'un bot à un agent en direct dans le guide sur le transfert d'un bot à un agent en direct.
- Mettez à niveau votre bot d'écho en bot de questions fréquentes à l'aide du guide Dialogflow.