View a markdown version of this page

Comment configurer votre expérience de chat en libre-service agentic de bout en bout - Amazon Connect

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

Comment configurer votre expérience de chat en libre-service agentic de bout en bout

Note

Les agents d'orchestration AI nécessitent l'activation du streaming de chat pour les contacts de chat. Si le streaming de chat n'est pas activé, certains messages ne s'afficheront pas. Consultez Activer le streaming de messages pour le chat alimenté par l'IA.

Qu'est-ce que le streaming de messagerie AI ?

AI Message Streaming est une fonctionnalité d'Amazon Connect qui permet l'affichage progressif des réponses des agents intelligents lors des interactions par chat. Au lieu d'attendre que l'IA génère une réponse complète avant de montrer quoi que ce soit au client, le streaming affiche le texte tel qu'il est généré, créant ainsi une expérience conversationnelle plus naturelle.

Comment ça marche

Avec les réponses de chat standard, les clients attendent que l'IA génère sa réponse complète, puis le message complet apparaît en une seule fois. Avec AI Message Streaming, les clients voient s'agrandir une bulle de texte dans laquelle les mots apparaissent progressivement au fur et à mesure que l'IA les génère, comme si vous regardiez quelqu'un taper en temps réel.

Note

Documentation officielle : Pour la référence technique complète, voirActiver le streaming de messages pour le chat alimenté par l'IA.

Avantages de l'affichage progressif du texte

Le streaming de messages par intelligence artificielle offre plusieurs avantages clés en termes d'expérience client :

  • Réduction du temps d'attente perçu : les clients constatent une activité immédiate plutôt que de regarder une centrifugeuse

  • Flux de conversation plus naturel : le texte progressif imite la saisie humaine, créant ainsi une interaction plus engageante

  • Meilleur engagement : les clients peuvent commencer à lire la réponse alors qu'elle est encore en cours de génération

  • Messages d'expédition : les agents d'intelligence artificielle peuvent envoyer des messages intermédiaires tels que « Un moment pendant que je passe en revue votre compte » pendant le traitement

Chat standard et chat en streaming

Le tableau suivant compare l'expérience client entre le chat standard et le chat en streaming :

Aspect Chat standard Chat en streaming
Affichage des réponses Le message complet apparaît en une seule fois Le texte apparaît progressivement (bulle croissante)
L'expérience client Attendre une réponse complète avec indicateur de chargement Voir les mots apparaître en temps réel
Temps d'attente perçu Plus longtemps (en attente d'une réponse complète) Plus court (retour visuel immédiat)
Sensation de conversation Transactionnel Naturel, comme discuter avec une personne
Messages d'expédition Non disponible L'IA peut envoyer des mises à jour de statut intermédiaires
Gestion du délai d'expiration Lex Soumis aux délais d'expiration de Lex Élimine les limites de délai d'expiration de Lex

État de l'habilitation

La disponibilité de AI Message Streaming dépend de la date de création de votre instance Amazon Connect et de sa configuration.

Activation automatique pour les nouvelles instances

Le streaming des messages AI est activé par défaut sur les instances Amazon Connect créées après décembre 2025. L'attribut d'MESSAGE_STREAMINGinstance est automatiquement défini sur true pour ces instances, aucune configuration supplémentaire n'est donc requise.

Important

Si vous utilisez un AWS compte avec une instance Amazon Connect créée avant décembre 2025, vous devrez peut-être activer manuellement AI Message Streaming. Suivez les instructions de la documentation Activer le streaming de messages pour le chat alimenté par l'IA pour vérifier MESSAGE_STREAMING l'attribut de votre instance et l'activer si nécessaire.

Autorisations Amazon Lex Bot

AI Message Streaming nécessite une lex:RecognizeMessageAsync autorisation pour fonctionner correctement. Cette autorisation permet à Amazon Connect d'invoquer l'API de reconnaissance de messages asynchrone qui permet le streaming des réponses.

