20.7 Connexion de votre chatterbot à Facebook Messenger

FB_Messenger_logo

Dans cet exercice, vous allez utiliser le site de bureau Facebook pour connecter votre chatterbot à Facebook Messenger. Vous aurez donc besoin d’accéder à un compte Facebook.

20.7.1 Création d’une page Facebook

Une fois connecté à votre compte Facebook, sélectionnez l’icône + en haut à droite de l’écran.

FB_Plus_btn

Une liste déroulante Créer s’affiche alors avec diverses options.

FB_Homepage

Sélectionnez Page.

FB_Create_Page_btn

Vous aurez désormais la possibilité de commencer à renseigner les informations de votre page, telles que le nom de la page, la catégorie, la description, etc. Remplissez ces champs selon vos besoins, mais dans cet exemple, nous avons utilisé les éléments suivants :

Informations demandées Explication Exemple de réponse
Nom de la page ldap-fb-page idejong-fb-page
Catégorie [industrie] secteur ou type d’entreprise Société de vente au détail
Description description de la page Ma page facebook pour le test des robots de chat

FB_CreatePage_PageDetails

Une fois l’opération terminée, cliquez sur Créer une page.

FB_CreatePage_btn.png

Vous aurez désormais la possibilité d’ajouter une photo de profil et une photo de couverture dans les options de gauche. N’hésitez pas à le faire, mais ceci est facultatif.

FB_CreatePage_PageDetails_addImgs

Une fois que les détails de la page vous conviennent, cliquez sur Enregistrer.

FB_Save_btn

La page Facebook terminée s’affiche désormais. N’hésitez pas à continuer à mettre à jour et à modifier votre nouvelle page Facebook à votre convenance. Toutefois, pour les besoins de ce tutoriel, nous allons passer à la configuration du robot de conversation…

20.7.2 Configuration de la messagerie avancée dans la page Facebook

Sur la page d’accueil de la page Facebook que vous venez de créer, une liste d’options s’affiche sur le côté gauche de l’écran.

FB_ManagePage_Nav

Sélectionnez Paramètres de page au bas des options.

FB_Pagesetting_btn

Vous pouvez passer beaucoup de temps à configurer votre page Facebook à votre convenance, mais à des fins de tutoriel, nous allons passer à la configuration du robot de conversation.

FB_Page_Nav

Sélectionnez Messagerie avancée.

FB_AdvancedMessaging_btn

Accédez à Paramètres généraux > Applications connectées. vous verrez qu’aucune application n’est connectée. C’est là que Stackchat sera répertorié une fois que nous aurons connecté notre chatbot à l’interface utilisateur de Stackchat.

FB_GeneralSettings_ConnectedApps

20.7.3 Connexion de Stackchat à Facebook Messenger

Maintenant que votre page Facebook a été créée, nous devons accorder à Stackchat l’autorisation de gérer les messages envoyés à la page. Ouvrez votre bot Luma dans Stackchat Studio et cliquez sur le bouton Intégrations dans le menu du robot.

Stackchat_Integration_FB

Cliquez sur le bouton Ajouter une intégration en haut à droite et sélectionnez Facebook Messenger.

Stackchat_Integration_FB

Cliquez sur le bouton Gérer les autorisations Facebook .

Stackchat_Integration_FB

Un modal de connexion Facebook devrait s’afficher. Dans le cas contraire, votre navigateur peut avoir bloqué la fenêtre contextuelle modale. Vérifiez s’il existe des avertissements et autorisez Stackchat à lancer des fenêtres contextuelles. Connectez-vous à votre compte Facebook.

Stackchat_Integration_FB

Sélectionnez toutes les pages auxquelles vous souhaitez connecter un chatterbot. Stackchat se souviendra de ces pages et vous donnera la possibilité de les sélectionner dans une liste. Appuyez sur le bouton Suivant lorsque vous avez sélectionné vos pages.

Stackchat_Integration_FB

Laissez ces autorisations inchangées. Appuyez simplement sur le bouton Terminé, puis sur le bouton Ok.

Stackchat_Integration_FB

Le modal se ferme et vous pouvez désormais sélectionner la page Facebook à laquelle vous souhaitez connecter votre chatterbot.

Stackchat_Integration_FB

Appuyez sur le bouton Ajouter l’intégration et vous avez terminé !

20.7.4 Test de l’intégration

Pour commencer la démonstration, connectez-vous à Facebook et accédez à la page Facebook que vous avez créée aux étapes précédentes. Pour ce tutoriel, nous utiliserons notre page de démonstration Luma Retail .

