ChatBot: Déployez une interface utilisateur Web pour votre chatbot

ChatBot: Déployez une interface utilisateur Web pour votre chatbot

Mise à jour de septembre 2021 : Présentation du chat en direct Transfer to Amazon Connect – Voir les nouvelles fonctionnalités

Vous avez construit un très cool en utilisant Amazon Lex. Vous l’avez testé à l’aide de la console Amazon Lex. Vous êtes maintenant prêt à le déployer sur votre site Web.

Bien que vous puissiez créer votre propre interface utilisateur de bot (UI), cela semble beaucoup à faire. Vous devrez gérer la prise en charge de différents appareils et navigateurs, l’authentification, l’enregistrement vocal et bien plus encore. Vous pensez que quelqu’un a dû le faire auparavant et qu’avec de la chance, vous trouverez une solution que vous pourrez réutiliser.

L’interface utilisateur du

Notre exemple d’interface utilisateur Web Amazon Lex, appelée interface utilisateur du , effectue déjà la plupart des tâches lourdes associées à la fourniture d’un client Web complet pour les s Amazon Lex. Vous pouvez rapidement exploiter ses fonctionnalités et minimiser le délai de rentabilisation de vos applications alimentées par .

Vous pouvez l’exécuter en tant qu’interface utilisateur de pleine page :

ChatBot: Déployez une interface utilisateur Web pour votre chatbot

Ou intégrez-le dans un site en tant que widget  :

ChatBot: Déployez une interface utilisateur Web pour votre chatbot

L’interface utilisateur du prend en charge les fonctionnalités suivantes :

  • Fonctionne avec les robots Lex ou Lex V2
  • Interface utilisateur réactive prête pour le mobile avec modes plein écran ou widget intégrable
  • Prise en charge complète de la voix et du texte, avec la possibilité de basculer entre eux de manière transparente
  • Fonctionnalités vocales, y compris la détection automatique du silence, les transcriptions, l’enregistrement et la relecture audio, et la possibilité d’interrompre la lecture de la réponse Amazon Lex
  • Prise en charge des cartes de réponse pour texte et voix
  • Possibilité d’interagir par programmation avec l’interface utilisateur du à partir du site d’hébergement
  • Plusieurs options de déploiement
  • Web accessible via Amazon Cloudfront
  • Connexion utilisateur entièrement intégrée via Amazon Cognito User Pool – jeton utilisateur accessible par le bot Lex en tant qu’attribut de session. La connexion peut être facultative ou obligatoire.
  • Prise en charge de Markdown pour le texte riche / images / vidéo, etc.
  • Prise en charge des boutons cliquables dans les cartes de réponse Lex
  • Boutons facultatifs « pouce vers le haut » et « pouce vers le bas » : envoie un message de retour de réponse au bot Lex
  • Bouton « Aide » en option sur la barre de titre – envoie un message d’aide au bot Lex
  • Renvoyer tout message précédent
  • Nouveau! Transfert vers Amazon Connect chat en direct – permet aux utilisateurs de l’interface utilisateur Web Lex de demander et de mener des conversations de chat en direct avec un agent humain à l’aide d’Amazon Connect. Voici une courte vidéo de démonstration. Pour plus d’informations sur la configuration et l’utilisation de cette fonctionnalité, consultez le fichier GitHub README.

Options de déploiement et d’intégration

Vous avez trois options pour déployer et intégrer l’interface utilisateur du  :

  1. Utilisez AWS CloudFormation.
  2. Utilisez une bibliothèque de distribution prédéfinie.
  3. Utilisez un composant Vue préemballé.

Le déploiement avec AWS CloudFormation est la méthode la plus simple, nous allons donc vous montrer comment. Pour plus d’informations sur toutes les options, consultez le fichier GitHub README.

Premiers pas avec l’option de déploiement AWS CloudFormation

