Transfert d'agent en direct

1. Introduction

53003251caaf2be5.png 6717b85f57d859d3.png

Dernière mise à jour:23/08/2021

Transfert d'agent en direct avec Business Messages

La fonctionnalité de transfert d'agents en direct de Business Messages permet à votre agent de démarrer une conversation en tant que bot et de faire passer la conversation en cours à un agent (représentant humain). Votre bot peut gérer les questions courantes, comme les horaires d'ouverture, tandis que votre agent peut offrir une expérience personnalisée avec plus d'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 meilleure satisfaction client.

Cet atelier de programmation vous explique comment tirer pleinement parti de 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 afin de pouvoir envoyer et recevoir en direct des événements de transfert d'agent. Pour tester votre création, vous utiliserez une interface utilisateur de base fournie par le code de démarrage.

49aca3df6b196c50.png

Points abordés

  • Comment stocker et gérer l'état d'une conversation
  • Utiliser Business Messages pour envoyer en direct des événements de transfert d'agent
  • Configurer un webhook et une interface utilisateur de base pour rejoindre des conversations en tant qu'agent
  • Bonnes pratiques d'utilisation de l'API Business Messages.

Cet atelier de programmation explique comment utiliser l'API Business Messages pour implémenter le transfert d'agents en direct. Vous pouvez lire le code de démarrage pour chaque étape, mais il vous suffit d'implémenter le code lié à Business Messages.

Ce dont vous aurez besoin

  • Un agent Business Messages, y compris la clé de votre compte de service Vous pouvez créer un agent en suivant le guide Créer un agent.
  • Une configuration Cloud Datastore opérationnelle associée au projet GCP de votre agent. Vous pouvez suivre le guide de démarrage rapide de Cloud Datastore pour configurer cela. Vous n'avez pas besoin de savoir 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 (version 5 ou ultérieure) ou iOS pour tester l'expérience utilisateur
  • Expérience en programmation d'applications Web Vous allez écrire une petite quantité de code JavaScript et devrez peut-être déboguer ce que vous écrivez.

2. Créer un bot echo

Au cours de cette étape, vous allez déployer un représentant de base, appelé "bot Echo". Ce bot reçoit les messages des utilisateurs, les consigne dans un fil de conversation dans Cloud Datastore, puis "échoue" le message de l'utilisateur en répondant avec le même contenu. Une fois que vous disposez d'une infrastructure de base de bot et de journalisation, vous pouvez l'ajouter pour créer une implémentation complète de transfert d'agent, lors des étapes suivantes.

Télécharger le code de démarrage

Dans un terminal, clonez le code de démarrage du transfert d'agent en direct dans 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 avec laquelle vous allez travailler tout au long de cet 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 et configure le serveur.
  • libs: ce répertoire contient datastore_util.js, qui contient des méthodes pratiques permettant de lire et d'écrire à partir de Cloud Datastore. Vous n'avez pas besoin de comprendre comment fonctionne ce fichier. Notez simplement les méthodes disponibles et leur fonction.
  • resources: ce fichier contient la clé de votre compte de service sous la forme d'un fichier nommé credentials.json.
  • routes: le fichier index.js contient le webhook et toutes ses méthodes d'assistance. Il s'agit du fichier principal que vous allez utiliser et auquel vous allez ajouter des données.
  • views: ce répertoire contient les fichiers de modèle EJS pour les éléments d'interface utilisateur. Il contiendra d'autres fichiers aux é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. Effectuez cette 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. 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 enregistrer 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 développeur 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 d'informations sur l'agent, configurez vos types d'interaction principale et secondaire sur "Bot" et "Humanité" respectivement.

db0cca5b74f999ad.png

Avoir une conversation avec le bot echo

Ouvrez votre agent dans la console développeur. La page Overview (Aperçu) s'affiche. Elle vous permet de consulter les détails de votre agent. Copiez l'URL de test de l'agent qui correspond à votre appareil mobile de test. Utilisez cette URL sur votre appareil mobile pour lancer la surface de conversation de votre agent.

536313929e5c0b3e.png

Interagissez avec l'agent en lui envoyant quelques messages. La surface de conversation ne copie que ce que vous dites. L'expérience utilisateur n'est pas très utile. Si seulement il existait un moyen de parler à une personne réelle !

3. Participer à la conversation

Passons maintenant à la conversation du point de vue de votre agent. En tant qu'agent, vous devez connaître certains points de la conversation avant de la rejoindre, comme son ID. Il est également utile de savoir si l'utilisateur a demandé à parler à un agent. Au cours de cette étape, vous allez utiliser une page CRM (gestion de la relation client) 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 threads de conversation en cours pour l'agent. Examinons ce CRM pour voir quelles conversations peuvent nécessiter l'attention d'un agent.

Accédez au répertoire step-2 et déployez à nouveau l'application comme vous l'avez fait à l'étape précédente.

Lorsque vous déployez l'application, une URL cible s'affiche. Accédez à cette URL dans un navigateur pour consulter une fiche contenant le thread de conversation 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 echo agit en tant que représentant de notre agent dans cette conversation.

8f624e9befb8e827.png

Le bouton Rejoindre le chat s'affiche, mais n'est encore associé à aucune action. Cette interface ne vous permet pas non plus de savoir si l'utilisateur souhaite parler à un agent.

Business Messages fournit un événement demandé par un agent en direct qui indique quand l'utilisateur souhaite parler à un agent. Vous devez suivre cet état pour le répertorier dans l'interface utilisateur.

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 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 dans libs/datastore_utils.js pour charger le fil de conversation actuel et définir son état sur QUEUED_THREAD_STATE.

