20.6 Testez votre chatbot sur le site Web de démonstration.

Le widget de messagerie Web de Stackchat vous permet d'ajouter votre bot Luma à votre site de démonstration Luma. Dans cette section, vous allez configurer l'intégration dans Stackchat Studio, construire le projet de site Web, puis ajouter le code JavaScript à votre site de démonstration Luma pour activer la messagerie instantanée.

• Dernière version de Node.js installée. Assurez-vous d’exécuter Node v12 ou version ultérieure.
• Dernière version de Github for Desktop (ou utilisez l'outil de ligne de commande Git si vous le souhaitez)
• Compte AWS S3 (ou une autre solution d’hébergement de votre choix) pour héberger votre javascript Luma Bot

20.6.1 Configuration de votre messager Web

Une fois connecté à Stackchat, accédez à Robots dans le menu de gauche, sélectionnez votre Bot Luma, puis cliquez sur le bouton Intégrations de votre menu de bots. Cliquez maintenant sur le bouton Gérer pour Stackchat Web Messenger.

Vous verrez alors ceci. Cliquez sur le bouton + en regard de l’entrée dans le champ URL ​​par défaut de l’avatar.

Téléchargez d’abord l’image ci-dessous sur votre ordinateur :

Ensuite, téléchargez-le dans la fenêtre contextuelle de Stackchat Studio :

Enfin, cliquez sur Télécharger.

Faites de même pour le champ URL de l’icône de bouton (ou copiez et collez simplement la nouvelle URL du champ précédent). Laissez les autres champs tranquilles.

Sélectionnez l’onglet Marque et téléchargez la même image pour le champ URL de l’icône commerciale (ou copiez et collez simplement l’URL du champ précédent).

Pour les champs Couleur de la marque et Couleur de la conversation, utilisez la valeur F3793B. Pour le champ Couleur de l’action, utilisez la valeur 26A9E0.

Vous devriez maintenant avoir ceci :

Sélectionnez l’onglet initial Salutations et ajoutez ce texte au premier champ de message :

Prêt à démarrer ?

Ajoutez ensuite ce texte au premier champ Réponse rapide :
Allons-y ! 🚀

Si vous êtes curieux, ouvrez le générateur de robots, modifiez votre CDML et recherchez le terme Allons-y ! 🚀. Vous constaterez qu’il a été configuré en tant que mot-clé dans le flux de bienvenue . C’est là que Luma Bot naviguera entre les utilisateurs s’ils choisissent cette réponse rapide.

Cliquez sur Mettre à jour l’intégration pour enregistrer vos modifications.

Une fois l'enregistrement terminé, ouvrez le widget de messagerie Web et prévisualisation la marque Luma qui s'affiche maintenant !

Cependant, vous constaterez que la réponse rapide que vous avez configurée dans l’onglet initial Salutations n’est pas affichée. Ceci est dû au fait qu’elle ne sera visible que par les nouveaux utilisateurs.

Pour le tester, cliquez sur le bouton Aperçu dans le menu de votre robot, puis cliquez sur le bouton Partager dans la partie supérieure droite.

Cliquez sur le bouton Copier le lien .

Ouvrez ensuite une nouvelle fenêtre Incognito et collez l’URL que vous avez copiée.

Vous devriez maintenant voir apparaître votre premier message de bienvenue en réponse rapide. Cliquez dessus et voyez comment votre Bot Luma vous conduit à votre flux de bienvenue .

Votre messager web est maintenant prêt à être intégré à votre site de démonstration Luma !

20.6.2 Ajouter Web Messenger sur votre site de démonstration

Revenez à votre éditeur de code Visual Studio.

Une fois ouvert, accédez au .dossier /web-messenger .

Ouvrez un terminal (Vue -> Terminal).

Saisissez la commande cd web-messenger et appuyez sur Entrée.

Exécutez la commande npm i pour installer les dépendances du projet.

Prenez quelques instants pour explorer le dossier src du projet. Voici une ventilation des deux dossiers :

• luma-api: logique pour récupérer les informations de marque Luma à partir de l’API de démonstration
• messenger: pour instancier le messager web et le personnaliser

Avant de créer et de tester le projet, la configuration doit être mise à jour avec l’ID d’application de votre robot.

Accédez à Stackchat Studio, accédez à votre Bot Luma et cliquez sur Intégrations dans le menu du robot. Cliquez sur le bouton Gérer pour Web Messenger.

Dans l’écran Web Messenger, copiez l’ID d’application :

Revenez maintenant au code Visual Studio, ouvrez le fichier de configuration : src/messenger/config.ts et ajoutez votre ID d’application à l’objet config à la ligne 4, en vous assurant qu’il s’agit d’une chaîne, c’est-à-dire sous forme de citations :

appId: null, // Replace this null value with your Luma bot's App Id! e.g "k9s9xxxxxx"

Dans cet exemple, l’ID d’application est "ctduc8z4hn6x03", de sorte que la ligne 4 mise à jour doit maintenant ressembler à ceci :

appId: "ctduc8z4hn6x03", // Replace this null value with your Luma bot's App Id! e.g "k9s9xxxxxx"

Enregistrez vos modifications dans le fichier de configuration. Vous êtes maintenant prêt à construire et tester votre projet. Montez votre terminal (Vue -> Terminal) et exécutez la commande build :

npm run build

Cette commande exécute Webpack, qui a été configuré pour compiler votre projet TypeScript dans un seul fichier JavaScript compatible avec les navigateurs.
La compilation doit se terminer correctement :

Votre projet comporte désormais un dossier dist qui a été généré par Webpack. Il contiendra un fichier appelé bundle.js. Vous devrez héberger ce fichier à l'étape suivante afin qu'il soit accessible sur le site Web de démonstration.

20.6.3 Hébergement de votre fichier JavaScript

Afin d'obtenir votre Bot Luma sur le site de démonstration, vous devez héberger votre fichier bundle.js quelque part et le rendre accessible au public. Dans l' exercice 5.1 - Configuration d'un compartiment AWS S3, vous avez déjà configuré un compartiment AWS que nous pouvons exploiter.

Connectez-vous à votre compte AWS S3 : https://console.aws.amazon.com/s3. Puisque vous avez besoin que ce fichier soit disponible au public, créons un nouveau compartiment. Cliquez sur Créer un compartiment.

Nommez le compartiment aepmodule20LDAP, par exemple aepmodule20vangeluw et choisissez la région qui vous convient.

Faites défiler l'écran jusqu'à ce que les paramètres Intervalle s'affichent pour Bloquer l'accès public.

• Décochez la case Bloquer tout accès public
• Cochez la case pour que je reconnaisse que les paramètres actuels…

Vous devriez avoir une vue similaire maintenant :

• Cliquez à nouveau sur Suivant pour conserver les paramètres Nom et Région tels qu’ils sont.
• Dans la section Configurer les options , désélectionnez l’option Bloquer l’accès public. Cela amènera un accusé de réception confirmant que tout ce qui se trouve dans ce seau peut être accessible au public. Cochez la case pour accuser réception, puis cliquez sur Suivant.

Faites défiler la page vers le bas et cliquez sur Créer un compartiment.

Maintenant que votre nouveau compartiment est créé, cliquez dessus pour l'ouvrir.

Vous verrez alors ceci.

Cliquez sur Charger. Vous verrez alors ceci :

Cliquez sur Ajouter les fichiers, accédez à, puis sélectionnez votre fichier bundle.js .

Vous voyez maintenant ceci. Faites défiler un objet vers le bas jusqu’au champ Destination et cochez la case pour confirmer que les objets existants portant le même nom seront remplacés.

Faites défiler la page vers le bas et cliquez sur Télécharger.

Vous verrez alors ceci. Cliquez sur le nom de fichier bundle.js.

Vous devez maintenant être en mesure de vue des détails d’aperçu du fichier, y compris une URL d’ objet. Copiez cette URL comme vous en aurez besoin à l’étape suivante. Cliquez sur le bouton Rendre public .

Vous avez maintenant hébergé votre fichier bundle.js avec succès. Dans l’étape suivante, vous devrez coller l’URL de l’ objet dans l’écran ID de configuration de mise à jour.

20.6.4 Mise à jour de l’ID de configuration du site de démonstration

Pour vous assurer que le site de démonstration charge votre chatbot Luma, vous devez mettre à jour l’ID de configuration de votre site Web de démonstration afin d’inclure :

• URL JavaScript bundle.js de Stackchat que vous venez de créer via votre compartiment S3
• ID de Événement Journey Orchestration pour déclencher le voyage que vous avez configuré dans l' exercice 20.4.

Accédez à la page https://public.aepdemo.net/admin_configuration_update.html dans une fenêtre d'incognito fraîche et propre. Vous verrez alors ceci :

Saisissez votre ID de configuration et cliquez sur le bouton Charger la configuration . Vous aurez ensuite ceci :

Faites défiler l'écran jusqu'à ce que les champs EventID - Stackchat Journey et Stackchat Chatbot Tag s'affichent.

Remplacez la valeur EventID - Parcours Stackchat (vide) par votre ID d’événement d’orchestration que vous avez créée dans l’ exercice 20.4.1 et remplacez la valeur actuelle de la balise de chatbot Stackchat par l’URL d’objet de votre fichier hébergé bundle.js, qui est l’URL d’objet AWS S3 que vous avez créé à l’étape précédente.

Faites défiler la page vers le bas et cliquez sur le bouton Mettre à jour l’ID de configuration. Vous êtes maintenant prêt à tester !

20.6.5 Exécution d’un scénario de démonstration

Go to https://public.aepdemo.net/. Saisissez votre ID de configuration et cliquez sur Charger la configuration. Sélectionnez ensuite le protocole LDAP, puis votre marque. Sélectionnez la marque Luma.

Lorsque vous atteindrez la page d'accueil Luma, vous verrez votre chatbot chargé et l'icône s'affichera dans la partie inférieure droite de l'écran.

Tout d'abord, allez à CONNEXION/REGISTRE, remplissez vos renseignements personnels et créez un nouveau compte.

Vous verrez alors que le chatbot utilise votre prénom dans l'appel à l'action :

Pour ce faire, vous pouvez joindre les informations utilisateur aux métadonnées du message dans le délégué beforeSend du fichier helper.ts, de sorte que le chatbot n’ait pas à demander des informations que nous connaissons déjà. Vous pouvez en savoir plus sur les métadonnées des messages ici.

Ouvrez le widget de discussion et cliquez sur Allons-y !.

Vous verrez alors ceci. Ensuite, sélectionnez l'option de menu J'ai besoin d'idées .

Vous verrez alors que les produits Luma sont affichés à l'intérieur du chatbot.

Ensuite, cliquez sur le bouton ❤️ de quelques produits pour générer des événements affichés sur les produits et déclencher votre voyage en Journey Orchestration.

Quelques secondes plus tard, vous recevrez un courriel de Adobe Experience Platform et d'un Journey Orchestration avec une promotion pour l'article que vous venez de aimer.

La prochaine question dans le chatbot est si vous voulez donner des commentaires sur votre expérience de chat. Cliquez sur Bien sûr.

Faites votre choix, dans ce cas le choix est Grand.

Cliquez sur Heureux à !

Donnez vos commentaires supplémentaires détaillés et cliquez sur Envoyer.

Enfin, ouvrez votre panneau rayons X et cliquez sur le bouton Actualiser. Vous verrez ensuite votre vue de produits apparaître dans le panneau rayons X.

Votre chatbot de messagerie web fonctionne maintenant bien. Connectons maintenant votre chatbot à Facebook Messenger.

Étape suivante : 20.7 Connectez votre chatbot à Facebook Messenger.

Revenir au module 20

Revenir à tous les modules