Facebook_LumaRetail_HP

Puisque vous êtes administrateur de cette page, appuyez sur le bouton Afficher comme visiteur .

Facebook_LumaRetail_viewasVisitor

Cela modifie l’affichage et présente la page comme si vous étiez un client.

Facebook_LumaRetail_HP_cv

Appuyez sur le bouton Envoyer le message, situé en haut à droite.

Facebook_LumaRetail_sendMessage

Cela ouvrira le chatbot, qui est désormais alimenté par Stackchat. La première fois que vous ouvrez le robot de discussion, il vous informe qu’une fois que vous avez sélectionné Commencer Luma Retail, vos informations publiques s’affichent.

Facebook_LumaRetail_ChatBot_welcomeAnon

Sélectionnez Commencer.

Facebook_LumaRetail_ChatBot_getstarted_btn

Une fois le chatterbot lancé, un message de bienvenue s’affiche. Parcourez le flux "J'ai besoin d'idées", comme nous l'avons fait sur le Web Messenger dans la section précédente, pour tester si la conversation s'affiche correctement.

Facebook_LumaRetail_ChatBot_initiate2

Ensuite, Luma Bot partage le lien vers ses politiques et demande son consentement. Cliquez sur Oui pour continuer.

Facebook_LumaRetail_ChatBot_optin

Envoyez votre email de démonstration, soit celui utilisé lors du test de Web Messenger, soit un nouveau pour voir à quoi ressemble l’expérience si Facebook était le premier point de contact avec Luma.

Facebook_LumaRetail_ChatBot_email-submit2

Luma Bot affiche désormais un carrousel de produits. Parcourez les produits et cliquez sur l’icône représentant un coeur pour aimer un produit de votre choix. J'ai toujours rêvé de Pantalon de Parachute…

Facebook_LumaRetail_ChatBot_productLike

REMARQUE

Conseil à chaud ! Les commandes suivantes ont été secrètement ‘cuites’ sur notre chatbot :

  • /debug : cela confirme l’instance AEP à laquelle le robot de conversation est actuellement connecté.
  • /reset - Cela vous permet de recommencer à zéro la conversation.

Vous pouvez à tout moment confirmer l’intégration ou réinitialiser la conversation, respectivement. Si vous êtes curieux, voir si vous pouvez trouver ces configurations de mots-clés dans l’interface utilisateur de Studio ou l’éditeur CDML : elles sont configurées à l’aide d’expressions régulières.

Maintenant que nous avons "aimé" le produit Cora Parachute Pants, nous pouvons vérifier notre boîte de réception électronique pour confirmer que notre Parcours configuré dans l’exercice 20.4 a été déclenché et livré avec succès.

JO Courrier électronique remis

Nous verrons ensuite comment continuer la 'conversation' sur site. Imaginons maintenant que le chat de Facebook Messenger que nous venons d’avoir avec le robot Luma a été notre première interaction avec le commerce de détail de Luma et que nous voulions voir l’expérience que cela représente pour un visiteur du site web après avoir interagi avec le bot Luma sur Facebook. Accédez au site web Luma en mode incognito. Puisqu’il s’agit d’une nouvelle fenêtre incognito, vous devez définir votre ldap, votre marque (Luma) comme d’habitude. Une fois votre nouveau site web incognito Luma ouvert, vérifiez dans le panneau X-Ray que vous êtes un nouvel utilisateur, c’est-à-dire qu’il n’y a aucun attribut de profil ou événement d’expérience.

web_incog-xray.png

Accédez à la page CONNEXION/REGISTER et inscrivez-vous avec le même e-mail que celui que vous avez envoyé et qui est utilisé dans le chat Facebook Messenger. Une fois connecté, revenez à la page d’accueil et ouvrez le panneau X-Ray. Votre interaction Facebook devrait maintenant s’afficher sous les événements d’expérience.

web_xray-fb-interaction

Le site Web et les messageries Web ayant désormais conscience de votre interaction Facebook initiale, nous pouvons continuer la "conversation" et personnaliser les prochaines interactions des utilisateurs à votre gré. Vous venez d'étendre la conversation depuis un canal social plutôt que ce qui aurait été une expérience incognito mal informée.

Vous avez terminé. Vous avez maintenant terminé l’intégration de Facebook et effectué des tests sur Facebook Messenger et Web Messenger.

Regardons ensuite un peu plus en détail un autre canal social, WeChat

Étape suivante : 20.8 Test de l’intégration WeChat

Revenir au module 20

Revenir à tous les modules

Sur cette page