Si vous ne savez pas quoi faire, jetez un œil aux solutions. Le code de démarrage inclut un répertoire solutions à chaque étape où vous devez compléter du code. Ces répertoires contiennent une copie de l'application complète 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 dans la conversation de votre appareil mobile pour demander l'intervention d'un agent.

e58d2b77e9c64492.png

Si vous revenez au CRM, vous devriez voir une note "Demande d'agent en direct" dans votre fil de conversation. Cet utilisateur a besoin de l'aide d'un humain ! Vous devez implémenter le point de terminaison joinConversation pour que le bouton fonctionne.

Recherchez l'autre commentaire TODO dans la méthode bouchon 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-ci 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 décrits dans le tableau suivant:

fieldName

Indice

parent

Définissez cette valeur sur "conversations/{conversationId}".

eventId

Générez votre propre ID aléatoire pour l'événement.

auth

Utilisez la méthode initCredentials fournie.

resource

Il s'agit du corps de l'événement lui-même. Vous devez définir le type d'événement et la valeur représentative.

Consultez la page de référence de la méthode "create" ou la page de référence des événements pour obtenir de l'aide.

Une fois l'implémentation terminée, redéployez l'application, puis cliquez sur le bouton Rejoindre la discussion. Une 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, une note indiquant que votre agent a rejoint le chat s'affiche dans le chat.

Félicitations ! À l'étape suivante, nous verrons comment faire en sorte que votre agent s'adresse à l'utilisateur.

4. Échangez en tant qu'agent

Maintenant que vous avez rejoint la conversation, il est temps d'envoyer des messages en tant qu'agent.

Accédez au répertoire step-3 et redéployez l'application. Dans le CRM, cliquez sur le fil de conversation de l'étape précédente. Vous devriez maintenant voir une interface de chat de base. Vous pouvez alors voir les messages de l'utilisateur en temps réel.

46dd083f08f43961.png

Toutefois, l'envoi d'un message en tant qu'agent n'est toujours pas implémenté. Vous devez effectuer cette opération à cette étape.

Ouvrez le fichier routes/index.js et examinez les trois points de terminaison que vous venez d'ajouter:

  • /messages: récupère le fichier de vue messages.ejs et l'affiche dans le navigateur. Lorsque vous cliquez sur un fil de conversation dans l'index, vous accédez à l'une de ces pages.
  • /retrieveMessages: récupère le contenu d'un message dans 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 du représentant de l'agent à l'utilisateur. La page des messages appelle cela lorsque vous cliquez sur "Envoyer". Elle n'est actuellement pas implémentée.

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 à partir du bot echo. La méthode commence par stocker les données des messages entrants dans l'objet Cloud Datastore de la conversation. Ensuite, il envoie le message de réponse. Examinez attentivement l'objet Message qu'il crée, en particulier son type représentatif.

À présent, implémentez vous-même le point de terminaison /sendMessage. Vous pouvez utiliser la méthode storeAndSendResponse existante pour effectuer la majeure partie du travail. N'oubliez pas 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 apparaissent désormais dans l'historique des discussions. Les messages de votre agent s'affichent également sur l'appareil mobile de test.

49aca3df6b196c50.png

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 aidé l'utilisateur à répondre à ses questions, vous pouvez quitter la conversation et laisser l'utilisateur parler à nouveau au bot. Dans Business Messages, cette modification est signalée par un événement REPRESENTATIVE_LEFT.

Accédez au répertoire step-4, redéployez l'application, puis revenez à votre fil de conversation. Un lien Fermer et quitter la conversation s'affiche désormais au bas du fil de discussion. Ce lien ne fonctionne pas encore, car le point de terminaison leaveConversation n'est pas implémenté.

ef4ad8107c3fff2.png

Examinez le fichier index.js. Un commentaire TODO vous demande de 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 l'implémenter, vous devez rassembler tout ce que vous avez appris dans cet atelier de programmation. Ce point de terminaison doit:

  • Mettez à jour le thread vers BOT_THREAD_STATE.
  • Envoyez un événement REPRESENTATIVE_LEFT.
  • Envoyez un message dans la conversation pour indiquer à l'utilisateur qu'il s'adresse au bot echo. Utilisez la méthode storeAndSendResponse. N'oubliez pas que le représentant est à nouveau BOT.

La dernière étape permet de clarifier l'état de la conversation pour l'utilisateur. L'utilisateur voit un événement lorsqu'un représentant quitte le chat, mais il ne saura pas nécessairement qu'il parle à nouveau avec le bot d'écho. En envoyant un message directement à partir du bot, vous réduisez la confusion pour les utilisateurs et améliorez l'expérience utilisateur.

Maintenant que le bot s'occupe de tout, votre agent est libre de participer à une autre conversation. Essayez autant que vous le souhaitez avec l'exemple de code et le CRM. Testez différentes idées pour améliorer l'expérience de transfert d'agent dans votre entreprise et voyez ce que vous en pensez.

6. Conclusion

Félicitations ! Vous avez terminé l'atelier de programmation sur le transfert d'agents en direct.

Vous avez créé un agent capable de gérer les transferts d'agents réels du début à la fin. Vous avez également appris une façon de suivre l'état de la conversation avec Cloud Datastore.

Grâce au transfert d'agent en direct, vous laissez les requêtes courantes à votre bot pendant que vos agents humains traitent des demandes plus complexes. Vos utilisateurs seront plus satisfaits de la nouvelle expérience personnalisée et utile, ce qui augmentera la probabilité qu'ils reviennent et recommandent votre entreprise à leurs amis.

Et ensuite ?

Découvrez certains des ateliers de programmation suivants:

Complément d'informations

Documents de référence