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. # Bloc de flux dans Amazon Connect : Afficher la vue Cette rubrique définit le bloc de flux pour créer des guides de step-by-step flux de travail destinés à aider les agents à proposer des expériences client cohérentes, ainsi que des guides pour permettre des expériences client interactives. ## Description + Utilisez ce bloc de flux pour : + Créez des [step-by-step guides](step-by-step-guided-experiences.md) pour les agents qui utilisent l'espace de travail des agents Amazon Connect. Il s’agit de flux de travail qui fournissent à vos agents des instructions pour les aider à interagir de manière cohérente avec vos clients. + Créer des formulaires pour collecter des informations auprès des clients dans le cadre d’une expérience de chat. + Lorsqu’un contact est acheminé vers un flux qui inclut un bloc **Afficher la vue**, une page d’interface utilisateur appelée [Vue](view-resources-sg.md) s’affiche sur l’espace de travail de l’agent ou dans l’interface utilisateur de chat du client. ## Cas d’utilisation pour ce bloc Ce bloc de flux est conçu pour guider les agents tout au long des étapes à suivre pour : + Effectuer des tâches courantes pour les clients, telles que des réservations, la gestion des paiements et l’envoi de nouvelles commandes. + Envoyer des e-mails sur la base d’un modèle qui informe le client d’une demande de remboursement envoyée. La structure de l’e-mail est toujours la même, mais des valeurs spécifiques peuvent varier, telles que le numéro de commande, le montant du remboursement et le compte de paiement. Vous pouvez configurer le bloc Afficher la vue pour que l’agent fournisse ces types d’informations. + Créer des entrées CRM dans l’espace de travail existant de l’agent. Utiliser les attributs de contact pour préremplir le formulaire avec des informations pertinentes, telles que le nom et le numéro de téléphone du client. Et pour guider les clients à travers les étapes d’une conversation par chat pour : + Effectuer des paiements en fournissant les informations de leur carte de crédit. + Fournir des données d’identification personnelle, telles que l’adresse de leur domicile pour mettre à jour leur profil. + Recevoir des informations relatives à leur compte en fournissant leur numéro de compte client. ## Types de contacts Vous pouvez utiliser le bloc **Afficher la vue** dans un flux de guide lancé (par le bloc [Définir le flux d'événements](set-event-flow.md)) à partir de n’importe quel type de contact, y compris la voix, le chat, les e-mails ou les tâches. Si vous envisagez de proposer un guide à un client, vous pouvez utiliser le bloc **Afficher la vue** directement dans le flux de chat principal. | Type de contact | Pris en charge ? | | --- | --- | | Voix | Oui | | Chat | Oui | | Sous-tâche | Oui | | E-mail | Oui | ## Types de flux Vous pouvez utiliser ce bloc dans les [types de flux](create-contact-flow.md#contact-flow-types) suivants : | Type de flux | Pris en charge ? | | --- | --- | | Flux entrant | Oui | | Flux d’attente des clients | Non | | Flux de message discret client | Non | | Flux de message discret sortant | Non | | Flux d’attente des agents | Non | | Flux de message discret agent | Non | | Flux de transfert vers les agents | Non | | Flux de transfert vers les files d'attente | Non | ## Comment configurer ce bloc Vous pouvez configurer le bloc **Afficher la vue** en utilisant le site Web de l' Connect Customer administrateur ou en utilisant l'[ShowView](https://docs.aws.amazon.com/connect/latest/APIReference/participant-actions-showview.html)action dans le langage Amazon Connect Flow. **Topics** + [Sélection de la ressource Vue](#choose-viewresource) + [Comment utiliser l’option Définir manuellement](#view-setmanually) + [Comment utiliser l’option Définir de manière dynamique](#view-setdynamically) + [Comment utiliser l'option Définir JSON](#show-view-block-example-json) + [Cette vue contient des données sensibles](#showview-sensitive-data) + [Branches des blocs de flux](#showview-branches) + [Conseils de configuration supplémentaires](#showview-tips) + [Données générées par ce bloc](#showview-data) ### Sélection de la ressource Vue Amazon Connect inclut un ensemble de vues que vous pouvez ajouter à l’espace de travail de l’agent. Spécifiez la vue dans la zone **Vue**, comme illustré dans l’image suivante : ![Page des propriétés du bloc Afficher la vue.](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/show-view-block-form.png) Vous trouverez ci-dessous une brève description de ces vues AWS gérées. Pour plus d’informations sur chacune d’elles, consultez [Configurer des vues AWS gérées pour l'espace de travail d'un agent dans Amazon Connect](view-resources-managed-view.md). Les vues gérées par le client sont également prises en charge. Pour plus d’informations, consultez la documentation sur les [vues gérées par le client](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/customer-managed-views-customer-managed-views--page). + **Vue Détails** : affiche des informations destinées à l’agent et fournit une liste des actions qu’il peut effectuer. Un cas d’utilisation courant de la vue Détails consiste à présenter un écran contextuel à l’agent au début d’un appel. + **Vue Liste** : affiche les informations sous forme de liste d’éléments avec des titres et des descriptions. Ces éléments peuvent également servir de liens auxquels sont associées des actions. Elle prend également en charge en option la navigation arrière standard et l’en-tête de contexte persistant. + **Vue Formulaire** : fournit aux client et aux agents des champs de saisie pour recueillir les données requises et les envoyer aux systèmes dorsaux. Cette vue se compose de plusieurs sections avec un style de section prédéfini avec un en-tête. Le corps se compose de différents champs de saisie organisés sous forme de colonne ou de grille. + **Vue Confirmation** : page que voient les clients et les agents une fois qu’un formulaire a été soumis ou qu’une action a été effectuée. Dans ce modèle prédéfini, vous pouvez fournir un résumé de ce qui s’est passé, des prochaines étapes et des invites. La vue Confirmation comprend une barre d’attributs persistante, une icône ou une image, un titre et un sous-titre, ainsi qu’un bouton de navigation pour revenir à l’accueil. + **Vue Cartes** : vous permet de guider les clients et les agents en leur présentant une liste de rubriques parmi lesquelles choisir lorsque le contact est présenté à l’agent. Les propriétés du bloc **Afficher la vue** sont renseignées de façon dynamique en fonction de la ressource **Vue** que vous sélectionnez. Par exemple, si vous choisissez **Formulaire**, vous devez configurer les actions **Suivant** et **Précédent**, qui sont affichées. Ce ne sont là que quelques-unes des actions de la vue. ![Vue définie sur Forme et version définie sur 1.](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/show-view-block-version2.png) Les sections suivantes expliquent comment configurer les actions du **formulaire** manuellement, de manière dynamique ou à l’aide de l’option JSON. ### Comment utiliser l’option Définir manuellement 1. Sur la page **Propriétés**, dans la section **Vue**, choisissez **Formulaire** dans le menu déroulant et définissez **Utiliser la version** sur 1, qui est la valeur par défaut. L’image suivante montre une page **Propriétés** configurée avec ces options. ![Vue définie sur Forme et version définie sur 1.](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/show-view-block-version1.png) 1. La page **Propriétés** affiche un ensemble de champs basés sur la vue Formulaire. Choisissez **Définir manuellement** et entrez le texte à afficher sur les composants de l’interface utilisateur Vue. L’image suivante montre les composants **Suivant** et **Précédent** de l’interface utilisateur. Le nom d’affichage des composants a été défini manuellement sur **Suivant** et **Précédent**. C'est ce qui apparaîtra sur l'espace de travail de l'agent lorsque le step-by-step guide sera affiché. ![Composants Suivant et Précédent définis manuellement dans l’interface utilisateur.](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/show-view-block-version2.png) ### Comment utiliser l’option Définir de manière dynamique 1. Sur la page **Propriétés**, dans la section **Vue**, choisissez **Formulaire** dans le menu déroulant et définissez **Utiliser la version** sur 1, qui est la valeur par défaut. L’image suivante montre une page **Propriétés** configurée avec ces options. ![Vue définie sur Forme et version définie sur 1.](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/show-view-block-version1.png) 1. La page **Propriétés** affiche un ensemble de champs basés sur la vue Formulaire. Choisissez **Définir de manière dynamique**. Dans le menu déroulant **Espace de noms**, choisissez l’attribut de contact, puis la clé. L'image suivante montre un **titre** qui sera affiché dynamiquement dans le step-by-step guide pour afficher le nom de famille du client. ![Titre dans le modèle d’interface utilisateur Vue.](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/show-view-block-dynamic.png) ### Comment utiliser l'option Définir JSON Cette section présente un exemple d'utilisation de l'option **Définir JSON**. 1. Dans la section **Vue** de la page **Propriétés** du bloc Afficher la vue, choisissez **Formulaire** dans le menu déroulant et définissez **Version** sur **1**, qui correspond à la valeur par défaut. Ces options sont décrites dans l’image suivante. ![Vue définie sur Forme et version définie sur 1.](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/show-view-block-version1.png) 1. Lorsque vous choisissez la vue **Formulaire**, le schéma d’entrée de la vue s’affiche sur la page **Propriétés**. Le schéma comporte les sections suivantes dans lesquelles vous pouvez ajouter des informations : **Sections **AttributeBar****, **Retour**, **Annuler **ErrorText****, **Modifier**, etc. 1. L'image suivante montre le **AttributeBar**paramètre et l'option **Set using JSON**. Pour afficher l'intégralité du fichier JSON que vous avez collé, cliquez sur le coin de la case et tirez vers le bas. ![Les paramètres d'entrée.](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/show-view-block-json.png) **Astuce** Corrigez les erreurs si le fichier JSON n'est pas valide. L'image suivante montre un exemple de message d'erreur en raison de la présence d'une virgule. ![Un message d'erreur indiquant que le fichier JSON n'est pas valide.](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/show-view-block-json-invalid.png) 1. Lorsque vous sélectionnez une vue personnalisée, il est probable que vous souhaitiez définir les valeurs des entrées dynamiques via l’option **Définir JSON**. Dans ce cas, vous pouvez choisir **Appliquer des exemples de données** pour préremplir l’entrée avec un schéma JSON contenant des exemples de données. Assurez-vous de [configurer les références dynamiques](no-code-ui-builder-properties-dynamic-fields.md) pour les données dynamiques (par exemple, $.Channel) dans le générateur d'interface utilisateur à remplir au moment de l'exécution. L’image suivante montre l’option **Appliquer des exemples de données**. ![Option Appliquer des exemples de données dans le bloc Afficher la vue.](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/apply-sample-data.png) 1. Choisissez **Enregistrer** et publier lorsque vous êtes prêt. L'exemple de code suivant montre comment cette même configuration serait représentée par l'[ShowView](https://docs.aws.amazon.com/connect/latest/APIReference/participant-actions-showview.html)action dans le langage Flow : ``` { "Parameters": { "ViewResource": { "Id": "arn:aws:connect:us-west-2:aws:view/form:1" }, "InvocationTimeLimitSeconds": "2", "ViewData": { "Sections": "Sections", "AttributeBar": [ { "Label": "Example", "Value": "Attribute" }, { "Label": "Example 2", "Value": "Attribute 2" }, { "Label": "Example 3", "Value": "Case 123456", "LinkType": "case", "ResourceId": "123456", "Copyable":true }, { "Label": "Example 3", "Value": "Case 123456", "LinkType": "case", "ResourceId": "https:example.com" } ], "Back": { "Label": "Back" }, "Cancel": { "Label": "Cancel" }, "Edit": "Edit", "ErrorText": "ErrotText", "Heading": "$.Customer.LastName", "Next": "Next", "Previous": "Previous", "SubHeading": "$.Customer.FirstName", "Wizard": { "Heading": "Progress tracker", "Selected": "Step Selected" } } }, "Identifier": "53c6be8a-d01f-4dd4-97a5-a001174f7f66", "Type": "ShowView", "Transitions": { "NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412", "Conditions": [ { "NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412", "Condition": { "Operator": "Equals", "Operands": [ "Back" ] } }, { "NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412", "Condition": { "Operator": "Equals", "Operands": [ "Next" ] } }, { "NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412", "Condition": { "Operator": "Equals", "Operands": [ "Step" ] } } ], "Errors": [ { "NextAction": "b88349e3-3c54-4915-8ea0-818601cd2d03", "ErrorType": "NoMatchingCondition" }, { "NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412", "ErrorType": "NoMatchingError" }, { "NextAction": "b88349e3-3c54-4915-8ea0-818601cd2d03", "ErrorType": "TimeLimitExceeded" } ] } } ``` ### Cette vue contient des données sensibles Il est recommandé d’activer **Cette vue contient des données sensibles** lors de la collecte de données de cartes de crédit, d’adresses personnelles ou de tout autre type de données sensibles auprès des clients. En activant cette option, les données soumises par le client ne sont pas enregistrées dans les transcriptions ni les enregistrements de contact, et ne sont pas visibles pour les agents (par défaut). N’oubliez pas de désactiver la journalisation si l’option **Définir le comportement de journalisation** est activée dans votre flux de contacts, afin de garantir que les données clients sensibles ne soient pas incluses dans les journaux de flux. ![Case à cocher Cette vue contient des données sensibles.](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/show-view-block-form-sensitive-data.png) **Astuce** Créez un [module de flux](contact-flow-modules.md) avec un bloc Afficher la vue qui a l’option **Cette vue contient des données sensibles** activée, une fonction Lambda et des invites pour créer un module d’expérience de paiement réutilisable qui peut être placé dans un flux de contact entrant existant. ### Branches des blocs de flux L’image suivante montre un exemple de bloc **Afficher la vue** configuré. Ce bloc prend en charge les branches conditionnelles. Les branches dépendent donc de la vue sélectionnée. Il prend également en charge les branches **Erreur** et **Expiration**. ![Un bloc Afficher la vue configuré.](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/show-view-block-sq-config.png) + Branches conditionnelles : ces branches sont basées sur la vue sélectionnée dans le bloc **Afficher la vue**. L’image précédente montre que le bloc est configuré pour la vue **Formulaire** et les actions suivantes : **Retour**, **Suivant** et **Aucune correspondance**. + Pour cette configuration spécifique, lors de l’exécution, le contact par chat est acheminé vers les branches inférieures **Retour** ou **Suivant** en fonction de ce sur quoi l’agent clique dans la vue. **Aucune correspondance** est possible uniquement si l'utilisateur possède un composant d'action avec une valeur Action personnalisée. + **Erreur** : l’échec de l’exécution (c’est-à-dire l’échec de l’affichage de la vue sur l’espace de travail de l’agent ou de la capture de l’action de sortie de la vue) entraîne le renvoi vers la branche **Erreur**. + **Délai d'attente** : indique le temps que l'agent doit prendre pour terminer cette étape du step-by-step guide. Si l’agent met plus de temps à terminer l’étape que la durée spécifiée dans Expiration (par exemple, l’agent n’a pas fourni les informations requises dans le délai spécifié), cette étape utilise la branche Expiration. Lorsqu'une étape expire, le step-by-step guide peut suivre la logique définie dans le flux pour déterminer l'étape suivante. Par exemple, l’étape suivante pourrait être de réessayer de demander des informations ou de mettre fin à l’expérience du guide. Le client est en relation avec l’agent à ce stade. L’expérience du client ne sera donc pas modifiée en raison du délai imparti. ### Conseils de configuration supplémentaires Créez un module de flux avec ce paramètre de journalisation, ce bloc et Lambda pour générer un module d’expérience de paiement réutilisable qui se déconnecte sans cesse et qui peut être placé dans n’importe quel flux entrant existant. Attribuez l'autorisation de profil de sécurité suivante aux agents afin qu'ils puissent utiliser les step-by-step guides : + **Applications d'agent - Vues personnalisées - Tout** : cette autorisation permet aux agents de consulter des step-by-step guides dans leur espace de travail d'agent. Attribuez l'autorisation de profil de sécurité suivante aux responsables et aux analystes commerciaux afin qu'ils puissent créer les step-by-step guides : + **Canaux et flux - Vues** : cette autorisation permet aux responsables de créer des step-by-step guides. Pour en savoir plus sur l’ajout d’autorisations à un profil de sécurité existant, consultez [Mise à jour de profils de sécurité dans Amazon Connect](update-security-profiles.md). ### Données générées par ce bloc Au moment de l’exécution, le bloc **Afficher la vue** génère des données qui sont le résultat de l’exécution de la ressource Vue. Les vues génèrent deux types de données principaux : + les données `Action` dans l’interface utilisateur Vue (sur l’espace de travail de l’agent) et les données `ViewResultData` qui correspondent aux données `Output`. Lorsque vous utilisez un bloc **Afficher la vue**, **Action** représente une branche et est définie sur l’attribut de contact `$.Views.Action` dans l’espace de noms Vues. + Les données `Output` sont définies sur l’attribut de contact `$.Views.ViewResultData` sous l’espace de noms Vues. Les valeurs d’`Action` et les données `Output` sont déterminées par les composants avec lesquels l’agent a interagi lors de son utilisation de la ressource Vue. #### Comment utiliser ces données dans les différentes parties du flux + Lorsque le bloc reçoit une réponse de l’application cliente, pour référencer les données de sortie dans des flux, utilisez ` `$.Views.Action` et `$.Views.ViewResultData`. + Lorsque vous utilisez une vue avec le bloc **Afficher la vue**, `Action` représente une branche capturée dans l’attribut de contact sous l’espace de noms Vues en tant que `$.Views.Action`, et les données de sortie de la vue sont définies sur l’attribut de contact `$.Views.ViewResultData`. + Vous pouvez renvoyer vers le données générées par le bloc **Afficher la vue** en utilisant le chemin JSON dans les attributs de contact (vous pouvez spécifier les attributs de contact dans les options Définir manuellement ou Définir JSON) ou en utilisant le menu déroulant du sélecteur d’attributs lorsque vous choisissez **Définir de manière dynamique**. ## Scénarios d'erreur **Note** Lorsque le bloc `ShowView` utilise une branche Erreur (aucune correspondance, expiration ou erreur), vous souhaiterez peut-être rediriger votre flux vers un point précédent du flux. Si vous créez une boucle de ce type dans le flux, le flux de contacts peut s’exécuter indéfiniment jusqu’à ce que le contact par chat expire. Nous vous recommandons d’utiliser le bloc de flux de contacts `Loop` afin de limiter le nombre de tentatives pour un bloc `ShowView` donné. Un contact est acheminé vers le bas de la branche **Erreur** dans les situations suivantes : + Connect Customer ne parvient pas à capturer l'action de l'utilisateur sur un composant View UI dans l'espace de travail de l'agent. Cela peut être dû à un problème réseau intermittent ou à un problème lié au service multimédia. ## Entrée de journal de flux Les journaux de flux d’Amazon Connect vous fournissent des détails en temps réel sur les événements de votre flux à mesure que les clients interagissent avec lui. Pour de plus amples informations, veuillez consulter [Utilisation des journaux de flux pour suivre les événements dans les flux Amazon Connect](about-contact-flow-logs.md). Après la ShowView saisie d'un échantillon (journal d'entrée) ``` { "ContactId": "string", "ContactFlowId": "string", "ContactFlowName": "string", "ContactFlowModuleType": "ShowView", "Timestamp": "2023-06-06T16:08:26.945Z", "Parameters": { "Parameters": { "Cards": [ { "Summary": { "Id": "See", "Heading": "See cancel options" } }, { "Summary": { "Id": "Change", "Heading": "Change Booking" } }, { "Summary": { "Id": "Get", "Heading": "Get Refund Status" } }, { "Summary": { "Id": "Manage", "Heading": "Manage rewards" } } ], "NoMatchFound": { "Label": "Do Something Else", "type": "bubble" } }, "TimeLimit": "300", "ViewResourceId": "cards" } } ``` Après un exemple ShowView de sortie (journal de sortie) ``` { "Results": "string", "ContactId": "string", "ContactFlowId": "string", "ContactFlowName": "string", "ContactFlowModuleType": "ShowView", "Timestamp": "2023-06-06T16:08:35.201Z" } ``` ## Exemples de flux Vous pouvez télécharger un exemple de flux à partir de l'étape 2 sur le blog suivant : [Getting started with step-by-step guides](https://aws.amazon.com/blogs/contact-center/getting-started-with-step-by-step-guides-for-the-amazon-connect-agent-workspace/). Nous vous recommandons de suivre les étapes décrites dans ce blog pour découvrir comment créer des flux configurés avec des vues gérées par AWS et comment exécuter ces flux pour les contacts médias entrants. ## Ressources supplémentaires Consultez les rubriques suivantes pour en savoir plus sur les step-by-step guides et les vues. + [Step-by-step Guides pour configurer l'espace de travail de votre agent Amazon Connect](step-by-step-guided-experiences.md) + Découvrez [comment implémenter la collecte de données sensibles dans le chat Amazon Connect](https://aws.amazon.com/blogs/contact-center/collecting-sensitive-information-with-amazon-connect-chat/). + Pour step-by-step obtenir des instructions sur la façon de configurer une vue gérée par le client, consultez la section Vues gérées par le [client](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/customer-managed-views-customer-managed-views--page). + Pour configurer une expérience de plug-and-play step-by-step guide dans votre instance, consultez [Getting started with step-by-step guides](https://aws.amazon.com/blogs/contact-center/getting-started-with-step-by-step-guides-for-the-amazon-connect-agent-workspace/). + [Vues gérées par AWS : configuration commune](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/aws-managed-views-common-configuration--page) + [Vues : composants de l’interface utilisateur](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/ui-component-ui-components--page) + [Afficher les actions](https://docs.aws.amazon.com/connect/latest/APIReference/view-api.html) dans la *Référence des API Amazon Connect*.