1. Introduction
Dernière mise à jour : 11/05/2022
Bienvenue dans Business Messages !
Cet atelier de programmation est une introduction à l'intégration de Messages d'entreprise, qui permet aux clients de contacter les entreprises que vous gérez via la recherche Google et Maps. Vous êtes peut-être une entreprise qui souhaite s'intégrer directement à Business Messages, ou vous travaillez peut-être chez un fournisseur de logiciels indépendant qui crée des solutions de messagerie pour les entreprises avec lesquelles vous travaillez. Vous êtes peut-être aussi tombé sur Business Messages par hasard et vous souhaitez tester la plate-forme.
Quelle que soit la raison qui vous a amené ici, cet atelier de programmation est un excellent moyen de vous lancer. À la fin de ce tutoriel, vous aurez créé votre premier agent numérique avec lequel les utilisateurs pourront interagir. Lorsque vous serez prêt à lancer Business Messages après avoir apporté quelques améliorations, vous pourrez toucher des millions de clients.
Qu'est-ce qu'un bon agent numérique ?
Business Messages est une surface conversationnelle qui offre une expérience semblable à celle d'une application sur les appareils mobiles. Elle permet aux consommateurs de contacter des entreprises sans installer d'application supplémentaire. Un agent numérique est l'élément logique avec lequel vos clients interagissent. La logique est gérée par une application Web déployée dans le cloud ou dans votre infrastructure. La façon dont vous répondez à l'utilisateur vous appartient entièrement. Les meilleurs agents fournissent du contexte pour définir les attentes, maintenir l'engagement des clients et fournir des fonctionnalités pour répondre aux besoins des utilisateurs.
Objectifs de l'atelier
Dans cet atelier de programmation, vous allez créer un agent numérique sur Business Messages pour une entreprise fictive appelée Bonjour Meal. Cet agent numérique répondra à quelques questions simples comme "À quelle heure fermez-vous ?" ou "Puis-je acheter en ligne ?".
Dans cet atelier de programmation, vos utilisateurs pourront acheter des articles via l'agent numérique, être redirigés vers un processeur de paiement pour régler leurs achats, puis planifier la récupération de leurs articles fictifs en magasin.
À l'issue de cet atelier de programmation, votre application offrira ces fonctionnalités :
- Répondre à des questions à l'aide d'un chip de suggestion
- Guider l'utilisateur pour qu'il pose des questions auxquelles votre agent numérique peut répondre
- Fournir des fonctionnalités conversationnelles enrichies pour maintenir l'engagement de l'utilisateur dans la conversation
Points abordés
- Déployer une application Web sur App Engine sur Google Cloud Platform Vous pouvez également utiliser ngrok pour tester publiquement votre application locale.
- Configurer votre compte Business Messages avec un webhook d'application Web pour recevoir les messages des utilisateurs
- Envoyer des fonctionnalités enrichies telles que des cartes, des carrousels et des suggestions conversationnelles avec l'API Business Messages
- Comment les messages professionnels envoient vos messages
Cet atelier de programmation porte sur la création de votre premier agent numérique.
Prérequis
- Créer un compte de développeur Business Communications sans frais
- Consultez notre site pour les développeurs pour connaître la procédure à suivre
- Un appareil Android équipé de la version 5 ou ultérieure OU un appareil iOS disposant de l'application Google Maps
- Une expérience dans la programmation d'applications Web
- Une connexion Internet
2. Configuration
Activer les API
Pour cet atelier de programmation, étant donné que nous allons travailler avec une application Django, nous allons nous appuyer sur l'API Cloud Build pour déployer l'application sur App Engine. En revanche, si vous utilisez ngrok, vous n'avez pas besoin d'activer l'API Cloud Build.
Pour activer l'API Cloud Build :
- Ouvrez l'API Cloud Build dans la console Google Cloud.
- Cliquez sur Activer.
Créer un compte de service
Pour accéder aux API Business Communications et Business Messages, vous devez créer un compte de service. Suivez les étapes de la documentation pour créer un compte de service dans la Business Communications Developer Console.
Déployer le code de démarrage Django Python EchoBot
Dans un terminal, clonez le bot exemple Django Echo vers le répertoire de travail de votre projet à l'aide de la commande suivante :
$ git clone https://github.com/google-business-communications/bm-bonjour-meal-django-starter-code
Copiez le fichier d'identifiants JSON créé pour le compte de service dans le dossier des ressources de l'exemple et renommez les identifiants "bm-agent-service-account-credentials.json".
bm-bonjour-meal-django-starter-code/bonjourmeal-codelab/step-1/resources/bm-agent-service-account-credentials.json
Dans un terminal, accédez au répertoire de l'étape 1 de l'exemple.
Exécutez les commandes suivantes dans un terminal pour déployer l'exemple :
$ gcloud config set project PROJECT_ID*
$ gcloud app create
$ gcloud app deploy
- "PROJECT_ID" est l'ID du projet que vous avez utilisé pour vous inscrire auprès des API.
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 peut présenter certaines des fonctionnalités enrichies disponibles dans l'interface conversationnelle.
Configurer votre webhook
Maintenant que votre service est déployé, vous allez utiliser l'URL de l'application pour définir l'URL de votre webhook sur la page Paramètres du compte de la Business Communications Developer Console.
L'URL du webhook sera l'URL de l'application + "/callback/". Par exemple, il peut s'agir de https://PROJECT_ID.appspot.com/callback/.
Accédez à la page Paramètres de compte de la Business Communications Console. En haut à droite, sous la barre de navigation, vous devriez voir le nom de votre projet GCP. Si un menu déroulant s'affiche, veillez à sélectionner votre projet GCP.
Renseignez les informations du contact technique, puis mettez à jour le webhook avec l'URL du webhook de votre application déployée.
Cliquez sur Enregistrer à côté de la référence de votre projet GCP.
3. Créer votre premier agent
Utiliser la console pour les développeurs Business Communications
Dans la console Business Communications, cliquez sur le logo en haut à gauche pour revenir au tableau de bord de la console, puis cliquez sur Créer un agent. Vous créez une marque en même temps que votre agent. Sélectionnez Messages d'entreprise pour Type d'agent et assurez-vous que les informations sur le partenaire sont correctes.
Dans Marque, saisissez le nom de la marque que vous créez.La marque correspond à l'entreprise avec laquelle vous travaillez et avec laquelle les consommateurs peuvent interagir de manière conversationnelle avec l'agent. Dans le champ Nom de l'agent, indiquez ce que vous souhaitez que les utilisateurs voient dans la conversation Business Messages. Dans le cas de la société fictive Bonjour Meal, Bonjour Rail est la compagnie ferroviaire qui gère les restaurants Bonjour Meal. Je vais donc spécifier "Bonjour Rail" comme marque et "Bonjour Meal" comme agent.
L'agent est l'entité conversationnelle qui représente la marque.
Cliquez sur Create agent (Créer un agent) et laissez la console faire sa magie. Cette requête prend quelques secondes, car elle envoie plusieurs requêtes à l'API Business Communications pour créer la marque et l'agent. Vous pouvez utiliser directement l'API Business Communications pour créer un agent et une marque. Consultez la documentation pour voir à quoi ressemblerait une requête curl pour effectuer les mêmes actions que la console.
Avoir votre première conversation
Ouvrez l'agent que vous venez de créer. La page Présentation s'affiche et vous permet de commencer à examiner les détails de votre agent. Consultez les URL de test de l'agent. Elles permettent d'appeler l'interface conversationnelle sur votre appareil.
Vous pouvez copier l'URL de test en cliquant sur l'un des chips. Bien sûr, copiez l'URL de test pour l'appareil dont vous disposez. Envoyez ce message copié à votre appareil de la manière de votre choix.
Une fois sur votre appareil mobile, appuyez sur le lien pour appeler le lanceur d'agent Business Messages avec l'URL de test de votre agent préremplie.
Appuyez sur Lancer pour appeler la surface conversationnelle de votre agent.
Interagissez avec l'agent et découvrez ce qu'il peut faire. Dans la plupart des cas, l'interface conversationnelle ne fera qu'afficher vos messages. Envoyez-lui un message comme "Bonjour, le monde !". Vous verrez que l'agent vous renverra le même message.
L'application déployée contient également une logique permettant de présenter les fonctionnalités enrichies disponibles dans Business Messages.
- Si vous envoyez "carte", vous déclenchez une carte enrichie.
- Si vous envoyez des "chips", vous invoquez des chips de suggestion.
- Si vous envoyez "carrousel", vous déclenchez un carrousel de cartes enrichies.
Félicitations ! Il s'agit de la première conversation de votre agent, avec vous !
Chacune de ces fonctionnalités enrichies peut être utilisée pour fournir un meilleur contexte à la personne qui communique avec votre agent. Envoyez des composants graphiques dans des cartes enrichies pour mieux communiquer vos idées ou utilisez des chips de suggestion pour guider la conversation.
Mettre à jour le message de bienvenue et utiliser les chips de conversation
Entraînons-nous à utiliser la Developer Console, à modifier le message de bienvenue de l'agent et à utiliser les chips de suggestion pour aider l'utilisateur à communiquer.
Accédez à la page Présentation de l'agent et sélectionnez Informations sur l'agent. Faites défiler la page jusqu'à la section "Message de bienvenue et amorces de conversation".
Modifiez le message de bienvenue (champ de saisie jaune) pour qu'il se lise comme suit :
Bienvenue dans l'agent de démarrage Bonjour Meal. Je peux répéter vos messages et vous montrer certaines des fonctionnalités avancées disponibles sur la plate-forme. Essayez ces suggestions !
Cliquez sur + Ajouter une suggestion de conversation, comme indiqué dans l'encadré violet de l'image ci-dessus, pour ajouter des suggestions de conversation permettant d'appeler des chips de suggestions, des carrousels et des fiches. Les amorces de conversation que vous ajoutez doivent comporter un composant de texte et un composant postbackData. Le texte est ce qui s'affiche pour l'utilisateur, tandis que les données postBack sont ce qui est envoyé au webhook de votre agent. Le webhook analyse les données de postback et envoie la réponse appropriée à l'utilisateur. 
Les informations sur l'agent dans la console se présentent comme suit après la modification :
Sur la droite de la console, vous pouvez voir un aperçu de l'apparence de l'agent. Avez-vous remarqué que le message de bienvenue reflète ce que vous venez de modifier et les chips de suggestions qui se trouvent en dessous ?
C'est un excellent outil pour vous faire une idée de l'expérience utilisateur. Vous pouvez l'utiliser lorsque vous créez votre agent et planifiez les parcours utilisateur que vous souhaitez prendre en charge.
Malheureusement, nous ne pourrons pas voir ces modifications immédiatement dans la conversation, car les données précédentes sont mises en cache dans l'infrastructure Business Messages. Le cache est vidé environ toutes les deux heures. Vous devriez donc pouvoir réessayer demain.
En attendant, voyons comment tout cela fonctionne.
4. Analyser le code de démarrage
Vue d'ensemble du code source
Le code de démarrage que vous avez déployé renvoie les messages aux utilisateurs et peut présenter une carte enrichie, un carrousel ou des chips de suggestion. Examinons le code source plus en détail pour comprendre comment cela fonctionne. Nous déterminerons ensuite les modifications à apporter.
Le code de démarrage est un projet Django. Dans une prochaine partie de cette série d'ateliers de programmation, nous utiliserons Google Datastore pour conserver les données telles que les paniers et les conversations associées. Ne vous inquiétez pas si vous n'avez jamais utilisé Django. C'est assez simple, et à la fin de cet atelier de programmation, vous aurez appris comment il fonctionne.
Globalement, Django route les URL vers les vues, et la logique de vue produit un modèle qui s'affiche dans le navigateur. Examinons le fichier urls.py du projet.
bm-django-echo-bot/bmcodelab/urls.py [lignes 31 à 37]
from django.urls import include, path
import bopis.views as bopis_views
urlpatterns = [
path('', bopis_views.landing_placeholder),
path('callback/', bopis_views.callback),
]
Deux routes sont définies ici. Django peut donc exécuter une logique si ces deux URL sont reconnues. Étant donné que l'URL du projet est https://PROJECT_ID.appspot.com/, les routes que le projet connaît sont les suivantes :
- https://PROJECT_ID.appspot.com/
- https://PROJECT_ID.appspot.com/callback/
Les deux routes d'URL font référence à bopis_views, qui provient de bopis/views.py. Examinons le contenu de ce fichier. Pour commencer, comprenons d'abord bopis_views.landing_placeholder.
bm-django-echo-bot/bonjourmeal-codelab/step-1/bopis/views.py [Lignes 302-309]
...
def landing_placeholder(request):
return HttpResponse("<h1>Welcome to the Bonjour Meal Codelab</h1>
<br/><br/>
To message your Bonjour Meal agent, go to the Developer Console and retrieve
the Test URLs for the agent you have created as described in the codelab
<a href='https://codelabs.developers.google.com/codelabs/'>here</a>.")
...
Cette partie de la logique est exécutée par votre serveur Web lorsqu'il reçoit une requête Web pointant vers la racine du projet. Rien de bien compliqué ici : nous renvoyons simplement une HTTPResponse contenant du code HTML au navigateur qui a effectué la requête. Vous pouvez donc ouvrir l'URL racine du projet, mais il n'y a pas grand-chose à faire, car elle vous ramène à cet atelier de programmation.
L'autre URL redirige vers une fonction appelée callback, également dans bopis/views.py. Examinons cette fonction.
bm-django-echo-bot/bopis/views.py [Lignes 60 à 101]
...
def callback(request):
"""
Callback URL. Processes messages sent from user.
"""
if request.method == "POST":
request_data = request.body.decode('utf8').replace("'", '"')
request_body = json.loads(request_data)
print('request_body: %s', request_body)
# Extract the conversation id and message text
conversation_id = request_body.get('conversationId')
print('conversation_id: %s', conversation_id)
# Check that the message and text body exist
if 'message' in request_body and 'text' in request_body['message']:
message = request_body['message']['text']
print('message: %s', message)
route_message(message, conversation_id)
elif 'suggestionResponse' in request_body:
message = request_body['suggestionResponse']['postbackData']
print('message: %s', message)
route_message(message, conversation_id)
elif 'userStatus' in request_body:
if 'isTyping' in request_body['userStatus']:
print('User is typing')
elif 'requestedLiveAgent' in request_body['userStatus']:
print('User requested transfer to live agent')
return HttpResponse("Response.")
elif request.method == "GET":
return HttpResponse("This webhook expects a POST request.")
...
La logique analyse le corps de la requête pour trouver un message ou une suggestionResponse, transmet ces informations à une fonction appelée route_message, puis renvoie une HttpResponse à l'infrastructure Business Messages pour accuser réception du message.
Il s'agit d'une fonction importante. Cette partie de la logique correspond au webhook de votre application Web, qui reçoit les messages des utilisateurs interagissant avec votre agent. Vous pouvez étendre le webhook pour envoyer des messages à un outil d'automatisation tel que Dialogflow afin de comprendre ce que dit un utilisateur et de générer une réponse à partir de cette inférence. Vous pouvez également transférer le message pour que l'utilisateur puisse contacter un agent en direct. Consultez le diagramme suivant :
Business Messages envoie le contenu du message sous forme de charge utile JSON à votre webhook, où il est transmis à un agent humain ou à une logique permettant de répondre en tant que bot. Dans notre cas, ce mécanisme de routage est route_message. Voyons cela.
bm-django-echo-bot/bopis/views.py [Lignes 105 à 122]
...
def route_message(message, conversation_id):
'''
Routes the message received from the user to create a response.
Args:
message (str): The message text received from the user.
conversation_id (str): The unique id for this user and agent.
'''
normalized_message = message.lower()
if normalized_message == CMD_RICH_CARD:
send_rich_card(conversation_id)
elif normalized_message == CMD_CAROUSEL_CARD:
send_carousel(conversation_id)
elif normalized_message == CMD_SUGGESTIONS:
send_message_with_suggestions(conversation_id)
else:
echo_message(message, conversation_id)
...
Cette partie de la logique commence à examiner le message reçu par l'utilisateur. Tout d'abord, le message est normalisé en mettant tous les caractères en minuscules. Une fois normalisé, il vérifie si le message correspond à l'une des constantes définies en haut du fichier.
bm-django-echo-bot/bopis/views.py [Lignes 40 à 42]
...
# Set of commands the bot understands
CMD_RICH_CARD = 'card'
CMD_CAROUSEL_CARD = 'carousel'
CMD_SUGGESTIONS = 'chips'
...
En d'autres termes, le bot analyse les messages qui contiennent spécifiquement l'une des chaînes que nous avons placées dans le postback_data des amorces de conversation de l'étape précédente de cet atelier de programmation. Si aucune de ces chaînes ne s'affiche, le message est simplement transmis à une fonction appelée echo_message, qui, comme vous pouvez l'imaginer, renvoie les messages.
Envoyer des messages
Vous devriez maintenant avoir une idée de la façon dont les messages sont reçus par l'application Web. Tout est géré par le webhook.
Mais comment l'application envoie-t-elle un message sortant à un utilisateur à l'aide de Business Messages ?
Lorsque votre infrastructure répond à l'utilisateur, vous envoyez la réponse à l'API Business Messages, qui transmet le message à l'utilisateur.
L'API Business Messages dispose de bibliothèques en Python, Node.js et Java. Nous disposons également d'une API REST à laquelle vous pouvez envoyer des requêtes directement si votre infrastructure n'est pas dans une langue pour laquelle nous avons une bibliothèque. Consultez Envoyer des messages pour découvrir comment utiliser cURL afin d'envoyer un message à un ID de conversation spécifique.
Pour cet atelier de programmation, nous nous concentrerons sur l'utilisation de la bibliothèque cliente Python déjà intégrée au code de démarrage Bonjour Meal déployé sur App Engine dans votre projet GCP ou exécuté localement via ngrok.
Examinons la fonction echo_message et voyons comment interagir avec l'API pour envoyer le message à Business Messages.
bm-django-echo-bot/bopis/views.py [Lignes 199-212]
...
def echo_message(message, conversation_id):
'''
Sends the message received from the user back to the user.
Args:
message (str): The message text received from the user.
conversation_id (str): The unique id for this user and agent.
'''
message_obj = BusinessMessagesMessage(
messageId=str(uuid.uuid4().int),
representative=BOT_REPRESENTATIVE,
text=message)
send_message(message_obj, conversation_id)
...
Dans cette fonction, un BusinessMessagesMessage est instancié avec la variable de message transmise à la fonction echo_message. Une fois instancié, l'objet est ensuite transmis à send_message avec l'ID de conversation.
bm-django-echo-bot/bopis/views.py [Lignes 214-236]
...
def send_message(message, conversation_id):
'''
Posts a message to the Business Messages API, first sending
a typing indicator event and sending a stop typing event after
the message has been sent.
Args:
message (obj): The message object payload to send to the user.
conversation_id (str): The unique id for this user and agent.
'''
credentials = ServiceAccountCredentials.from_json_keyfile_name(
SERVICE_ACCOUNT_LOCATION,
scopes=['https://www.googleapis.com/auth/businessmessages'])
client = bm_client.BusinessmessagesV1(credentials=credentials)
# Create the message request
create_request = BusinessmessagesConversationsMessagesCreateRequest(
businessMessagesMessage=message,
parent='conversations/' + conversation_id)
bm_client.BusinessmessagesV1.ConversationsMessagesService(
client=client).Create(request=create_request)
...
La fonction send_message utilise les identifiants de votre compte de service pour vérifier que vous pouvez envoyer des messages à cette conversation, instancie un client Business Messages et crée une requête pour envoyer le message au conversation ID donné.
Les fonctionnalités enrichies utilisent également cette fonction send_message, mais les messages qu'elles créent sont spécifiques aux cartes enrichies, aux carrousels et aux chips de suggestion. Les carrousels et les cartes enrichies peuvent inclure des éléments graphiques, tandis que les chips de suggestion ont postback_data pour que la logique de rappel puisse les analyser de manière appropriée.
Maintenant que nous avons vu comment envoyer un message, examinons comment l'exemple envoie des cartes enrichies, des carrousels et des chips de suggestion. Dans la section suivante, nous allons modifier le code source pour envoyer des messages avec certaines de ces fonctionnalités enrichies.
Lorsque vous serez prêt, personnalisons l'agent Bonjour Meal.
5. Personnaliser votre agent
Si vous avez suivi l'atelier de programmation jusqu'à présent, vous devriez voir votre bel agent.
Bon, ce n'est pas si beau que ça. En fait, c'est plutôt vide et ça ne représente pas vraiment notre entreprise. Heureusement, nous avons des connaissances de base sur le code qui sous-tend l'agent et nous disposons des outils nécessaires pour le personnaliser à notre guise.
Dans la suite de cet atelier de programmation, nous allons étendre l'agent avec les éléments suivants :
- Incluez un logo réel.
- Message de bienvenue amélioré
- Fournir des informations sur les horaires d'ouverture
- Indiquer à l'utilisateur que l'achat d'articles en ligne sera bientôt disponible
- Utilisation de chips de suggestions conversationnelles pour faciliter la conversation
Nous allons utiliser la console Business Communications pour nous aider à mettre à jour le logo et le message de bienvenue, mais vous avez toujours la possibilité d'utiliser directement les API Business Communications pour faire de même. Nous devrons ensuite mettre à jour le code source pour envoyer les messages appropriés afin de fournir des informations sur les horaires d'ouverture et indiquer que Bonjour Meal proposera bientôt une fonctionnalité d'achat en ligne. Une fois cela fait, nous reviendrons à la Business Communications Console et créerons des chips de suggestions conversationnelles pour guider la conversation vers les expériences positives que l'agent numérique prend en charge.
Inclure un logo
Dans la console Business Communications, sélectionnez votre agent, puis accédez à Informations sur l'agent. Nous allons mettre à jour le logo de l'entreprise, comme indiqué en jaune ci-dessous.
Cliquez sur Importer, puis sélectionnez une image à importer ou à importer à partir d'une URL.
Consultez les consignes de conception de logo dans la documentation pour découvrir les bonnes pratiques que nous recommandons pour utiliser vos propres logos.
Importons le logo qui se trouve dans le code source que vous avez cloné au début de cet atelier de programmation. Vous le trouverez dans le répertoire ./assets/ du dépôt. Le fichier s'appelle "bonjour_meal-logo.png". Vous pouvez faire glisser le fichier dans la fenêtre modale du navigateur Web. Un outil de retouche simple s'affiche alors pour vous permettre de modifier la qualité et le recadrage de l'image. Ajustez la résolution et le recadrage de l'image pour qu'elle ne dépasse pas la limite de 50 Ko. Lorsque l'image vous convient, cliquez sur la coche dans le cercle bleu pour confirmer, puis sur Sélectionner en bas de la fenêtre modale.
Enfin, cliquez sur Enregistrer en haut à droite de la page Informations sur l'agent. Il faudra un certain temps pour que cette modification soit reflétée sur votre appareil, car les informations sur l'agent sont mises en cache sur nos serveurs. Elles devraient être visibles dans les deux heures suivant la modification.
Modifier le message de bienvenue
Nous avons déjà mis à jour le message de bienvenue plus tôt dans cet atelier de programmation. Recommençons, mais cette fois-ci, configurons un message de bienvenue plus adapté au parcours utilisateur de Bonjour Meal.
Dans la console Business Communications, sélectionnez votre agent et accédez à Informations sur l'agent. Faites défiler la page vers le bas jusqu'au champ de saisie Message de bienvenue, dans lequel vous pouvez modifier le message.
Sachant que nous allons ajouter des amorces de conversation, nous pouvons les mentionner dans notre message de bienvenue. Dans le champ de saisie, remplaçons le texte par le suivant :
"Bienvenue chez Bonjour Meal. Je suis un assistant qui peut répondre à vos questions sur Bonjour Meal. Essayez l'une des options suivantes."
Enfin, cliquez sur Enregistrer en haut à droite de la page Informations sur l'agent. Là encore, la prise en compte de ce changement peut prendre un certain temps en raison de notre mécanisme de mise en cache, qui nous permet de garantir la rapidité de nos services.
Fournir des informations sur les horaires d'ouverture
Pour fournir ces informations aux utilisateurs, nous leur enverrons un message personnalisé à l'aide de l'API Business Messages.
Vous vous souvenez peut-être que les messages sont analysés dans la fonction route_message de views.py. La fonction normalise d'abord la chaîne, puis vérifie si le message normalisé correspond à l'un des paramètres codés en dur. Pour simplifier, ajoutons une condition supplémentaire pour vérifier si le message normalisé est égal à une nouvelle constante que nous appellerons CMD_BUSINESS_HOURS_INQUIRY et qui contiendra la valeur "business-hours-inquiry". Si la condition renvoie la valeur "true", nous appelons une fonction nommée send_message_with_business_hours.
La fonction route_message se présentera désormais comme suit :
bm-django-echo-bot/bopis/views.py
...
def route_message(message, conversation_id):
'''
Routes the message received from the user to create a response.
Args:
message (str): The message text received from the user.
conversation_id (str): The unique id for this user and agent.
'''
normalized_message = message.lower()
if normalized_message == CMD_RICH_CARD:
send_rich_card(conversation_id)
elif normalized_message == CMD_CAROUSEL_CARD:
send_carousel(conversation_id)
elif normalized_message == CMD_SUGGESTIONS:
send_message_with_suggestions(conversation_id)
elif normalized_message == CMD_BUSINESS_HOURS_INQUIRY:
send_message_with_business_hours(conversation_id)
else:
echo_message(message, conversation_id)
...
Pour que le code fonctionne, nous devrons apporter deux autres modifications : la première consiste à définir CMD_BUSINESS_HOURS_INQUIRY avec les autres constantes, et la seconde à définir réellement la fonction send_message_with_business_hours et à envoyer un message à l'aide de l'API Business Messages.
Commençons par définir la constante en haut du fichier avec les autres déclarations de constantes :
bm-django-echo-bot/bopis/views.py
...
# Set of commands the bot understands
CMD_RICH_CARD = 'card'
CMD_CAROUSEL_CARD = 'carousel'
CMD_SUGGESTIONS = 'chips'
CMD_BUSINESS_HOURS_INQUIRY = 'business-hours-inquiry'
...
Définissons maintenant send_message_with_business_hours. Vous pouvez définir cette fonction n'importe où dans le fichier, en respectant la syntaxe Python appropriée. Comme cette fonction envoie simplement un message, tout comme echo_message, vous pouvez l'utiliser comme modèle pour définir cette fonction.
bm-django-echo-bot/bopis/views.py
...
def send_message_with_business_hours(conversation_id):
message = '''Thanks for contacting us! The hours for the store are:\n
MON 8am - 8pm\n
TUE 8am - 8pm\n
WED 8am - 8pm\n
THU 8am - 8pm\n
FRI 8am - 8pm\n
SAT 8am - 8pm\n
SUN 8am - 8pm
'''
message_obj = BusinessMessagesMessage(
messageId=str(uuid.uuid4().int),
representative=BOT_REPRESENTATIVE,
text=message)
send_message(message_obj, conversation_id)
...
Notre bot devrait alors être en mesure de répondre à l'utilisateur en lui indiquant ces horaires d'ouverture lorsqu'il envoie le message "business-hours-inquiry". Vous pouvez vous attendre à un résultat semblable à celui-ci :
Une fois le code source déployé sur GCP, les modifications seront immédiatement visibles. Nous ne mettons pas en cache l'application Web dans Google Cloud Platform de la même manière que les informations sur l'agent. Vous pourrez donc tester cette expérience immédiatement.
Nous avons déjà apporté quelques modifications à la source. Nous allons en faire une de plus pour permettre à un utilisateur de poser des questions sur les achats en ligne. L'agent numérique vous répondra que la fonctionnalité n'est pas encore disponible, mais qu'il faut revenir vérifier plus tard.
Indiquer à l'utilisateur que les achats en ligne seront bientôt disponibles
Nous allons apporter une modification similaire à celle que nous avons effectuée pour informer l'utilisateur des horaires d'ouverture. Cette fois, nous allons placer les informations dans une carte enrichie avec une image attrayante.
Analysez le message normalisé et vérifiez une condition pour une constante appelée CMD_ONLINE_SHOPPING_INQUIRY avec la valeur définie sur "online-shopping-inquiry" qui appelle send_online_shopping_info_message si la condition est vraie.
bm-django-echo-bot/bopis/views.py
...
# Set of commands the bot understands
CMD_RICH_CARD = 'card'
CMD_CAROUSEL_CARD = 'carousel'
CMD_SUGGESTIONS = 'chips'
CMD_BUSINESS_HOURS_INQUIRY = 'business-hours-inquiry'
CMD_ONLINE_SHOPPING_INQUIRY = 'online-shopping-inquiry'
...
...
...
def route_message(message, conversation_id):
'''
Routes the message received from the user to create a response.
Args:
message (str): The message text received from the user.
conversation_id (str): The unique id for this user and agent.
'''
normalized_message = message.lower()
if normalized_message == CMD_RICH_CARD:
send_rich_card(conversation_id)
elif normalized_message == CMD_CAROUSEL_CARD:
send_carousel(conversation_id)
elif normalized_message == CMD_SUGGESTIONS:
send_message_with_suggestions(conversation_id)
elif normalized_message == CMD_BUSINESS_HOURS_INQUIRY:
send_message_with_business_hours(conversation_id)
elif normalized_message == CMD_ONLINE_SHOPPING_INQUIRY:
send_online_shopping_info_message(conversation_id)
else:
echo_message(message, conversation_id)
...
Définissons maintenant send_online_shopping_info_message. Nous souhaitons que ce message soit envoyé dans une fiche enrichie avec une image. Copions donc la fonction send_rich_card pour l'utiliser comme modèle pour définir send_online_shopping_info_message.
Nous devons d'abord mettre à jour le texte de remplacement pour qu'il contienne un message approprié. Le texte de remplacement est utilisé si l'appareil ne peut pas recevoir de carte enrichie pour une raison quelconque. Ensuite, nous devons mettre à jour BusinessMessagesRichCard pour inclure un titre, une description, des suggestions et un champ multimédia pertinents. Notre fonction devrait se présenter comme suit :
bm-django-echo-bot/bopis/views.py
...
def send_online_shopping_info_message(conversation_id):
fallback_text = ('Online shopping will be available soon!')
rich_card = BusinessMessagesRichCard(
standaloneCard=BusinessMessagesStandaloneCard(
cardContent=BusinessMessagesCardContent(
title='Online shopping info!',
description='Thanks for your business, we are located in SF near the Golden Gate Bridge. Online shopping is not yet available, please check back with us in a few days.',
suggestions=[],
media=BusinessMessagesMedia(
height=BusinessMessagesMedia.HeightValueValuesEnum.MEDIUM,
contentInfo=BusinessMessagesContentInfo(
fileUrl=SAMPLE_IMAGES[4],
forceRefresh=False
))
)))
message_obj = BusinessMessagesMessage(
messageId=str(uuid.uuid4().int),
representative=BOT_REPRESENTATIVE,
richCard=rich_card,
fallback=fallback_text)
send_message(message_obj, conversation_id)
...
Excellent ! Notre agent numérique peut désormais répondre aux utilisateurs qui s'intéressent aux achats en ligne. Pour le moment, notre agent numérique ne prend pas encore en charge les achats en ligne. Nous fournissons donc un message à l'utilisateur pour l'informer que cette fonctionnalité sera bientôt disponible. Voici à quoi ressemble notre agent numérique lorsque l'utilisateur demande des informations sur les achats en ligne.
Comme pour la modification précédente qui permettait à un utilisateur de s'informer sur les horaires d'ouverture, cette modification est immédiatement visible si vous utilisez ngrok ou dès que vous déployez le code sur GCP App Engine.
Dans la partie suivante, nous utiliserons des amorces de conversation et des chips de suggestions pour guider la conversation vers le chemin idéal.
Utiliser des chips pour guider la conversation
Nous avons apporté quelques modifications au code source et déployé l'agent numérique mis à jour, mais nous ne nous attendons pas à ce que les utilisateurs saisissent "business-hours-inquiry" ou "online-shopping-info" pour obtenir des informations sur l'entreprise. Mettons à jour les amorces de conversation pour que, lorsque la conversation est ouverte, l'utilisateur ne soit pas seulement accueilli par un message de bienvenue, mais qu'il se voie également proposer des amorces de conversation.
Accédez à la console Business Communications, puis à la page Informations sur l'agent de votre agent. Nous avons précédemment défini des amorces de conversation pour les "chips", les "cartes" et les "carrousels". Bien que ces méthodes fonctionnent toujours, elles ne sont plus pertinentes pour notre fonction commerciale. Vous pouvez les laisser pour continuer à présenter ces fonctionnalités enrichies ou les supprimer pour que votre agent numérique affiche des amorces de conversation spécifiques à l'entreprise Bonjour Meal.
Nous allons créer deux nouvelles amorces de conversation. Pour la première, définissez le texte sur "Quels sont vos horaires d'ouverture ?" et les données de postback sur "business-hours-inquiry". Pour le deuxième point de départ de conversation, définissez le texte sur "Puis-je effectuer des achats ici ?" et les données de postback sur "online-shopping-info".
Le résultat doit correspondre à la configuration de la capture d'écran suivante :
Comme pour les autres modifications apportées à la Business Communications Console, la propagation de celle-ci prendra un certain temps avant que vous puissiez la voir sur votre appareil mobile.
Maintenant que nous avons terminé avec les amorces de conversation, nous devons également trouver un moyen de guider l'utilisateur vers un chemin idéal une fois la conversation commencée. Il est possible d'utiliser des chips de manière contextuelle après l'envoi d'un message pour guider l'utilisateur vers d'autres fonctionnalités dont l'agent numérique est capable. Nous allons donc envoyer un message suggérant à l'utilisateur de faire autre chose avec l'agent chaque fois qu'il s'enquiert des horaires d'ouverture ou des achats en ligne.
À la fin de la fonction, ajoutez ce qui suit :
bm-django-echo-bot/bopis/views.py
...
def send_online_shopping_info_message(conversation_id):
...
# at the end of the function, send a message with suggestions
message_obj = BusinessMessagesMessage(
messageId=str(uuid.uuid4().int),
representative=BOT_REPRESENTATIVE,
text='Let us know how else we can help you:',
fallback='Please let us know how else we can help you.',
suggestions=[
BusinessMessagesSuggestion(
reply=BusinessMessagesSuggestedReply(
text='Business hours',
postbackData='business-hours-inquiry')
),
])
send_message(message_obj, conversation_id)
...
# Let's do the same with the business hours
def send_message_with_business_hours(conversation_id):
...
# at the end of the function, send a message with suggestions
message_obj = BusinessMessagesMessage(
messageId=str(uuid.uuid4().int),
representative=BOT_REPRESENTATIVE,
text='Let us know how else we can help you:',
fallback='Please let us know how else we can help you.',
suggestions=[
BusinessMessagesSuggestion(
reply=BusinessMessagesSuggestedReply(
text='Can I purchase online?',
postbackData='online-shopping-inquiry')
),
])
send_message(message_obj, conversation_id)
...
Sachez que le champ de texte d'un BusinessMessagesSuggestion est limité à 25 caractères, comme décrit dans la documentation.
Avec des amorces de conversation mises à jour et une utilisation stratégique des chips de suggestions, voici quelques captures d'écran de l'expérience utilisateur attendue.
6. Félicitations
Félicitations, vous venez de créer votre premier agent numérique Business Messages !
Vous avez déployé une application Web pour prendre en charge votre agent numérique sur Business Messages, utilisé la console Business Communications pour modifier l'agent et façonné l'expérience utilisateur avec un agent numérique en modifiant le code source.
Vous connaissez maintenant les étapes clés requises pour créer une expérience Business Messages interactive. Les possibilités qui s'offrent à vous sont nombreuses. Vous pouvez étendre votre agent pour qu'il prenne en charge la recherche d'inventaire ou qu'il introduise un panier pour suivre ce qui pourrait intéresser l'utilisateur. Vous pouvez utiliser un carrousel pour présenter les éléments du menu et, à l'aide de suggestions, permettre à l'utilisateur de sélectionner les éléments qui l'intéressent.
Voici un aperçu de ce à quoi cela pourrait ressembler.
Comment créer une expérience conversationnelle de qualité ?
Les meilleurs agents fournissent des informations contextuelles à l'utilisateur tout en lui offrant des fonctionnalités pendant la conversation. L'utilisateur peut ainsi rester engagé et interagir avec l'entreprise comme il le ferait normalement par téléphone ou même en personne. Réfléchissez à la façon dont les thèmes suivants peuvent s'appliquer à une conversation que vous souhaitez avoir avec une entreprise avec laquelle vous travaillez.
Fournir du contexte et définir les attentes
Pour fournir du contexte, vous pouvez par exemple indiquer explicitement comment vous pouvez aider l'utilisateur ou présenter l'agent numérique avec une personnalité à laquelle l'utilisateur peut s'identifier. Les agents efficaces sur Business Messages utilisent l'avatar de représentation pour montrer à l'utilisateur à qui il parle.
La définition des attentes dépend de l'expérience utilisateur que vous créez. Par exemple, si votre agent permet de rechercher l'inventaire, informez d'abord l'utilisateur que la disponibilité peut être faible avant de lui fournir la réponse.
Fournir des fonctionnalités à l'utilisateur
Les consommateurs interagissent constamment avec les entreprises. Les messages professionnels peuvent gérer des interactions utilisateur complexes, comme vérifier l'état d'une commande ou la disponibilité d'un article. De nombreux utilisateurs continuent d'appeler les entreprises par téléphone pour obtenir des réponses à leurs questions, même si celles-ci sont disponibles sur leur site Web. Par conséquent, les entreprises doivent investir davantage de ressources pour gérer le volume d'appels, en particulier pendant les fêtes.
Maintenir l'engagement de l'utilisateur
Fournissez des points de contact conversationnels pour maintenir l'engagement de l'utilisateur dans la conversation. Entre les messages, vous pouvez appeler des indicateurs de saisie pour informer l'utilisateur que vous êtes en train de traiter une réponse.
Grâce à des fonctionnalités enrichies telles que les indicateurs de saisie, les chips de suggestion, les cartes enrichies et les carrousels, vous pouvez guider l'utilisateur à travers des parcours utilisateur optimaux pour l'aider à accomplir certaines tâches, comme commander des articles dans un menu. L'objectif est de réduire le trafic d'appels vers la ligne téléphonique d'une entreprise.
Il est essentiel qu'une conversation fournisse une fonctionnalité à l'utilisateur. Les utilisateurs qui contactent une entreprise par message s'attendent à obtenir des réponses rapides à leurs questions. Dans une situation non idéale, l'agent numérique ne peut pas faciliter la conversation, ce qui peut entraîner une mauvaise expérience utilisateur. Heureusement, il existe des solutions, comme transférer la conversation à un agent humain. Nous aborderons ce point dans un prochain atelier de programmation.
Et ensuite ?
Lorsque vous êtes prêt, consultez certains des sujets suivants pour en savoir plus sur les interactions plus complexes disponibles avec Business Messages.
- Cycle de vie d'un agent : de la création au lancement
- Exigences et consignes
- Consignes concernant le logo
- Tous les guides