Pour les nouvelles associations de robots Lex : lorsque vous associez un nouveau bot Amazon Lex à votre instance Amazon Connect, l'lex:RecognizeMessageAsyncautorisation requise est automatiquement incluse dans la politique basée sur les ressources du bot. Aucune configuration supplémentaire n'est nécessaire.

Important

Si un bot Amazon Lex était associé à votre instance Amazon Connect avant l'activation d'AI Message Streaming, vous devrez peut-être mettre à jour la politique basée sur les ressources du bot pour inclure l'lex:RecognizeMessageAsyncautorisation.

Pour mettre à jour votre politique actuelle relative aux robots Lex :

  1. Accédez à la console Amazon Lex

  2. Sélectionnez votre bot et accédez à Politique basée sur les ressources

  3. Ajoutez l'lex:RecognizeMessageAsyncaction à la déclaration de politique qui accorde l'accès à Amazon Connect

  4. Enregistrez la politique mise à jour

Pour obtenir des instructions détaillées, consultez la section sur les autorisations du robot Lex dans la AWS documentation.

Créer un widget de communication

Le widget de communication Amazon Connect est une interface de chat intégrée que vous pouvez ajouter à n'importe quel site Web. Dans cette section, vous allez créer et configurer un widget pour tester le streaming de messages AI. Vous pouvez ignorer cette section si vous prévoyez d'utiliser votre propre widget de chat client.

  1. Dans la console Amazon Connect, accédez à votre instance

  2. Cliquez sur Canaux dans le menu de navigation de gauche

  3. Cliquez sur le widget Communications

  4. Vous verrez la page de gestion du widget de communication

Note

Qu'est-ce que le widget de communication ? Le widget de communication est la solution de out-of-the-box chat d'Amazon Connect. Il fournit une interface de chat entièrement fonctionnelle que vous pouvez intégrer dans des sites Web à l'aide d'un simple JavaScript extrait de code. Le widget gère toute la complexité de l'établissement des connexions, de la gestion des sessions et de l'affichage des messages.

Étape 2 : créer un nouveau widget

  1. Cliquez sur Ajouter un widget pour créer un nouveau widget de communication

  2. Entrez les détails suivants :

    • Nom: AI-Streaming-Demo-Widget

    • Description: Widget for testing AI Message Streaming

  3. Sous Options de communication, assurez-vous que l'option Ajouter un chat est sélectionnée.

  4. Sélectionnez Self Service Test Flow comme flux de contacts dans le chat

  5. Cliquez sur Enregistrer et continuer pour accéder à la page de configuration

Sélection du flux de contacts

Assurez-vous de sélectionner un flux de contacts qui :

  • Les paramètres de base sont-ils configurés (crée une session AI, journalisation, etc.)

  • Routes vers votre Lex bot grâce à l'intégration d'AI Agent

  • Dispose d'une gestion d'erreur appropriée pour les déconnexions

Si vous n'avez pas encore créé de flux de contacts, complétez d'abord la section Création du flux.

Étape 3 : Personnaliser l'apparence du widget

Personnalisez l'apparence de votre widget de chat en fonction de votre marque et sélectionnez Enregistrer et continuer.

Étape 4 : Configuration des domaines autorisés