Déployez l’interface utilisateur du pour lancer les pneus.

  1. Appuyez sur le bouton Launch Stack pour la région dans laquelle vous utiliserez votre  :
  2. Acceptez tous les paramètres par défaut.
    Cela déploie un environnement de démonstration dans votre compte (dans la région AWS us-east-1) et installe OrderFlowersBot.
  3. Une fois qu’AWS CloudFormation a lancé la pile (le statut est CREATE_COMPLETE), ouvrez l’onglet Outputs. Choisir URLApp Web ou URLPageParent pour expérimenter avec l’interface utilisateur du  :
    ChatBot: Déployez une interface utilisateur Web pour votre chatbot

La pile déploie l’architecture suivante. Il est entièrement sans serveur ˗ les frais sont basés sur votre utilisation du service.

ChatBot: Déployez une interface utilisateur Web pour votre chatbot

Pour plus d’informations, consultez le fichier README de la pile CloudFormation.

Après avoir compris le fonctionnement de l’interface utilisateur du , essayez-le avec votre propre Amazon Lex et intégrez-le à votre site Web. Voici comment:

  1. Appuyez sur le bouton Launch Stack pour la région dans laquelle vous utiliserez votre  :
  2. Dans le Paramètres de configuration de Lex Bot section:
    • Pour Nom du Bot, saisissez le nom de votre bot.
    • Régler ActiverCognitoLogin à true pour activer la connexion utilisateur intégrée.
  3. Dans le Paramètres d’application Web section, remplissez chacun des paramètres.
    Noter: Il est essentiel que vous utilisiez l’origine de votre site pour WebAppParentOrigin.
  4. Une fois qu’AWS CloudFormation a lancé la pile (le statut est CREATE_COMPLETE), vous verrez un lien sur l’onglet Outputs dans le URL de l’extrait valeur de sortie :
    ChatBot: Déployez une interface utilisateur Web pour votre chatbot
  5. Naviguez jusqu’au URL de l’extrait page, où vous verrez un extrait de code similaire au suivant que vous pouvez coller dans votre application :ChatBot: Déployez une interface utilisateur Web pour votre chatbot

Pour des exemples de code et des options supplémentaires pour intégrer l’interface utilisateur du dans votre site Web et la configurer, consultez notre référentiel d’interface utilisateur Amazon Lex sur GitHub.

Mise à niveau

Vous pouvez utiliser CloudFormation pour mettre à niveau votre pile Lex Web UI existante ou pour modifier la valeur de l’un des paramètres de la pile.

  1. Sur la console CloudFormation, sélectionnez la pile principale de l’interface utilisateur Web Lex.
  2. Choisir Mettre à jour.
  3. Choisir Remplacer le modèle actuel.
  4. Saisissez l’URL Amazon S3 pour votre région :
  5. Choisir Prochain trois fois pour afficher la page Review.
  6. Cochez les cases d’accusé de réception et choisissez Mettre à jour la pile pour mettre à niveau l’interface utilisateur Web Lex.

Dites-nous ce que vous en pensez

Nous espérons que vous essayez l’exemple d’interface utilisateur du . Faites-nous part de votre expérience dans la section commentaires à la fin de cet article.

Nous aimerions également entendre vos suggestions d’améliorations et de fonctionnalités. Signalez les bogues et soumettez des demandes de fonctionnalités dans le référentiel GitHub du projet. Mieux encore, contribuez vos améliorations en tant que demandes de tirage !