Le widget de communication ne se charge que sur les sites Web explicitement autorisés. Cette fonctionnalité de sécurité empêche toute utilisation non autorisée de votre widget.

  1. Faites défiler l'écran vers le bas jusqu'à Domaines autorisés

  2. Cliquez sur Ajouter un domaine et ajoutez le domaine suivant pour les tests sur localhost :

    • http://localhost

  3. Sélectionnez Non sous Sécurité

  4. Si vous prévoyez de déployer ultérieurement sur un site Web de production, ajoutez également ces domaines et assurez-vous de configurer la sécurité (par exemple,https://www.example.com)

Étape 5 : Enregistrer et obtenir le code du widget

  1. Cliquez sur Enregistrer et continuez pour enregistrer la configuration de votre widget

  2. Après la création, vous verrez la page de détails du widget avec votre code d'intégration

  3. Important : copiez et enregistrez les valeurs suivantes à partir de l'extrait de code intégré :

    • URI du client : URL du JavaScript fichier du widget

    • ID du widget - Un identifiant unique pour votre widget

    • Snippet ID : chaîne de configuration codée en Base64

Étape 6 : Configuration de l'environnement de test local

Pour tester le widget localement, vous allez créer un simple fichier HTML qui charge le widget de communication.

  1. Créez un nouveau dossier sur votre ordinateur à des fins de test (par exemple,ai-streaming-test)

  2. Téléchargez l'image d'arrière-plan de la page de démonstration et enregistrez-la background.jpg dans votre dossier de test

  3. Créez un nouveau fichier appelé index.html dans votre dossier de test avec le contenu suivant :

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <style> body { background-image: url("background.jpg"); background-repeat: no-repeat; background-size: cover; } </style> <title>AI Message Streaming Demo</title> </head> <body> <div id="root"></div> <script type="text/javascript"> (function(w, d, x, id){ s=d.createElement('script'); s.src='REPLACE_WITH_CLIENT_URI'; s.async=1; s.id=id; d.getElementsByTagName('head')[0].appendChild(s); w[x] = w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) }; })(window, document, 'amazon_connect', 'REPLACE_WITH_WIDGET_ID'); amazon_connect('styles', { iconType: 'CHAT', openChat: { color: '#ffffff', backgroundColor: '#ff9200' }, closeChat: { color: '#ffffff', backgroundColor: '#ff9200'} }); amazon_connect('snippetId', 'REPLACE_WITH_SNIPPET_ID'); amazon_connect('supportedMessagingContentTypes', [ 'text/plain', 'text/markdown', 'application/vnd.amazonaws.connect.message.interactive', 'application/vnd.amazonaws.connect.message.interactive.response' ]); amazon_connect('customStyles', { global: { frameWidth: '500px', frameHeight: '900px'} }); </script> </body> </html>

Étape 7 : Remplacer les valeurs de remplacement

Remplacez les valeurs de l'espace réservé dans le fichier HTML par les valeurs réelles de votre widget :

Placeholder Remplacer par Exemple
REPLACE_WITH_CLIENT_URI L'URI de votre client à partir de l'étape 5 https://d2s9x5slqf05.cloudfront.net/amazon-connect-chat-interface-client.js
REPLACE_WITH_WIDGET_ID L'identifiant de votre widget indiqué à l'étape 5 amazon_connect_widget_abc123
REPLACE_WITH_SNIPPET_ID Votre identifiant de snippet obtenu à l'étape 5 QVFJREFIaWJYbG...(longue chaîne Base64)

Étape 8 : démarrer un serveur Web local

Pour tester le widget, vous devez diffuser le fichier HTML à partir d'un serveur Web local. Voici plusieurs options :

Option A : Python (si installé)

python -m http.server 8001
Option B : Node.js (si installé)

npx http-server -p 8001
Option C : extension du serveur VS Code Live

  • Installez l'extension « Live Server » dans VS Code

  • Cliquez avec le bouton droit sur index.html et sélectionnez « Ouvrir avec Live Server »

Après avoir démarré le serveur, ouvrez votre navigateur et accédez à : http://localhost:8001

Vous devriez voir la page de démonstration avec un bouton de chat orange dans le coin inférieur droit.

Testez l'expérience de streaming

Maintenant que votre widget est chargé, il est temps de tester AI Message Streaming et d'observer l'affichage progressif du texte en action.

Ce qu'il faut rechercher : streaming ou non-streaming

Comprendre la différence entre les réponses en streaming et les réponses non diffusées vous permet de vérifier que le streaming de messages AI fonctionne :

Comportement Sans diffusion en continu (standard) Streaming (diffusion de messages par IA)
Affichage initial Indicateur de chargement ou points de saisie Le texte commence à apparaître immédiatement
Apparence du texte Le message complet apparaît en une seule fois Les mots apparaissent progressivement (bulle croissante)
Délai de réponse Attendez que l'IA ait fini de générer Voir la réponse au fur et à mesure qu'elle est générée
Effet visuel « Pop » du texte complet Texte fluide et fluide, comme si vous regardiez quelqu'un taper