Journal des nouvelles fonctionnalités

  • Mise à jour du 1er septembre 2021 – Présentation du transfert vers le chat en direct Amazon Connect. Cette fonctionnalité permet aux utilisateurs de Lex Web UI d’avoir des conversations avec un Amazon Connect Live Agent. Lorsque l’utilisateur demande un transfert, tous les messages suivants sont envoyés à l’agent Connect Live Chat et les réponses de l’agent sont affichées à l’utilisateur sous la forme d’une bulle de message. La conversation se poursuit entre l’utilisateur et l’agent jusqu’à ce que l’une des parties se déconnecte. Une fois déconnecté, les messages sont à nouveau envoyés au bot Lex. [Demo Video]
  • Mise à jour du 4 mars 2021 – Prend désormais en charge les bots Amazon Lex V2, un nouveau paramètre pour spécifier l’énoncé initial qui sera envoyé au bot lors du chargement de la page, la détection des échecs de connexion empêche désormais la boucle lors de l’utilisation de ForceLogin, la mise à niveau de la pile prend désormais en charge la modification de WebAppParentOrigin lorsque la connexion est activé, le paramètre WebAppPath prend désormais en charge plusieurs valeurs pour prendre en charge le déploiement avec connexion activée sur plusieurs pages sur le même site (origine).
  • Mise à jour du 7 décembre 2020 – Prend désormais en charge l’utilisation de l’action de mise à jour de la pile CloudFormation pour modifier les paramètres de la pile et/ou pour passer à une nouvelle version, la nouvelle option « Sauvegarder l’historique » permet de conserver l’historique des discussions lorsque la page est actualisée ou lors du retour à la page d’hébergement avec une nouvelle option de menu pour effacer l’historique des discussions, la nouvelle option « ForceLogin » charge automatiquement la page de connexion Cognito et empêche les utilisateurs non authentifiés d’accéder au bot.
  • Mise à jour du 6 novembre 2020 – Désormais disponible dans les régions de Singapour, Tokyo, Londres et Francfort, chiffrement par défaut pour tous les compartiments S3 utilisant le chiffrement AES-256, nouvelle option de configuration (minButtonContent) qui permet d’ajouter du texte au bouton qui apparaît sur le page parent lorsque l’iframe est minimisé, nouveau paramètre de modèle (forceLogin) qui configure l’interface utilisateur pour obliger l’utilisateur à s’authentifier via Cognito avant d’utiliser le bot.
  • Mise à jour du 10 juillet 2020 – Nouvelles fonctionnalités : implémente la prise en charge du lecteur d’écran et des améliorations d’accessibilité, l’iframe minimisé affiche désormais un bouton compact plutôt qu’une barre de titre, la carte de réponse dans l’attribut de session « appContext.responsecard » peut être utilisée pour afficher plus de 5 boutons (en évitant Limite du bouton Lex), le nouvel outil « Renvoyer l’énoncé » remplace le bouton de retour de la barre de titre – voir le référentiel GitHub pour plus de détails
  • Mise à jour du 10 juin 2020 – Nouvelles fonctionnalités : est désormais livré avec Amazon CloudFront comme méthode de distribution par défaut, offrant des temps de chargement plus rapides et supprimant l’exigence d’un accès public en lecture au compartiment S3 – voir le référentiel GitHub pour plus de détails
  • Mise à jour du 1er avril 2020 – Nouvelles fonctionnalités : prise en charge de plusieurs régions, personnalisation améliorée du style CSS, option de configuration pour masquer la zone de saisie lors de l’utilisation des boutons et correctifs liés à CORS et plus encore – voir le référentiel GitHub pour plus de détails.
  • Mise à jour du 1er novembre 2019 – Nouvelles fonctionnalités : boutons facultatifs pouce vers le haut/bas pour envoyer des messages de commentaires, bouton d’aide facultatif pour envoyer un message d’aide et un bouton de retour pour renvoyer le message précédent – voir le dépôt GitHub pour plus de détails.
  • Mise à jour du 31 décembre 2018 – Nouvelles fonctionnalités : connexion utilisateur intégrée, prise en charge des démarques, boutons de carte de réponse, etc. – voir le référentiel GitHub pour plus de détails.

Lecture supplémentaire


à propos des auteurs

Oliver Atoa et Bob Strahan sont consultants principaux pour les services professionnels AWS. Ils travaillent avec nos clients pour fournir un leadership sur une variété de projets, les aidant à réduire leur temps de rentabilisation lors de l’utilisation d’AWS.

OliverAtoa_pic_resized

BobStrahan_pic_resized

ChatBot: Déployez une interface utilisateur Web pour votre chatbot

#Déployez #une #interface #utilisateur #Web #pour #votre #