"Actions": ["CardSelected", "Skip"]
}
```
**Modèle JSON (non stringifié)**
```
{
"Head": {
"Title": "CustomerManagedFormView",
"Configuration": {
"Layout": {
"Columns": ["10", "2"] // Default column width for each component is 12, which is also the width of the entire view.
}
}
},
"Body": [
{
"_id": "card-container",
"Type": "Container",
"Props": {},
"Content": [
{
"_id": "cafe_card",
"Type": "Card",
"Props": {
"Id": "cafe-card",
"Heading": "Cafe Card",
"Icon": "Cafe",
"Status": "Status Field",
"Description": "This is the cafe card.",
"Action": "CardSelected" // Note that these actions also appear in the view-content.json file.
},
"Content": []
},
{
"_id": "no_icon_card",
"Type": "Card",
"Props": {
"Id": "NoIconCard",
"Heading": "$.NoIconCardHeading",
"Status": "Status Field",
"Description": "This is the icon card.",
"Action": "CardSelected" // Note that these actions also appear in the view-content.json file.
},
"Content": []
}
]
},
{
"_id": "button",
"Type": "Button",
"Props": { "Action": "Skip" }, // Note that these actions also appear in the view-content.json file.
"Content": ["Skip"]
}
]
}
```
## La vue
**Entrées**
`$.NoIconCardHeading` indique qu’une entrée pour le champ `NoIconCardHeading` est nécessaire pour afficher la vue.
Supposons que `NoIconCardHeading` est défini sur `No Icon Card`.
**Apparence**
![\[Image de la carte de visualisation de l’espace de travail de l’agent.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/view-resources-custom-the-view.png)
## Afficher un exemple de sortie
Les vues produisent deux données principales : les données d’`Action` effectuée et les données `Output`.
Lorsque vous utilisez une vue avec le [bloc Afficher la vue](https://docs.aws.amazon.com/connect/latest/adminguide/show-view-block.html), `Action` représente une branche et les données `Output` sont définies sur l’attribut de flux `$.Views.ViewResultData`, comme indiqué dans la documentation du bloc Afficher la vue.
**Scénario 1 : Choisissez la carte **Cafe Card****
```
"Action": "CardSelected"
"Output": {
"Heading": "CafeCard",
"Id": "CafeCard"
}
```
**Scénario 2 : Choisissez le bouton **Ignorer****
```
"Action": "Skip"
"Output": {
"action": "Button"
}
```
## Exemple de sortie de la vue formulaire
Lorsque vous utilisez la **vue gérée par AWS (mode formulaire)**, le résultat des données du formulaire sera affiché en dessous. *FormData*
```
{
FormData: {
email: "a@amazon.com"
}
}
```
Vous pouvez accéder aux données dans le bloc Afficher la vue, par exemple `$.Views.ViewResultData.FormData.email`.
Lorsque vous utilisez la **vue personnalisée (avec le composant de formulaire)**, le résultat des données du formulaire apparaît directement sous la sortie.
```
{
email: "a@amazon.com"
}
```
Vous pouvez accéder aux données dans le bloc Afficher la vue, par exemple `$.Views.ViewResultData.email`.
# Configurer des vues AWS gérées pour l'espace de travail d'un agent dans Amazon Connect
Amazon Connect inclut un ensemble de vues auxquelles vous pouvez ajouter l'espace de travail de votre agent. Consultez ce qui suit pour plus de détails sur la façon de configurer les différentes vues AWS gérées.
------
#### [ Detail view ]
La **vue Détails** permet d’afficher des informations à l’agent et de lui fournir 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.
+ Les actions de cette vue peuvent être utilisées pour permettre à un agent de passer à l'étape suivante d'un step-by-step guide ou pour invoquer des flux de travail entièrement nouveaux.
+ **Sections** est le seul composant obligatoire. C’est là que vous pouvez configurer le corps de la page que vous souhaitez montrer à l’agent.
+ Les composants facultatifs tels que le **AttributeBar**sont pris en charge par cette vue.
[Documentation](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-detail--with-all) interactive pour la **vue Détails**
L’image suivante présente un exemple de **vue Détails**. Elle comporte un titre de page, une description et quatre exemples.
![\[La vue Détails, avec le titre de page, la description et quatre exemples avec des attributs.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/details-view-page-heading-sq.png)
**Sections**
+ Le contenu peut être une chaîne statique, une paire clé-valeur TemplateString ou une paire clé-valeur. Il peut s’agir d’un point de données unique ou d’une liste. Pour plus d’informations, consultez [TemplateString](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#templatestring) ou [AtrributeSection](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute-section).
**AttributeBar (Facultatif)**
+ Facultatif. Si elle est fournie, la barre d’attributs s’affiche en haut de la vue.
+ Il s'agit d'une liste d'objets avec les propriétés requises, **Label**, **Value**, et les propriétés facultatives **LinkType**ResourceId****, **Copyable** et **Url**. Pour plus d’informations, consultez [Attribut](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute).
+ **LinkType**peut être externe ou connecter une application telle qu'un boîtier.
+ Lorsqu’elle est *externe*, un utilisateur peut accéder à une nouvelle page de navigateur, qui est configurée avec **Url**.
+ Le *cas* échéant, l'utilisateur peut accéder à un nouveau détail du dossier dans l'espace de travail de l'agent, configuré avec ResourceId.
+ **Copiable** permet aux utilisateurs de copier le ResourceId en le sélectionnant avec votre périphérique de saisie.
**Retour (facultatif)**
+ Facultatif, mais obligatoire si aucune action n’est incluse. S’il est fourni, le lien de navigation arrière s’affiche.
+ Est un objet avec une *Étiquette* qui contrôle ce qui est affiché dans le texte du lien.
**Titre (facultatif)**
+ Facultatif, s’il est fourni, le titre est affiché sous forme de texte.
**Description (facultatif)**
+ Facultatif, s’il est fourni, le texte de description s’affiche sous le titre.
**Actions (facultatif)**
+ Facultatif. Si elle est fournie, une liste d’actions s’affiche en bas de la page.
**Exemple d’entrée**
```
{
"AttributeBar": [
{"Label": "Example", "Value": "Attribute"},
{ "Label": "Example 2", "Value": "Attribute 3", "LinkType": "case", "ResourceId": "123456", "Copyable": true }
],
"Back": {
"Label": "Back"
},
"Heading": "Hello world",
"Description": "This view is showing off the wonders of a detail page",
"Sections": [{
"TemplateString": "This is an intro paragraph"
}, "abc"],
"Actions": ["Do thing!", "Update thing 2!"],
}
```
**Exemple de sortie**
```
{
Action: "ActionSelected",
ViewResultData: {
actionName: "Action 2"
}
}
```
------
#### [ List view ]
La **vue Liste** permet d’afficher les informations sous la forme d’une liste d’éléments avec des titres et des descriptions. Les é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.
[Documentation](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-list--with-all) interactive pour la **vue Liste**
L’image suivante présente un exemple de vue Liste. Elle comporte une colonne contenant trois éléments.
![\[La vue Liste, un élément de liste avec lien et deux éléments sans liens.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/list-view-column-sq.png)
**Éléments**
+ Obligatoire, affiche ces éléments sous forme de liste.
+ Chaque élément peut avoir un titre, une description, une icône et un ID.
+ Toutes les propriétés sont facultatives.
+ Lorsque l’ID est défini, la sortie inclut la valeur.
**AttributeBar (Facultatif)**
+ Facultatif. Si elle est fournie, la barre d’attributs s’affiche en haut de la vue.
+ Il s'agit d'une liste d'objets avec les propriétés requises, **Label**, **Value**, et les propriétés facultatives **LinkType**ResourceId****, **Copyable** et **Url**. Pour plus d’informations, consultez [Attribut](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute).
+ **LinkType**peut être externe ou connecter une application telle qu'un boîtier.
+ Lorsqu’elle est *externe*, un utilisateur peut accéder à une nouvelle page de navigateur, qui est configurée avec **Url**.
+ Le *cas* échéant, l'utilisateur peut accéder à un nouveau détail du dossier dans l'espace de travail de l'agent, configuré avec ResourceId.
+ **Copiable** permet aux utilisateurs de copier le ResourceId en le sélectionnant avec votre périphérique de saisie.
**Retour (facultatif)**
+ Facultatif, mais obligatoire si aucune action n’est incluse. S’il est fourni, le lien de navigation arrière s’affiche.
+ Est un objet avec une *Étiquette* qui contrôle ce qui est affiché dans le texte du lien.
**Titre (facultatif)**
+ Facultatif, s’il est fourni, le titre est affiché sous forme de texte.
**SubHeading (Facultatif)**
+ Facultatif, s’il est fourni, le texte est affiché comme titre de la liste.
**Exemple de données d’entrée**
```
{
"AttributeBar": [
{ "Label": "Example", "Value": "Attribute" },
{ "Label": "Example 2", "Value": "Attribute 2" },
{ "Label": "Example 2", "Value": "Attribute 3", "LinkType": "external", "Url": "https://www.amzon.com" }
],
"Back": {
"Label": "Back"
},
"Heading": "José may be contacting about...",
"SubHeading": "Optional List Title",
"Items": [
{
"Heading": "List item with link",
"Description": "Optional description here with no characters limit. We can just wrap the text.",
"Icon": "School",
"Id": "Select_Car"
},
{
"Heading": "List item not a link",
"Icon": "School",
"Description": "Optional description here with no characters limit."
},
{
"Heading": "List item not a link and no image",
"Description": "Optional description here with no characters limit."
},
{
"Heading": "List item no image and with link",
"Description": "Optional description here with no characters limit."
}
]
}
```
**Exemple de données de sortie**
```
{
Action: "ActionSelected",
ViewResultData: {
actionName: "Select_Car"
}
}
```
------
#### [ Form view ]
La **vue Formulaire** vous permet de fournir 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.
[Documentation](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-form--with-all) interactive pour la **vue Formulaire**
L’image suivante montre un exemple de vue Formulaire pour une réservation de location de voiture. Elle contient des champs de lieu et de date.
![\[La vue Formulaire avec les champs de lieu et de date à titre d’exemple.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/form-view-sq.png)
**Sections**
+ Emplacement dans la **vue Formulaire** où se trouvent les champs de saisie et les champs d’affichage.
+ **SectionProps**
+ **Titre**
+ Titre de la section
+ **Type**
+ Type de section
+ FormSection (formulaires gérant les entrées de l'utilisateur) ou DataSection (affichage d'une liste d'étiquettes et de valeurs)
+ **Éléments**
+ Liste des données en fonction du type. Quand `Type` est `DataSection`, les données doivent être des attributs. Si `Type` est `FormSection`, les données doivent être des composants du formulaire.
+ **isEditable**
+ Afficher le bouton de modification dans l’en-tête lorsqu’il est fourni lorsque le type de section est `DataSection`.
+ Booléen
**Assistant (facultatif)**
+ Afficher **ProgressTracker**sur le côté gauche de la vue.
+ Chaque article peut avoir un titre, une description et une option.
+ Le titre est obligatoire
**Retour (facultatif)**
+ Est un objet ou une chaîne avec une étiquette qui contrôle ce qui est affiché dans le texte du lien.
**Suivant (facultatif)**
+ Cette action est utilisée lorsqu’il ne s’agit pas de la dernière étape.
+ Est un objet (FormActionProps) ou une chaîne. Pour de plus amples informations, veuillez consulter [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps).
**Annuler (facultatif)**
+ Cette action est utilisée lorsqu’il ne s’agit pas de la première étape.
+ Est un objet (FormActionProps) ou une chaîne. Pour de plus amples informations, veuillez consulter [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps).
**Précédent (facultatif)**
+ Cette action est utilisée lorsqu’il ne s’agit pas de la première étape.
+ Est un objet (FormActionProps) ou une chaîne. Pour de plus amples informations, veuillez consulter [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps).
**Modifier (facultatif)**
+ Cette action est affichée lorsque le type de section est `DataSection`.
+ Est un objet (FormActionProps) ou une chaîne. Pour de plus amples informations, veuillez consulter [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps).
**AttributeBar (Facultatif)**
+ Facultatif. Si elle est fournie, la barre d’attributs s’affiche en haut de la vue.
+ Il s'agit d'une liste d'objets avec les propriétés requises, **Label**, **Value**, et les propriétés facultatives **LinkType**ResourceId****, **Copyable** et **Url**. Pour plus d’informations, consultez [Attribut](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute).
+ **LinkType**peut être externe ou connecter une application telle qu'un boîtier.
+ Lorsqu’elle est *externe*, un utilisateur peut accéder à une nouvelle page de navigateur, qui est configurée avec **Url**.
+ Le *cas* échéant, l'utilisateur peut accéder à un nouveau détail du dossier dans l'espace de travail de l'agent, configuré avec ResourceId.
+ **Copiable** permet aux utilisateurs de copier le ResourceId en le sélectionnant avec votre périphérique de saisie.
**Titre (facultatif)**
+ Chaîne qui s’affiche comme titre de page.
**SubHeading (Facultatif)**
+ Message secondaire pour la page.
**ErrorText (Facultatif)**
+ Facultatif, affiche les messages d’erreur côté serveur.
+ ErrorProps; Chaîne
**Exemple de données d’entrée**
```
{
"AttributeBar": [{
"Label": "Queue",
"Value": "Sales"
},
{
"Label": "Case ID",
"Value": "1234567"
},
{
"Label": "Case",
"Value": "New reservation"
},
{
"Label": "Attribute 3",
"Value": "Attribute"
}
],
"Back": {
"Label": "Back Home"
},
"Next": {
"Label": "Confirm Reservation",
"Details": {
"endpoint": "awesomecustomer.com/submit",
}
},
"Cancel": {
"Label": "Cancel"
},
"Heading": "Modify Reservation",
"SubHeading": "Cadillac XT5",
"ErrorText": {
"Header": "Modify reservation failed",
"Content": "Internal Server Error, please try again"
},
"Sections": [{
"_id": "pickup",
"Type": "FormSection",
"Heading": "Pickup Details",
"Items": [{
"LayoutConfiguration": {
"Grid": [{
"colspan": {
"default": "12",
"xs": "6"
}
}]
},
"Items": [{
"Type": "FormInput",
"Fluid": true,
"InputType": "text",
"Label": "Location",
"Name": "pickup-location",
"DefaultValue": "Seattle"
}]
}, {
"LayoutConfiguration": {
"Grid": [{
"colspan": {
"default": "6",
"xs": "4"
}
}, {
"colspan": {
"default": "6",
"xs": "4"
}
}]
},
"Items": [{
"Label": "Day",
"Type": "DatePicker",
"Fluid": true,
"DefaultValue": "2022-10-10",
"Name": "pickup-day"
}, {
"Label": "Time",
"Type": "TimeInput",
"Fluid": true,
"DefaultValue": "13:00",
"Name": "pickup-time"
}]
}]
}, {
"_id": "dropoff",
"Heading": "Drop off details",
"Type": "FormSection",
"Items": [{
"LayoutConfiguration": {
"Grid": [{
"colspan": {
"default": "12",
"xs": "6"
}
}]
},
"Items": [{
"Label": "Location",
"Type": "FormInput",
"Fluid": true,
"DefaultValue": "Lynnwood",
"Name": "dropoff-location"
}]
}, {
"LayoutConfiguration": {
"Grid": [{
"colspan": {
"default": "6",
"xs": "4"
}
}, {
"colspan": {
"default": "6",
"xs": "4"
}
}]
},
"Items": [{
"Label": "Day",
"Type": "DatePicker",
"Fluid": true,
"DefaultValue": "2022-10-15",
"Name": "dropoff-day"
}, {
"Label": "Time",
"Type": "TimeInput",
"Fluid": true,
"DefaultValue": "01:00",
"Name": "dropoff-time"
}]
}]
}]
}
```
**Exemple de données de sortie**
```
{
Action: "Submit",
ViewResultData: {
FormData: {
"dropoff-day": "2022-10-15",
"dropoff-location": "Lynnwood",
"dropoff-time": "01:00",
"pickup-day": "2022-10-10",
"pickup-location": "Seattle",
"pickup-time": "13:00"
},
StepName:"Pickup and drop off"
}
}
```
------
#### [ Confirmation view ]
La **vue Confirmation** est une page qui s’affiche aux utilisateurs 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/image, un titre et un sous-titre, ainsi qu’un bouton de navigation pour revenir à l’accueil.
[Documentation](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-confirmation--with-all) interactive pour la **vue Confirmation**
L’image suivante montre un exemple de confirmation.
![\[La vue Confirmation, une coche et un texte pour confirmer la location de voiture.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/confirmation-view-check-sq.png)
**Suivant**
+ Obligatoire.
+ Bouton d’action pour Suivant
+ Étiquette : étiquette sous forme de chaîne pour le bouton de navigation.
**AttributeBar (Facultatif)**
+ Facultatif. Si elle est fournie, la barre d’attributs s’affiche en haut de la vue.
+ Il s'agit d'une liste d'objets avec les propriétés requises, **Label**, **Value**, et les propriétés facultatives **LinkType**ResourceId****, **Copyable** et **Url**. Pour plus d’informations, consultez [Attribut](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute).
+ **LinkType**peut être externe ou connecter une application telle qu'un boîtier.
+ Lorsqu’elle est *externe*, un utilisateur peut accéder à une nouvelle page de navigateur, qui est configurée avec **Url**.
+ Le *cas* échéant, l'utilisateur peut accéder à un nouveau détail du dossier dans l'espace de travail de l'agent, configuré avec ResourceId.
+ **Copiable** permet aux utilisateurs de copier le ResourceId en le sélectionnant avec votre périphérique de saisie.
**Titre (facultatif)**
+ Chaîne qui s’affiche comme titre de page.
**SubHeading (Facultatif)**
+ Message secondaire pour la page.
**Graphique (facultatif)**
+ Affiche une image
+ Objet avec la clé suivante :
+ Inclure - booléen, si la valeur est true, le graphique est inclus dans la page.
**Exemple de données d’entrée**
```
{
"AttributeBar": [
{ "Label": "Attribute1", "Value": "Value1" },
{ "Label": "Attribute2", "Value": "Value2" },
{ "Label": "Attribute3", "Value": "Amazon", "LinkType": "external", "Url": "https://www.amzon.com" }
],
"Next": {
"Label": "Go Home"
},
"Graphic": {
"Include": true
},
"Heading": "I have updated your car rental reservation for pickup on July 22.",
"SubHeading": "You will be receiving a confirmation shortly. Is there anything else I can help with today?",
}
```
**Exemple de données de sortie**
```
{
"Action": "Next",
"ViewResultData": {
"Label": "Go Home"
}
}
```
------
#### [ Cards view ]
La **vue Cartes** vous permet de guider l’agent en lui présentant une liste de sujets parmi lesquels choisir dès qu’il accepte le contact.
[Documentation](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-cards--with-all) interactive pour la **vue Cartes**
*Présentez des cartes aux agents.* L’image suivante montre un exemple de six cartes présentées à l’agent : l’une pour effectuer une nouvelle réservation et les autres pour vérifier les réservations pour les prochains voyages.
![\[Un jeu de six cartes.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/solve-view-sq.png)
*Lorsque les agents choisissent une carte, plus d’informations sont révélées.* L’image suivante montre une carte ouverte qui affiche les détails d’une réservation.
![\[Une carte ouverte qui affiche les détails d’une réservation.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/card-view-sq.png)
**Sections**
+ Il s’agit d’une liste d’objets avec le résumé et les détails. Elle doit être fournie pour créer une carte et des détails.
+ Comprend un résumé et des détails. Pour plus d’informations sur les sous-réseaux, consultez [Résumé et détails](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-cards--with-all).
**AttributeBar (Facultatif)**
+ Facultatif. Si elle est fournie, la barre d’attributs s’affiche en haut de la vue.
+ Il s'agit d'une liste d'objets avec les propriétés requises, **Label**, **Value**, et les propriétés facultatives **LinkType**ResourceId****, **Copyable** et **Url**. Pour plus d’informations, consultez [Attribut](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute).
+ **LinkType**peut être externe ou connecter une application telle qu'un boîtier.
+ Lorsqu’elle est *externe*, un utilisateur peut accéder à une nouvelle page de navigateur, qui est configurée avec **Url**.
+ Le *cas* échéant, l'utilisateur peut accéder à un nouveau détail du dossier dans l'espace de travail de l'agent, configuré avec ResourceId.
+ **Copiable** permet aux utilisateurs de copier le ResourceId en le sélectionnant avec votre périphérique de saisie.
**Titre (facultatif)**
+ Chaîne qui s’affiche comme titre de page
**Retour (facultatif)**
+ Il s’agit d’un objet ou d’une chaîne avec une étiquette qui contrôle ce qui est affiché dans le texte du lien. Pour de plus amples informations, veuillez consulter [ActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps).
**NoMatchFound (Facultatif)**
+ Il s’agit d’une chaîne qui s’affiche pour un bouton situé sous Cartes. Pour de plus amples informations, veuillez consulter [ActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps).
**Exemple de données d’entrée**
```
{
"AttributeBar": [{
"Label": "Queue",
"Value": "Sales"
},
{
"Label": "Case ID",
"Value": "1234567"
},
{
"Label": "Case",
"Value": "New reservation"
},
{
"Label": "Attribute 3",
"Value": "Attribute"
}
],
"Back": {
"Label": "Back"
},
"Heading": "Customer may be contacting about...",
"Cards": [{
"Summary": {
"Id": "lost_luggage",
"Icon": "plus",
"Heading": "Lost luggage claim"
},
"Detail": {
"Heading": "Lost luggage claim",
"Description": "Use this flow for customers that have lost their luggage and need to fill a claim in order to get reimbursement. This workflow usually takes 5-8 minutes",
"Sections": {
"TemplateString": "Steps:- Customer provides incident information
- Customer provides receipts and agrees with amount
- Customer receives reimbursement
"
},
"Actions": [
"Start a new claim",
"Something else"
]
}
},
{
"Summary": {
"Id": "car_rental",
"Icon": "Car Side View",
"Heading": "Car rental - New York",
"Status": "Upcoming Sept 17, 2022"
},
"Detail": {
"Heading": "Car rental - New York",
"Sections": {
"TemplateString": "There is no additional information
"
}
}
},
{
"Summary": {
"Id": "trip_reservation",
"Icon": "Suitcase",
"Heading": "Trip to Mexico",
"Status": "Upcoming Aug 15, 2022",
"Description": "Flying from New York to Cancun, Mexico"
},
"Detail": {
"Heading": "Trip to Mexico",
"Sections": {
"TemplateString": "There is no additional information
"
}
}
},
{
"Summary": {
"Id": "fligh_reservation",
"Icon": "Airplane",
"Heading": "Flight to France",
"Status": "Upcoming Dec 5, 2022",
"Description": "Flying from Miami to Paris, France"
},
"Detail": {
"Heading": "Flight to France",
"Sections": {
"TemplateString": "There is no additional information
"
}
}
},
{
"Summary": {
"Id": "flight_refund",
"Icon": "Wallet Closed",
"Heading": "Refund flight to Atlanta",
"Status": "Refunded July 10, 2022"
},
"Detail": {
"Heading": "Refund trip to Atlanta",
"Sections": {
"TemplateString": "There is no additional information
"
}
}
},
{
"Summary": {
"Id": "book_experience",
"Icon": "Hot Air Balloon",
"Heading": "Book an experience",
"Description": "Top experience for european travellers"
},
"Detail": {
"Heading": "Book an experience",
"Sections": {
"TemplateString": "There is no additional information
"
}
}
}],
"NoMatchFound": {
"Label": "Can't find match?"
}
}
```
**Exemple de données de sortie**
```
{
Action: "ActionSelected",
ViewResultData: {
actionName: "Update the trip"
}
}
```
------
# Personnalisez les vues de l’espace de travail de l’agent Amazon Connect en utilisant le HTML et le JSX
Vous pouvez personnaliser l’apparence des mises en page des ressources de vue. Pour ce faire, utilisez le HTML ou le JSX lorsque vous transmettez les paramètres d’entrée au bloc [Affichage de la vue](show-view-block.md).
Suivez les étapes ci-dessous pour obtenir un exemple simple de la manière dont vous pouvez tirer parti du HTML ou du JSX avec un bloc [Affichage de la vue](show-view-block.md).
1. Créez un flux avec un bloc [Affichage de la vue](show-view-block.md).
1. Ouvrez la page Propriétés du bloc [Affichage de la vue](show-view-block.md).
1. Sous **Afficher**, sélectionnez **Détail** dans la liste déroulante.
1. Dans la section **Paramètres**, choisissez **Définir JSON**.
1. Copiez et collez le code JSON suivant. Ce code montre comment les expressions HTML ou JSX sont traitées.
**Exemple HTML**
```
{
"TemplateString":
"Steps:- Customer provides incident information
- Customer provides receipts and agrees with
amount
- Customer receives reimbursement
"
}
```
**Exemple JSX**
```
{
"TemplateString":
"Please provide an introduction to the customers. Ask them how their day is going
Things to say:
Hello, how are you today? My name is Bob, who am I speaking to?"
}
```
# Utilisez le générateur d'interface utilisateur d'Amazon Connect pour accéder aux ressources contenues dans les step-by-step guides
Vous pouvez créer les ressources d'affichage utilisées dans les step-by-step guides à l'aide du générateur d'interface utilisateur d'Amazon Connect. Avec le générateur d’interface utilisateur, vous pouvez :
+ Glisser et déposer les composants de l’interface utilisateur sur un canevas.
+ Organiser votre mise en page.
+ Modifier les propriétés et les styles de chaque composant.
L'image suivante montre un exemple de page de création d'interface utilisateur.
![\[L'interface utilisateur du générateur d'interface utilisateur.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/no-code-ui-builder-updates.png)
1. Le panneau **Créer**, dans lequel vous pouvez choisir parmi la bibliothèque de composants de l’interface utilisateur ou utiliser l’un des modèles disponibles.
1. Les composants sont regroupés dans des conteneurs démontables. Glissez et déposez ces composants sur le canevas de la ressource d’affichage.
1. Le canevas de la ressource d’affichage.
1. Le panneau **Personnaliser** et l’icône des paramètres globaux. C’est ici que vous définissez les propriétés globales de la page, telles que les colonnes, l’alignement et les couleurs. C’est également là que vous définissez les propriétés des différents composants présents sur le canevas.
L’image suivante montre un exemple de l’onglet **Propriétés** du composant **Adresse**. Lorsque vous sélectionnez l’icône dynamique (l’éclair), le champ est rempli automatiquement au moment de l’exécution.
![\[Le panneau Personnaliser, l’onglet Propriétés, l’icône dynamique.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/no-code-ui-builder-properties.png)
## Accédez au générateur d'interface utilisateur
1. Connectez-vous au site Web d' Amazon Connect administration à l'adresse https ://*instance name*.my.connect.aws/. Utilisez un compte administrateur ou un compte doté de l’autorisation **Canaux et flux - Vues** dans son profil de sécurité.
1. Sur le site Web de l' Amazon Connect administrateur, choisissez **UI Management**.
1. Choisissez **Create View**. Dans la boîte de dialogue **Créer une vue**, spécifiez le nom de la vue et sélectionnez le **type d'objectif**. Les vues ont deux objectifs :
+ **Vues du guide** : utilisées pour structurer des flux de travail en une ou plusieurs étapes qui peuvent être présentés aux agents, aux clients finaux ou aux responsables afin d'accéder à des données spécifiques à un contact ou à des données tierces dans une interface unifiée.
+ **Vues de l'espace** de travail : utilisées pour créer des pages d'espace de travail telles que la page d'accueil, ces vues fournissent des composants d'interface généraux et des fonctionnalités indépendantes de la gestion des contacts.
1. La page UI Builder s'affiche. Commencez rapidement avec des modèles ou créez vos vues à partir de zéro.
1. Choisissez **Créer**. Une page de création d'interface utilisateur vide apparaît, comme illustré dans l'image suivante.
![\[Une page de création d'interface utilisateur vide.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/no-code-ui-builder-blank-page.png)
# Bibliothèque de composants d'interface utilisateur pour le générateur d'interface utilisateur dans Amazon Connect
Tous les composants du générateur d'interface utilisateur sont décrits dans la [documentation des composants d'interface utilisateur Amazon Connect](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/overview--page). Cette documentation présente les différents composants de l'interface utilisateur que vous pouvez utiliser dans le générateur d'interface utilisateur et comment les configurer.
Vous pouvez accéder aux composants de la bibliothèque dans le générateur d'interface utilisateur dans le panneau **Créer**, dans l'onglet **Bibliothèque**. L’image suivante montre un exemple de l’onglet **Bibliothèque** et des composants du **conteneur**.
![\[Le panneau de création d'interface utilisateur, l'onglet Bibliothèque, les composants de l'interface utilisateur.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/user-interface-component-library-example.png)
## Utilisation de conteneurs pour déplacer et organiser les composants
Les conteneurs sont une composante de base pour créer des vues. Vous pouvez déplacer des composants d’interface utilisateur (y compris d’autres conteneurs) dans un conteneur afin de les regrouper de manière logique et visuelle sur la page.
Pour que le contenu de la page reste relativement cohérent lorsque vous personnalisez les paramètres des vues de niveau supérieur, nous vous encourageons vivement à utiliser des conteneurs dans toutes vos vues. Les conteneurs sont également livrés avec une disposition en colonnes. La disposition en colonnes vous permet d’organiser le contenu d’un conteneur.
## Création d’un formulaire
Pour créer un formulaire que les agents ou les clients doivent remplir et envoyer, vous utilisez le composant [Formulaire](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/aws-managed-views-form--with-all). Vous avez le choix entre les options suivantes :
+ Glissez et déposez un composant de **formulaire** sur le canevas depuis la bibliothèque de l’interface utilisateur.
+ Ou, dans l’onglet **Modèles**, sélectionnez le modèle d’**exemple de formulaire**. Cela utilise un composant de formulaire.
Un composant de [formulaire](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/aws-managed-views-form--with-all) est un type spécial de conteneur dans lequel vous pouvez insérer des champs de saisie et un bouton **Envoyer**. Lorsqu’un utilisateur qui interagit avec le guide appuie sur le bouton **Envoyer**, Amazon Connect transmet toutes les valeurs saisies dans les champs du formulaire au flux. À ce stade du flux, vous pouvez personnaliser votre propre logique métier et vos propres send/retrieve données pour les adapter à des systèmes tiers en utilisant le [Fonction AWS Lambda ](invoke-lambda-function-block.md) bloc.
L’image suivante montre un exemple de composant de **formulaire** avec des étiquettes d’espace réservé et un bouton Envoyer.
![\[Un composant de formulaire avec des libellés fictifs et un bouton Envoyer.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/user-interface-component-library-form-section-example.png)
# Configuration de la disposition des colonnes, des couleurs et des définitions de données dans une vue
Cette rubrique explique comment configurer les mises en page des colonnes, les couleurs et les champs de données dynamiques dans le générateur d'interface utilisateur Amazon Connect afin de personnaliser les vues pour les agents des centres d'appels.
Dans le générateur d'interface utilisateur, le panneau **Personnaliser** se trouve sur le côté droit, comme le montre l'image suivante.
![\[Exemple du panneau Personnaliser dans le générateur d'interface utilisateur, l'icône des paramètres globaux.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/no-code-ui-builder-customize-panel-example.png)
Le panneau **Personnaliser** sert à configurer :
+ Paramètres globaux pour l’ensemble de la ressource de vue.
+ Paramètres locaux au niveau du composant. Chaque composant possède son propre ensemble de propriétés.
Le panneau **Personnaliser** sert à définir une série de paramètres pour votre vue, notamment :
+ Dispositions des colonnes
+ Couleurs
+ Mappage dynamique des données
+ Exemples de données
+ Définitions de données statiques
## Configuration des mises en page et des couleurs globales pour une vue
Pour configurer les paramètres globaux, accédez au panneau **Personnaliser**, puis choisissez l’icône des paramètres globaux, comme illustré dans l’image suivante.
![\[Le panneau Personnaliser, l’icône des paramètres globaux.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/no-code-ui-builder-properties-global-settings-example.png)
Les paramètres généraux permettent de définir la mise en page et les couleurs générales de votre vue :
+ La section **Alignement** permet de définir l’emplacement relatif des composants à gauche, au centre ou à droite de la vue.
+ Choisissez trois champs de couleur :
+ Couleur primaire
+ Couleur secondaire
+ Couleur neutre
Chaque composant de la vue applique ces paramètres par défaut. Toutefois, lorsque vous personnalisez un composant, vous pouvez remplacer ces paramètres de couleur globaux.
## Disposition des colonnes
La ressource de vue utilise un modèle de boîte flexible à 12 colonnes. Les composants occupent une position relative les uns par rapport aux autres. Ils ne sont pas placés parfaitement sur le canevas au pixel près. Cela permet à la vue d’augmenter ou de diminuer sa taille de manière réactive, sans perdre la composition de la vue.
Dans les paramètres globaux, vous pouvez déterminer comment regrouper vos colonnes. Par exemple, dans la section **Colonne**, vous pouvez choisir de diviser la vue en deux sections de 6 colonnes, comme présenté sur l’image suivante.
![\[Section Colonne, divisée en deux sections de six colonnes chacune.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/no-code-ui-builder-properties-layout-columns-example-1.png)
L’image suivante montre un exemple de ce à quoi ressemblerait cette mise en page pour un agent.
![\[Une vue divisée en deux sections de six colonnes, telle qu’elle apparaîtrait à un agent.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/no-code-ui-builder-properties-layout-columns-details-example-1.png)
Vous pouvez également utiliser le curseur **Personnaliser** pour modifier les rapports de ces groupements. Par exemple, vous pouvez le configurer de telle sorte que le côté gauche de la vue soit composé de quatre colonnes et le côté droit de huit colonnes, comme illustré dans l’image suivante :
![\[Mise en page avec quatre colonnes d’un côté et huit de l’autre.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/no-code-ui-builder-properties-layout-columns-example-2.png)
L’image suivante montre un exemple d’affichage de cette mise en page pour l’utilisateur.
![\[Une vue de quatre colonnes d’un côté et de l’autre, comme les verrait un agent.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/no-code-ui-builder-properties-layout-columns-details-example-2.png)
# Configuration de champs dynamiques dans l’interface utilisateur du générateur sans programmation d’Amazon Connect
Cette rubrique explique comment configurer des champs dynamiques dans les composants pour afficher les données d’exécution au lieu de valeurs codées en dur lors de la création d’interfaces client et agent à l’aide de l’interface utilisateur du générateur sans programmation d’Amazon Connect.
Il peut arriver que vous souhaitiez que les données affichées à un agent ou à un client soient remplies de manière dynamique plutôt que codées en dur. Par exemple, si vous créez un écran contextuel, vous pourriez souhaiter afficher le nom et l’identifiant du profil du client. Les données doivent être dynamiques, car les valeurs de ces champs changent d’un contact à l’autre.
Pour remplir dynamiquement le champ d’un composant, procédez comme suit :
1. Ouvrez l’onglet des propriétés de ce composant.
1. Sélectionnez l’icône dynamique (icône représentant un éclair) qui apparait à côté du champ que vous souhaitez rendre dynamique.
Les champs les plus courants qui nécessitent des valeurs dynamiques sont les suivants :
+ Le champ **Valeur** pour les champs d’affichage.
+ Le **DefaultValue**champ dans les entrées de formulaire.
Il est techniquement possible pour tout champ à la fois visible et masqué pour un agent d’être déterminé de manière dynamique lors de l’exécution. C’est pourquoi chaque champ de l’onglet **Propriétés** peut être défini comme dynamique (icône en forme d’éclair).
Par exemple, examinez le **AttributesBar**composant dans l'image suivante.
![\[Un composant de barre d’attributs, dont la valeur est définie sur dynamique.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/no-code-ui-builder-attributebar-example.png)
+ L’étiquette de l’attribut 1 est définie statiquement sous la forme **Nom du client**.
+ La **Valeur** de l’attribut est définie sur dynamique (l’icône en forme d’éclair est sélectionnée).
Avec ces paramètres, la valeur de **AttributesBar**est déterminée par les données transmises au [Affichage de la vue](show-view-block.md) bloc lors de l'exécution.
Lorsqu’un champ est défini sur dynamique, sa valeur statique est remplacée par une référence dynamique. Une section **Exemples de données** apparaît sous le champ. Vous utilisez cette section pour définir des [Exemples de données](no-code-ui-builder-sample-data.md).
La référence dynamique reflète la structure de données attendue par le bloc [Affichage de la vue](show-view-block.md) lors de la configuration des données d’exécution. Par exemple, considérez la **valeur** de l'attribut 1 dans le [AttributesBar](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/ui-component-attributebar--with-attributes)composant, illustrée dans l'image suivante.
![\[La valeur de l'attribut 1 dans le AttributesBar composant lorsqu'il est dynamique.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/no-code-ui-builder-dynamicicon.png)
+ Lorsqu’il est défini sur dynamique, le champ devient `$.AttributeBar_1.Attributes[0].Value`, où `AttributeBar_1` correspond à l’ID du composant.
+ Cela indique que dans le bloc [Affichage de la vue](show-view-block.md), le champ `AttributeBar_1` doit recevoir un objet.
+ L’objet contient un tableau `Attributes` où le premier élément (`[0]`) est censé être un objet avec un champ `Value`.
Vous pouvez modifier les références dynamiques dans un but de clarté ou de réutilisation. Les références dynamiques peuvent être partagées entre plusieurs champs et composants de la vue. Par exemple, dans l'image suivante du [AttributeBar](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/ui-component-attributebar--with-attributes)composant, nous mettons à jour sa référence dynamique à`$.myAttributeValue`. Le bloc [Affichage de la vue](show-view-block.md) possède désormais un champ `myAttributeValue` qui attend une entrée de chaîne.
![\[Les propriétés du AttributeBar composant, une valeur dynamique.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/no-code-ui-builder-dynamic-example2.png)
**Important**
Le type de référence dynamique doit correspondre au type attendu du champ. Par exemple, vous ne pouvez pas utiliser de référence dynamique basée sur une chaîne dans un champ booléen. L’image suivante montre un exemple de message d’erreur lorsque la référence dynamique ne correspond pas.
![\[Le panneau Personnaliser affiche un message d’erreur, car la référence dynamique ne correspond pas au type attendu dans le champ.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/no-code-ui-builder-properties-dynamic-fields-example-4.png)
Vous avez également la possibilité de définir toutes les propriétés d’un attribut dans un composant comme dynamiques. Dans l’image suivante, tous les éléments relatifs à cet attribut, y compris l’étiquette, sont déterminés au moment de l’exécution en fonction des valeurs transmises au bloc [Affichage de la vue](show-view-block.md). Dans ce cas, le **nom du client** est désormais un exemple des données que vous pouvez utiliser pour avoir une idée de ce que l’agent verra lorsqu’il utilisera un guide, mais cette valeur n’est pas visible pour l’agent. Toutefois, cette valeur n’est pas visible pour l’agent.
![\[Panneau Personnaliser, nom du client comme exemple de données.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/no-code-ui-builder-properties-dynamic-fields-example-5.png)
Pour certains composants, par exemple [AttributesBar](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/ui-component-attributebar--with-attributes), vous pouvez également définir toutes les propriétés du composant comme dynamiques. Par exemple, avec le AttributeBar, vous pouvez définir l'icône dynamique (l'éclair) pour rendre tous les attributs dynamiques. Les attributs sont déterminés par tout ce qui est transmis au bloc [Affichage de la vue](show-view-block.md) lors de l’exécution.
![\[Toutes les propriétés du AttributeBar sont définies sur Dynamic.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/no-code-ui-builder-properties-dynamic-6.png)
# Définissez des actions qui apparaissent sous forme de branches de flux dans le bloc Afficher la vue
Dans les step-by-step guides, les utilisateurs doivent choisir un bouton pour accéder à une nouvelle page dans les guides. Vous configurez ces boutons dans le générateur d'interface utilisateur en définissant une action pour chaque bouton. Par exemple, vous pouvez configurer un bouton pour envoyer un formulaire.
Lorsqu’un utilisateur clique sur le bouton lors de l’exécution, le guide envoie un message de réponse aux flux. La valeur **Action** détermine le chemin de branchement à partir du bloc [Affichage de la vue](show-view-block.md).
Par exemple, une vue peut comporter trois boutons avec des actions différentes. Ces actions apparaissent sous forme de chemins de branchement différents sur le bloc [Affichage de la vue](show-view-block.md). Cela vous permet de configurer une logique de branchement appropriée dans vos flux de guidage.
L’image suivante montre un exemple de la section **Action** du panneau **Personnaliser** du générateur sans programmation.
![\[Section Action du panneau Personnaliser dans le générateur d’interface utilisateur sans programmation.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/no-code-ui-builder-setting-actions-in-flows-example.png)
# Enregistrez et publiez des vues à utiliser dans un step-by-step guide sur Amazon Connect
Les ressources de vue prennent en charge la gestion des versions. La gestion des versions vous permet d'auditer et même de réutiliser les versions précédentes d'une vue que vous avez créée et and/or utilisée dans les guides. step-by-step
1. Entrez un nom pour votre vue, si vous ne l’avez pas déjà fait. Vous ne pouvez pas enregistrer une vue tant qu’un nom ne lui a pas été attribué.
1. Après avoir modifié votre vue, choisissez **Enregistrer** pour mettre à jour la ressource.
1. Lorsque vous êtes prêt à utiliser une vue dans un flux de step-by-step guidage, choisissez **Publier**. La vue apparaît désormais dans le bloc [Affichage de la vue](show-view-block.md) pour que vous puissiez l’utiliser dans un flux
Seules les versions de vue qui ont été publiées apparaissent dans le bloc [Affichage de la vue](show-view-block.md) pour être utilisées dans un flux.
# Modèles de création d'interface utilisateur pour démarrer rapidement
Le générateur d'interface utilisateur inclut des modèles que vous pouvez utiliser pour préremplir votre canevas avec des composants. Pour accéder aux modèles :
1. Dans le générateur sans programmation, ouvrez le panneau **Créer**.
1. Sélectionnez l’onglet **Modèles** .
1. Choisissez le modèle que vous souhaitez utiliser, puis faites-le glisser sur le canevas de visualisation.
Une fois le modèle affiché sur le canevas, vous pouvez :
+ Ajouter plus de composants
+ Supprimer des composants
+ Appliquer tout autre type de configuration possible avec une ressource de vue créée à partir de zéro
Si vous avez déjà placé des composants d’interface utilisateur sur le canevas, ces composants seront remplacés et le modèle prendra leur place. Ces modifications sont effectuées une fois que vous avez **enregistré** la ressource d’affichage. Si vous utilisez un modèle par erreur, vous pouvez quitter la page et revenir à la dernière version enregistrée de votre ressource de vue.
L’image suivante montre un exemple de quelques-uns des modèles disponibles dans le panneau **Créer** : Écran contextuel, Disposition, Paiement
![\[Quelques-uns des modèles disponibles dans le panneau Créer : Écran contextuel, Disposition, Paiement.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/no-code-ui-builder-templates-example.png)
# Utilisation de la fonctionnalité d’affichage d’écran des applications tierces dans l’espace de travail de l’agent Amazon Connect
Pour la fonctionnalité d'affichage d'écran des applications tierces, vous pouvez utiliser des step-by-step guides ou vous pouvez utiliser l'épinglage d'applications. Pour de plus amples informations, veuillez consulter [Accès à des applications tierces dans l’espace de travail de l’agent](3p-apps-agent-workspace.md). Lorsque le contact arrive, l’onglet **Guides** s’ouvre en tant que premier dans l’espace de travail de l’agent. Vous pouvez [configurer les step-by-step guides à l'](how-to-invoke-a-flow-sg.md)aide de flux.
**Note**
Lorsque vous configurez une vue :
Assurez-vous que le nom de l'application enregistré dans le correspond AWS Management Console exactement au nom de l'application que vous fournissez au composant [Application](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/ui-component-application--with-agent-workspace-example) and/or App Launch.
Si des erreurs apparaissent et que vous pensez que les noms correspondent, modifiez le nom de l’application AWS Management Console . Assurez-vous qu’il n’y a pas d’espaces au début ni à la fin.
+ Avec le composant [Application](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/ui-component-application--with-agent-workspace-example), vous intégrez l’application tierce dans les guides. L’application s’affiche dans le premier onglet lorsque le contact entre.
+ Avec le composant Lancement d’application, vous configurez l’application pour qu’elle s’ouvre sous forme d’onglet dans l’espace de travail de l’agent. Vous pouvez activer l’ouverture automatique, le guide sera sélectionné comme premier onglet et l’application s’ouvrira sous forme d’un autre onglet.
+ Vous pouvez toujours utiliser le composant [Lien](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/ui-component-link--default-case) avec ouverture automatique pour configurer n’importe quel lien de navigateur afin qu’il s’ouvre dans une nouvelle fenêtre de navigateur.
Vous avez la possibilité de fournir un chemin pour donner une destination ou un paramètre plus spécifique au contact. Lorsque vous fournissez le chemin, celui-ci sera raccourci au domaine. Indiquez une barre oblique à la fin du domaine de l’application.
**Exemple 1 (recommandé)** :
```
App Domain registered in AWS Management Console: https://example.com/
Path: cats/siamese
Guides will attempt to render: Domain https://example.com/ + Path cats/siamese
https://example.com/cats/siamese
Success if website exists!
```
**Exemple 2 :**
```
App Domain registered in AWS Management Console: https://example.com/dogs/
Path: cats/siamese
Guides will attempt to render: Domain https://example.com/ + Path cats/siamese
https://example.com/cats/siamese
Fails because only subdomains of https://example.com/dogs/ are allowed
```
**Exemple 3 :**
```
App Domain registered in AWS Management Console: https://example.com/cats
Path: cats/siamese
Guides will attempt to render: Domain https://example.com/ + Path cats/siamese
https://example.com/cats/siamese
Success if website exists!
```
L’image suivante montre un composant Lancement d’application qui a été déposé sur le canevas. Le panneau **Personnaliser** montre un exemple de spécification du nom et du chemin de l’application.
![\[Panneau Personnaliser, exemple de nom et de chemin de l’application.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/no-code-ui-builder-app-integration-1.png)
L'image suivante montre un exemple de [Bloc de flux dans Amazon Connect : Définir le flux d’événements](set-event-flow.md) bloc ajouté au flux et configuré pour le hook d'événements de l'**DefaultAgentinterface utilisateur**.
![\[Un bloc de flux d'événements Set configuré pour le hook d'événements de l' DefaultAgentinterface utilisateur.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/no-code-ui-builder-app-integration-2.png)
# Utilisez des exemples de données pour prévisualiser votre vue dans Amazon Connect
Vous pouvez utiliser des exemples de données pour voir à quoi ressemblera la vue pour l’utilisateur. Vous pouvez même voir des champs de données déterminés dynamiquement lors de l’exécution. Lorsqu’un champ est défini sur dynamique (lorsque l’éclair est sélectionné), des exemples de données peuvent être saisis dans le champ de saisie situé sous la section **Sample Data** de cette propriété. Ces exemples de données sont uniquement destinés à des fins de visualisation. Ils apparaissent uniquement dans le générateur d’interface utilisateur Amazon Connect.
Par exemple, l’image suivante montre un exemple de **formulaire d’adresse postale**.
![\[Les sections DefaultValue et Sample data du panneau Personnaliser.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/no-code-ui-builder-sample-data-example.png)
+ **L’adresse postale** est une valeur dynamique par défaut. Elle est renseignée au moment de l’exécution par l’adresse figurant dans le profil du client.
+ Pour voir comment l’interface utilisateur finale apparaît pour l’agent, vous pouvez saisir une valeur de texte par défaut.
+ La valeur `7 W 34th St` est fournie à des fins d’affichage uniquement sur le site Web d’administration Amazon Connect . Elle n’apparaît pas pour l’agent.
# Thématisation des espaces de travail à l'aide de vues
Lorsque des vues sont utilisées dans l'espace de travail ou dans l'espace de travail de l'agent avec un thème personnalisé, les composants de l'interface utilisateur peuvent hériter des thèmes de l'espace de travail ou utiliser un style personnalisé. Gardez à l'esprit quelques principes :
+ Lorsqu'un thème d'espace de travail est défini, la couleur principale globale, la couleur secondaire, la couleur par défaut et les composants d'une vue héritent du style au niveau de l'espace de travail par défaut lorsque les utilisateurs n'apportent pas de modifications personnalisées.
+ Lorsqu'une vue possède des styles globaux personnalisés tels que les couleurs primaires, secondaires et par défaut définis dans le générateur d'interface utilisateur, le style personnalisé a priorité sur le thème de l'espace de travail.
+ Lorsque des styles personnalisés sont définis dans le générateur d'interface utilisateur, le style des composants a priorité sur le thème de l'espace de travail.
+ Les couleurs des composants personnalisés sont préservées dans les différents espaces de travail.
# Construire de manière conditionnelle UIs avec Views
La fonctionnalité de conditions d'interface utilisateur de Views permet aux clients de modifier les propriétés des composants d'une vue en fonction de l'interaction de l'utilisateur avec les autres composants de cette même vue. Par exemple, lorsqu'un utilisateur met à jour une valeur d'entrée dans le composant A, telle qu'une liste déroulante, le composant B, tel qu'un conteneur, est masqué dans la vue. Les conditions vous permettent de créer des expériences personnalisées pour vos agents, clients finaux ou superviseurs en fonction des besoins spécifiques de la tâche ou de l'interaction.
Pour créer une condition d'interface utilisateur, visitez le générateur d'interface utilisateur et faites glisser un composant pris en charge sur le canevas. Accédez au panneau des paramètres du composant sur le côté droit de l'écran et cliquez sur l'onglet Conditions de l'interface utilisateur. L'onglet Conditions de l'interface utilisateur est organisé pour collecter les entrées suivantes :
1. Type de modification : propriété du composant sélectionné que vous souhaitez mettre à jour en fonction d'une condition
+ Visibilité : rend un composant visible ou masqué
+ DefaultValue: met à jour la ou les valeurs par défaut d'un composant
+ Obligatoire : met à jour la propriété requise d'un composant
+ Désactiver : active ou désactive un composant
+ Options : met à jour les options que l'utilisateur peut sélectionner parmi un composant
1. Sélectionnez le composant de déclenchement : le composant qui déclenchera la condition appliquée
1. Appliquer la condition quand : L'opération est évaluée en fonction de la valeur du composant déclencheur
1. Appliquer lorsque la valeur correspond : valeur du composant déclencheur qui sera évaluée pour déclencher la condition
1. Appliquer les résultats : la modification souhaitée au composant sélectionné une fois que l'évaluation du composant déclencheur est atteinte
Lorsque des conditions sont définies sur un composant, celui-ci est indiqué en pointillés dans le générateur d'interface utilisateur. Vous pouvez supprimer des conditions en cliquant sur l'icône de corbeille dans l'onglet Conditions du panneau de configuration du composant.
# Invocation d’un guide au début d’un contact dans Amazon Connect
Après avoir créé vos flux, vous pouvez déterminer dynamiquement les guides à montrer aux utilisateurs. Pour cela :
1. Ajoutez un bloc [Bloc de flux dans Amazon Connect : Définir le flux d’événements](set-event-flow.md) à votre flux.
1. Dans le bloc **Set event flow**, configurez un hook d'événements de l'**DefaultFlowForAgentinterface utilisateur**
Les guides démarrent dès que le contact est proposé à l’agent. Ils n’attendent pas que le contact soit accepté.
Par exemple, en vérifiant les réponses de l’IVR, le nom de la file d’attente et les informations sur le client, vous pouvez créer une logique de branchement dans les flux qui détermine l’ID de flux à définir. Utilisez le bloc **Vérifier l’attribut** pour définir la logique conditionnelle et le bloc de **Définir le flux d’événements** pour définir le flux que vous souhaitez envoyer à l’agent.
L’image suivante montre la page **Propriétés** du bloc **Définir le flux d’événements**. Le Hook d’événement est défini sur **Flux par défaut pour l’interface utilisateur de l’agent**.
![\[Bloc Définir le flux d’événements, flux par défaut pour le hook d’événement de l’interface utilisateur de l’agent.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/example-flow-id-sq.png)
# Déployer step-by-step des guides dans les chats Amazon Connect
Vous pouvez activer les step-by-step guides dans les chats Amazon Connect pour créer des expériences interactives en libre-service. Cette fonctionnalité vous aide à résoudre les problèmes des clients plus rapidement en collectant et en transférant le contexte à vos agents. Vous pouvez présenter aux clients le même guide que celui que vous avez conçu pour vos agents afin d’améliorer la gestion de la configuration.
## Activer step-by-step les guides dans les chats Amazon Connect
1. Assurez-vous d'avoir activé et configuré les [step-by-step guides](step-by-step-guided-experiences.md) pour les agents. Après avoir configuré les guides, vérifiez qu’ils apparaissent lorsqu’un contact est réservé à un agent pour qu’il réponde.
1. Configurez votre flux pour invoquer des vues dans le flux de discussion à l’aide du bloc Afficher les vues, de la même manière que vous le configureriez pour votre agent. L’exemple suivant déclenchera le guide lorsque la bulle de discussion sera choisie par le client. Le flux passera par deux vues avant de transférer le chat à un agent.
![\[Configurez votre flux pour invoquer les vues dans le flux de discussion à l’aide du bloc Afficher la vue.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/step-by-step-guides-chat-enable-1.png)
1. Créez un widget de chat hébergé depuis la page d’administration. Réglez le flux de chat sur celui que vous avez créé.
![\[Créez un widget de chat hébergé depuis la page d’administration. Réglez le flux de chat sur celui que vous avez créé.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/step-by-step-guides-chat-enable-2.png)
Ce chat hébergé générera un script semblable à ce qui suit :
```
```
La dernière ligne contient un tableau de messages autorisés. Vous pouvez y ajouter des messages interactifs pour activer les guides dans le chat. Par exemple :
```
amazon_connect('supportedMessagingContentTypes', ['text/plain', 'application/vnd.amazonaws.connect.message.interactive', 'application/vnd.amazonaws.connect.message.interactive.response']);
```
1. Ajoutez ce qui suit à votre liste d'autorisations URLs pour permettre aux step-by-step guides de travailler dans le chat :
+ `your-website-url/views/renderer/`
Si vous utilisez un CSP pour que le widget de chat fonctionne sur votre site Web, vous devriez déjà avoir une URL Cloudfront. Par exemple :
+ `https://unique-id.cloudfront.net/amazon-connect-chat-interface.js`
**Note**
Vous pouvez également utiliser les guides dans le chat avec un widget de communication personnalisé. Pour plus d'informations sur l'ajout de step-by-step guides dans votre widget de communication personnalisé, consultez l'[interface de chat Amazon Connect](https://github.com/amazon-connect/amazon-connect-chat-interface) sur Github.
# Affichage du contexte du contact dans l’espace de travail de l’agent lorsqu’un contact commence dans Amazon Connect
Lorsque vous concevez step-by-step des guides pour l'espace de travail de l'agent, vous pouvez les configurer pour afficher les attributs du contact au début du contact. Cela donne aux agents le contexte dont ils ont besoin au début du contact afin qu’ils puissent se lancer directement dans la résolution des problèmes. Cette fonctionnalité est parfois appelée Écran contextuel.
Pour afficher les attributs d’un contact au début d’un contact, vous configurez une **vue détaillée**, qui est une [vue AWS gérée](view-resources-managed-view.md).
La **vue Détails** permet d’afficher des informations à l’agent et de lui fournir 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.
+ Les actions de cette vue peuvent être utilisées pour permettre à un agent de passer à l'étape suivante d'un step-by-step guide. Les actions peuvent également être utilisées pour invoquer des flux de travail entièrement nouveaux.
+ **Sections** est le seul composant obligatoire. C’est là que vous pouvez configurer le corps de la page que vous souhaitez montrer à l’agent.
+ Les composants facultatifs tels que le **AttributeBar**sont pris en charge par cette vue.
**Astuce**
Pour une documentation interactive présentant un aperçu d’une **vue détaillée**, consultez [Détail](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-detail--with-all).
L’image suivante présente un exemple de **vue Détails**. Elle comporte un titre de page, une description et quatre exemples.
![\[La vue Détails, avec le titre de page, la description et quatre exemples avec des attributs.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/details-view-page-heading-sq.png)
**Sections**
+ Le contenu peut être une chaîne statique, une paire clé-valeur TemplateString ou une paire clé-valeur. Il peut s’agir d’un point de données unique ou d’une liste. Pour plus d’informations, consultez [TemplateString](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#templatestring) ou [AtrributeSection](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute-section).
**AttributeBar (Facultatif)**
+ Facultatif. Si elle est fournie, la barre d’attributs s’affiche en haut de la vue.
+ Une liste d'objets avec les propriétés requises, **Label**, **Value**, et les propriétés facultatives **LinkType**ResourceId****, **Copyable** et **Url**. Pour plus d’informations, consultez [Attribut](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute).
+ **LinkType**peut être externe ou être une application Amazon Connect telle qu'Amazon Connect Cases.
+ Lorsqu’elle est *externe*, un agent peut accéder à une nouvelle page de navigateur, qui est configurée avec **Url**.
+ Le *cas* échéant, un agent peut accéder à un nouveau détail du dossier dans l'espace de travail de l'agent, configuré avec ResourceId.
+ **Copiable** permet aux agents de copier le ResourceId en le sélectionnant avec votre périphérique de saisie.
**Retour (facultatif)**
+ Facultatif, mais obligatoire si aucune action n’est incluse. Si fourni, affiche le lien de navigation arrière.
+ Est un objet avec une *Étiquette* qui contrôle ce qui est affiché dans le texte du lien.
**Titre (facultatif)**
+ Facultatif, s’il est fourni, le titre est affiché sous forme de texte.
**Description (facultatif)**
+ Facultatif, s’il est fourni, le texte de description s’affiche sous le titre.
**Actions (facultatif)**
+ Facultatif. Si elle est fournie, une liste d’actions s’affiche en bas de la page.
**Exemple d’entrée**
```
{
"AttributeBar": [
{"Label": "Example", "Value": "Attribute"},
{ "Label": "Example 2", "Value": "Attribute 3", "LinkType": "case", "ResourceId": "123456", "Copyable": true }
],
"Back": {
"Label": "Back"
},
"Heading": "Hello world",
"Description": "This view is showing off the wonders of a detail page",
"Sections": [{
"TemplateString": "This is an intro paragraph"
}, "abc"],
"Actions": ["Do thing!", "Update thing 2!"],
}
```
**Exemple de sortie**
```
{
Action: "ActionSelected",
ViewResultData: {
actionName: "Action 2"
}
}
```
# Possibilité pour les agents du centre de contact Amazon Connect de saisir des codes de disposition
Un cas d'utilisation simple des step-by-step guides consiste à demander à un agent de saisir un code de disposition à la fin du contact. Pour permettre aux agents de définir des codes de disposition à la fin d’un contact ou d’effectuer d’autres tâches après l’appel, créez un flux composé d’un bloc [Affichage de la vue](show-view-block.md) et d’un bloc [Définir des attributs de contact](set-contact-attributes.md).
+ Utilisez le bloc [Affichage de la vue](show-view-block.md) pour créer une vue **Formulaire** qui fournit aux agents le champ de saisie requis.
+ Utilisez le bloc [Définir des attributs de contact](set-contact-attributes.md) pour enregistrer la réponse sous forme d’attributs de contact.
En outre, vous pouvez également utiliser un bloc [Fonction AWS Lambda ](invoke-lambda-function-block.md) pour envoyer les données saisies à un système externe.
Après avoir créé votre flux, vous serez en mesure de déterminer dynamiquement lequel faire apparaître à la fin d'un contact en définissant l'**DisconnectFlowForAgentinterface utilisateur** comme attribut personnalisé dans vos flux de contacts. Tant que cet attribut est défini avant la fin d’un contact, l’interface utilisateur de l’agent présente ce formulaire une fois le contact terminé.
L’image suivante montre la page des propriétés d’un [Définir des attributs de contact](set-contact-attributes.md). Il est configuré pour enregistrer la réponse dans un attribut défini par l’utilisateur.
![\[La page des propriétés du bloc Définir des attributs de contact.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/dispo-codes-sq.png)
# Empêcher les PII d’apparaître dans la transcription d’un enregistrement de contact en utilisant Amazon Connect Contact Lens
Par défaut, toutes les informations transmises via un guide sont incluses dans la transcription d’enregistrements de contact. Pour éviter que des informations personnelles n'apparaissent dans la transcription de votre dossier de contact, utilisez le [bloc Définir le comportement d'enregistrement et d'analyse](set-recording-behavior.md) de votre flux de step-by-step guideContact Lens, [activez](sensitive-data-redaction.md) et activez la rédaction des données sensibles.
Pour plus de détails sur la façon d’activer l’expurgation des données d’identification personnelle, consultez [Activation de l’expurgation de données sensibles](enable-analytics.md#enable-redaction).
# Intégrez des vues à Connect Resources
Vous pouvez créer des vues utilisées dans des guides qui interrogent des sources de données en direct à des intervalles spécifiés grâce aux intégrations de vues. Les intégrations de vues sont des configurations au niveau de la vue disponibles dans le panneau des paramètres globaux du générateur d'interface utilisateur, comme indiqué ci-dessous.
Le panneau d'intégration des vues vous permet de configurer et de référencer les données de votre vue. Commencez par configurer un nouvel outil à intégrer. Un outil est un point d'intégration spécifique entre la ressource View et une ressource Connect. Les propriétés suivantes sont requises pour configurer un outil :
1. Nom de l'intégration : nom personnalisé de l'intégration qui sera utilisé ultérieurement pour référencer les données de la vue elle-même
1. Type d'intégration : format d'intégration entre la vue et la ressource Connect
1. Outil : source d'intégration à laquelle la vue s'intégrera, telle que les modules Flow
1. Version ou alias : module de flux version/alias que la vue appellera pour récupérer de nouvelles informations
1. Activer l'actualisation (secondes) : valeur booléenne pour appeler l'intégration lorsque la vue s'exécute dans un guide
1. Intervalles d'actualisation : intervalles auxquels la vue appellera l'intégration pour récupérer les informations
+ L'interrogation de sources de données en temps réel fonctionne mieux dans un environnement à onglet unique. Si plusieurs onglets sont ouverts avec l'application Guide, chaque vue interroge la source de données, ce qui peut entraîner des limitations et l'obsolescence de certaines vues
1. Objet de saisie de l'outil : un objet JSON représentant les données envoyées de la vue à la source (par exemple, le module Flow) pour récupérer les dernières informations pertinentes afin de mettre à jour la vue
Une fois l'intégration configurée, vous pourrez utiliser cette vue pour référencer les sorties de l'intégration. Les références affichées dans le générateur d'interface utilisateur sont basées sur les données de sortie disponibles à partir de l'intégration en question.
Pour utiliser les données de référence de votre intégration, vous devez d'abord comprendre comment référencer les données des composants de l'interface utilisateur et leurs propriétés. De la même manière que les attributs de contact sont référencés dans les flux et les vues`($.Attributes.MyCustomAttribute)`, vous pouvez référencer les données de sortie pour l'intégration en utilisant la syntaxe suivante :`$.#[IntegrationName].[ReferenceObject]`. N'oubliez pas que vous êtes responsable de vous assurer que l'objet de référence utilisé est renvoyé dans le bon format accepté par la propriété du composant de la vue. Pour comprendre la référence de sortie d'intégration, visitez la page de configuration du module.
Au moment de l'exécution, lorsqu'une vue avec une intégration est chargée, elle renseigne les données de l'intégration telles que définies dans le schéma de vue. En outre, si vous définissez des intervalles d'actualisation, la vue invoquera l'intégration à chaque intervalle, et s'il y a de nouvelles données, la vue invitera l'utilisateur à actualiser la vue avec les informations les plus récentes.
# Utiliser les guides étape par étape dans Workspace pour les responsables
Vous pouvez utiliser les guides de l'espace de travail personnalisé pour exécuter des flux de travail structurés que pratiquement tous les utilisateurs de Connect peuvent suivre. Avant de continuer, assurez-vous d'avoir créé un espace de travail basé sur les personas.
Une fois dans le générateur d'interface utilisateur, recherchez le composant « Connect Application » et faites-le glisser sur le canevas. Ce composant vous permet d'intégrer une application Connect propriétaire dans la vue. Vous pouvez configurer le composant avec les propriétés suivantes :
1. Namespace de l'application : type d'application à intégrer dans le composant
1. ContactFlowId: Si « Guide » est sélectionné comme espace de noms de l'application, choisissez l'ID du flux de contacts du guide à exécuter dans le composant.
Lorsqu'ils utilisent le composant de l'application Connect, les utilisateurs peuvent démarrer le guide en cliquant sur le bouton « Commencer », ce qui créera le contact de discussion en arrière-plan pour utiliser le guide. Une fois qu'un flux de travail guidé est terminé, les utilisateurs peuvent démarrer le guide depuis le début du flux en cliquant sur le bouton « Redémarrer ». N'oubliez pas que l'imbrication du composant de l'application guide dans une vue déjà utilisée dans un guide n'est pas prise en charge. Le guide du composant d'application Connect ne peut être intégré que dans une vue statique utilisée comme page dans les espaces de travail basés sur les personas.
# Utilisation des vues pour créer des pages d'espace de travail basées sur des personnes
Les vues vous permettent de créer des pages personnalisées dans des espaces de travail personnalisés assignés à différents utilisateurs de Connect. Pour créer une nouvelle vue, commencez par sélectionner l'objectif de l'espace de travail approprié. Après avoir accédé au générateur d'interface utilisateur, vous pouvez filtrer et sélectionner parmi les composants d'interface utilisateur disponibles prêts à être utilisés dans votre vue Workspace.
Les vues conçues pour les pages Workspace fonctionnent comme des interfaces en une seule étape adaptées à des groupes d'utilisateurs spécifiques. Pour garantir une fonctionnalité optimale, utilisez des composants compatibles tels que Alert, Carousel et Containers. Les vues de l'espace de travail peuvent également intégrer le composant Tableau de données, qui permet aux utilisateurs professionnels de gérer les opérations du centre de contact en temps réel. Cela inclut les cas d'utilisation critiques tels que les ajustements du routage des appels et la mise en œuvre de protocoles d'urgence.
## Transmission des données d'entrée de l'espace de travail à la vue
Lorsque vous utilisez Views pour créer des pages Workspace, vous pouvez transmettre les données d'entrée au moment de l'exécution via l'assistant de configuration des pages. Cette approche dynamique vous permet de créer des vues réutilisables qui s'adaptent à différents contextes sans nécessiter d'implémentations distinctes pour chaque cas d'utilisation.
Par exemple, lors de la création d'une vue pour les pages d'accueil des utilisateurs, vous souhaiterez peut-être afficher des messages d'accueil personnalisés à différents utilisateurs. Plutôt que de créer une vue unique pour chaque espace de travail, vous pouvez créer une vue unique avec des composants d'en-tête dynamiques et réutiliser cette vue dans plusieurs espaces de travail, chacun avec son propre contenu de message personnalisé.
# Personnaliser le thème de l'espace de travail de l'agent
Par défaut, l'espace de travail de l'agent utilise un thème Amazon Connect, qui inclut le logo, le favicon, la famille de polices et la palette de couleurs. Vous pouvez utiliser des thèmes pour personnaliser l'apparence visuelle de l'espace de travail des agents afin qu'il corresponde à l'identité de marque de votre organisation. Pour personnaliser l'apparence visuelle de l'espace de travail des agents, [créez un espace de travail](amazon-connect-workspaces.md), [personnalisez son thème](custom-theme.md) et attribuez-le à vos agents.
![\[L'espace de travail de l'agent avec un thème personnalisé.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/agent-workspace-custom-theme.png)
Les agents peuvent choisir entre les modes clair et foncé selon leurs préférences. Pour changer de mode, accédez aux paramètres utilisateur en haut à droite de l'espace de travail de l'agent.
![\[L'espace de travail de l'agent en mode clair.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/agent-workspace-light-mode.png)
![\[L'espace de travail de l'agent en mode sombre.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/agent-workspace-dark-mode.png)
# Intégration d’applications tierces dans l’espace de travail de l’agent Amazon Connect
Amazon Connect agent workspace est une application unique et intuitive qui fournit à vos agents les outils et les step-by-step conseils dont ils ont besoin pour résoudre les problèmes de manière efficace, améliorer l'expérience client et s'intégrer plus rapidement. Outre l'utilisation d'applications internes dans votre espace de travail d'agent, telles que les agents Customer Profiles, Cases et Connect AI, vous pouvez intégrer des applications tierces.
**Note**
Cette fonctionnalité n’est prise en charge que dans l’espace de travail par défaut de l’agent ; elle n’est pas prise en charge lors de l’utilisation d’un CCP personnalisé.
Par exemple, vous pouvez intégrer votre système de réservation propriétaire ou un tableau de bord de statistiques fourni par le fournisseur dans l'espace de travail des Amazon Connect agents.
Si vous êtes un développeur intéressé par la création d’une application tierce, consultez le [Guide du développeur d’espace de travail d’agent](https://docs.aws.amazon.com/agentworkspace/latest/devguide/getting-started.html).
**Topics**
+ [Exigences](#onboard-3p-apps-requirements)
+ [Comment ajouter une intégration](#onboard-3p-apps-how-to-integrate)
+ [Supprimer les intégrations](#delete-3p-apps)
+ [Attribution des autorisations](assign-security-profile-3p-apps.md)
+ [Autorisations Iframe lors de l’octroi d’un accès à des applications tierces](3p-apps-iframe-permissions.md)
+ [Intégrer un serveur MCP](3p-apps-mcp-server.md)
+ [Événements et demandes](3p-apps-events-requests.md)
+ [Accès à des applications tierces dans l’espace de travail de l’agent](3p-apps-agent-workspace.md)
+ [Accès à l’application Worklist](worklist-app.md)
+ [Configuration de la fédération SSO pour applications tierces](3p-apps-sso.md)
+ [Utilisation de la fonctionnalité d’affichage d’écran des applications tierces dans l’espace de travail de l’agent Amazon Connect](no-code-ui-builder-app-integration.md)
+ [Atelier de création d’une application tierce](https://catalog.workshops.aws/amazon-connect-agent-empowerment/en-US/third-party-applications/test)
## Exigences
Si vous utilisez des politiques IAM personnalisées pour gérer l’accès à des applications tierces, les utilisateurs ont besoin des autorisations IAM suivantes pour intégrer une application tierce à l’aide de AWS Management Console. Outre `AmazonConnect_FullAccess`, les utilisateurs ont besoin de :
------
#### [ JSON ]
****
```
{
"Version":"2012-10-17",
"Statement": [
{
"Action": [
"app-integrations:CreateApplication",
"app-integrations:GetApplication",
"iam:GetRolePolicy",
"iam:PutRolePolicy",
"iam:DeleteRolePolicy"
],
"Resource": "arn:aws:app-integrations:us-east-1:111122223333:application/*",
"Effect": "Allow"
}
]
}
```
------
## Intégrations
**Note**
Pour ajouter une intégration à vos instances, assurez-vous que celles-ci utilisent un rôle lié au service (SLR). Si votre instance n'utilise actuellement pas de SLR mais que vous souhaitez ajouter une intégration, vous devrez migrer vers un SLR. L'intégration ne peut être ajoutée qu'aux instances utilisant un reflex. Pour de plus amples informations, veuillez consulter [Pour les instances créées avant octobre 2018](connect-slr.md#migrate-slr).
1. Ouvrez la Amazon Connect [console](https://console.aws.amazon.com/connect/) (https://console.aws.amazon.com/connect/).
1. Dans le volet de navigation de gauche, choisissez **Integrations.** Si vous ne voyez pas ce menu, c’est parce qu’il n’est pas disponible dans votre région. Pour connaître les régions dans lesquelles cette fonctionnalité est disponible, consultez [Disponibilité des Amazon Connect fonctionnalités par région](regions.md).
1. Sur la page **Intégrations**, choisissez **Ajouter une intégration**.
![\[La page des propriétés du bloc Définir des attributs de contact.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/integrations-list.png)
1. Sur la page **Ajouter une intégration**, entrez :
1. **Informations de base**
1. **Nom d'affichage** : nom convivial pour l'intégration. Ce nom est affiché sur les profils de sécurité et pour les agents dans l’onglet de l’espace de travail de l’agent. Vous pouvez revenir et modifier ce nom.
1. **Description (facultatif)** : vous pouvez éventuellement fournir une description de cette intégration. Cette description ne s’affiche pas pour les agents.
1. **Type d'intégration** : indique s'il s'agit d'une application Web standard, d'un service ou d'un serveur MCP. Cela détermine le mode d'accès à l'intégration au sein du système.
1. **Identifiant d'intégration** : nom officiel unique pour les intégrations de type application ou service standard. Si vous n’avez qu’une seule application par URL d’accès, nous vous recommandons d’utiliser l’origine de l’URL d’accès. Vous ne pouvez pas modifier ce nom.
1. **Délai d’initialisation** : durée maximale autorisée pour établir une connexion avec l’espace de travail. Le temps autorisé est exprimé en millisecondes. Ce paramètre permet de gérer les problèmes de connexion et de garantir le démarrage rapide de l’application.
1. **Détails de l'application**
1. **Étendue du contact** : indique si l'application Web est actualisée pour chaque contact ou uniquement à chaque nouvelle session de navigation. Ce paramètre affecte la fréquence à laquelle l’application met à jour ses données.
1. **Délai d’initialisation** : durée maximale autorisée pour établir une connexion avec l’espace de travail. Le temps autorisé est exprimé en millisecondes. Ce paramètre permet de gérer les problèmes de connexion et de garantir le démarrage rapide de l’application.
1. **Accès**
1. **URL d’accès** : il s’agit de l’URL dans laquelle l’application est hébergée. L’URL doit être sécurisée, en commençant par https, sauf s’il s’agit d’un hôte local.
**Note**
Tout ne URLs peut pas être cadré. Voici deux méthodes pour vérifier si l’URL peut être incluse dans un iframe :
Un outil tiers appelé [Iframe Tester](http://iframetester.com/) est disponible pour aider à vérifier si une URL peut être incluse dans un iframe.
Si une URL peut être incluse dans un iframe, elle est affichée dans une version préliminaire sur cette page.
Si une URL ne peut pas être incluse dans un iframe, une erreur s’affiche dans une version préliminaire sur cette page.
Il est possible que ce site Web affiche une erreur et que l’application puisse toujours être incluse dans un iframe dans l’espace de travail de l’agent. En effet, le développeur de l’application peut verrouiller son application pour qu’elle ne soit intégrable que dans l’espace de travail et nulle part ailleurs. Si vous avez reçu cette application d’un développeur d’applications, nous vous recommandons de continuer à essayer de l’intégrer dans l’espace de travail de l’agent.
Pour les utilisateurs techniques : vérifiez le contenu de la politique de sécurité de l’application que vous essayez d’intégrer.
Firefox : menu Hamburger > Outils supplémentaires > Outils de développement web > Réseau
Chrome : menu à 3 points > Plus d’outils > Outils de développement > Réseau
Autres navigateurs : recherchez les paramètres réseau dans les outils de développement.
La directive Content-Security-Policy frame-ancestors devrait être. `https://your-instance.my.connect.aws`
Si la directive est « `same origin` ou »`deny`, cette URL ne peut pas être imaginée par AWS/Amazon Connect.
Voici ce que vous pouvez faire si l’application ne peut pas être incluse dans un iframe :
+ Si vous contrôlez l’application/l’URL, vous pouvez mettre à jour la politique de sécurité du contenu de l’application. Suivez les bonnes pratiques pour les développeurs d’applications/Assurez-vous que les applications ne peuvent être intégrées que dans la section de l’espace de travail de l’agent Amazon Connect [ici.](https://docs.aws.amazon.com/agentworkspace/latest/devguide/recommendations-and-best-practices.html)
+ Si vous ne contrôlez pas l’application ou l’URL, vous pouvez essayer de contacter le développeur de l’application et lui demander de mettre à jour la politique de sécurité du contenu de l’application.
1. **Origines approuvées (facultatif)** : liste d'autorisation URLs qui devrait être autorisée, si elle est différente de l'URL d'accès. L’URL doit être sécurisée, en commençant par https, sauf s’il s’agit d’un hôte local.
1. Ajoutez des autorisations aux [événements et demandes](3p-apps-events-requests.md).
Voici un exemple de la manière dont vous pouvez intégrer une nouvelle application et lui attribuer des autorisations à l’aide de AWS Management Console. Dans cet exemple, six autorisations différentes sont attribuées à l’application.
**Fourniture des informations de base et des détails d’accès**
1. **Association d’instances**
1. Vous pouvez autoriser n’importe quelle instance de cette région de compte à accéder à cette application.
1. Bien que l'association de l'intégration à une instance soit facultative, vous ne pourrez pas utiliser cette application tant que vous ne l'aurez pas associée à une ou plusieurs instances.
**Note**
Pour les serveurs MCP, vous ne pouvez sélectionner que l'instance configurée avec l'URL de découverte de la passerelle sélectionnée.
![\[Fourniture des informations de base et des détails d’accès.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/integrations-add-basic-info.png)
**Octroi d’autorisations à l’application pour l’intégration des données de l’espace de travail**
![\[Octroi d’autorisations à l’application pour l’intégration des données de l’espace de travail.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/integrations-add-permissions.png)
**Configuration Iframe**
![\[Configuration Iframe.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/integrations-add-iframe-config.png)
1. Choisissez **Ajouter une intégration**.
1. Si l'intégration a été créée avec succès, vous serez redirigé vers la page des **détails de l'intégration** et vous verrez une bannière de réussite.
![\[Octroi d’autorisations à l’application pour l’intégration des données de l’espace de travail.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/integrations-view.png)
Vous pouvez modifier certains attributs d’une application existante, tels que son nom d’affichage, son URL d’accès et ses autorisations.
1. Si une erreur s’est produite lors de la création de l’application ou lors de l’association de l’application à une instance, un message d’erreur s’affiche et vous pouvez prendre les mesures correspondantes pour corriger le problème.
## Supprimer les intégrations
Si vous ne souhaitez plus utiliser une intégration dans un futur proche, vous pouvez la supprimer. Si vous souhaitez temporairement cesser de l’utiliser, mais que vous voudrez peut-être l’utiliser à nouveau dans un avenir proche, nous vous recommandons de la dissocier d’une instance afin d’éviter d’avoir à l’ajouter à nouveau. Pour supprimer des intégrations, accédez au AWS Management Console, sélectionnez une intégration, puis choisissez **Supprimer**.
**Résolution des problèmes**
+ L'opération échouera si l'intégration est associée à une instance. Vous devez d'abord dissocier l'intégration de toute instance. Ensuite, vous pouvez revenir en arrière et le supprimer.
**Astuce**
Si vous avez créé une intégration avant le 15 décembre 2023, vous pouvez rencontrer des problèmes lors de la mise à jour de l'association de l'intégration aux instances. Cela est dû au fait que vous devez mettre à jour votre politique IAM.
![\[Erreur IAM lors de la tentative de suppression d'une intégration en raison d'autorisations insuffisantes\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/delete-3p-apps.png)
Votre politique IAM devra être mise à jour pour inclure les autorisations suivantes :
+ `app-integrations:CreateApplicationAssociation`
+ `app-integrations:DeleteApplicationAssociation`
------
#### [ JSON ]
****
```
{
"Version":"2012-10-17",
"Statement": [
{
"Action": [
"app-integrations:CreateApplication",
"app-integrations:GetApplication"
],
"Resource": "arn:aws:app-integrations:us-east-1:111122223333:application/*",
"Effect": "Allow"
},
{
"Action": [
"app-integrations:CreateApplicationAssociation",
"app-integrations:DeleteApplicationAssociation"
],
"Resource": "arn:aws:app-integrations:us-east-1:111122223333:application-association/*",
"Effect": "Allow"
},
{
"Action": [
"iam:GetRolePolicy",
"iam:PutRolePolicy",
"iam:DeleteRolePolicy"
],
"Resource": "arn:aws:iam::111122223333:role/aws-service-role/connect.amazonaws.com/AWSServiceRoleForAmazonConnect_*",
"Effect": "Allow"
}
]
}
```
------
# Autorisations de profil de sécurité pour l’utilisation d’applications tierces dans Amazon Connect
Cette rubrique décrit les autorisations des profils de sécurité requises pour accéder aux applications tierces que vous avez intégrées et associées. Pour obtenir la liste des autorisations relatives aux applications tierces et leur nom d’API, consultez [Liste des autorisations de profil de sécurité dans Amazon Connect](security-profile-list.md).
## Autorisations relatives aux applications tierces
**Note**
Après avoir associé une application à une instance, il se peut que vous deviez attendre jusqu’à 10 minutes avant que l’application n’apparaisse dans la section **Applications de l’agent** de la page **Profils de sécurité**.
Toutes les applications que vous avez intégrées AWS et associées à votre Amazon Connect instance apparaissent dans la section **Applications de l'agent** de la page **Profils de sécurité**, comme dans l'image suivante.
![\[Section Applications agent de la page Profils de sécurité.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/assign-security-profile-3p-apps-displayed.png)
Vous devez également donner accès au CCP pour que le menu du lanceur d’applications apparaisse.
![\[Autorisations d’accès appliquées pour l’accès au panneau de configuration des contacts (CCP).\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/assign-security-profile-3p-apps-ccp-permissions.png)
Après avoir attribué des autorisations, passez en revue la façon de [Accès à des applications tierces dans l’espace de travail de l’agent Amazon Connect](3p-apps-agent-workspace.md).
# Autorisations Iframe lors de l’octroi d’un accès à Amazon Connect à des applications tierces
Lorsque vous configurez des applications tierces via l’interface utilisateur ou l’API `onboarding` de la console AWS, vous avez la possibilité de spécifier des paramètres d’autorisation `iframe`. Ces autorisations peuvent être modifiées même après la configuration de l’application.
Par défaut, quatre autorisations `iframe` de base sont accordées à toutes les applications tierces : `allow-forms`, `allow-popups`, `allow-same-origin` et `allow-scripts`. Certaines applications pouvant nécessiter des fonctionnalités améliorées, des autorisations `iframe` supplémentaires peuvent être demandées lors du processus d’enregistrement des applications.
**Note**
La compatibilité du navigateur pour les autorisations suivantes peut varier en fonction des différentes implémentations de navigateur.
| Autorisations | Description |
| --- | --- |
| Allow | |
| clipboard-read | Contrôle si l’application est autorisée à lire les données du presse-papiers. Actuellement pris en charge par Chrome, mais pas par Firefox et Safari. |
| clipboard-write | Contrôle si l’application est autorisée à écrire des données dans le presse-papiers. Actuellement pris en charge par Chrome, mais pas par Firefox et Safari. |
| microphone | Contrôle si l’application est autorisée à utiliser des périphériques d’entrée audio. |
| camera | Contrôle si l’application est autorisée à utiliser des périphériques d’entrée vidéo. |
| Sandbox | |
| allow-forms | Autorise la page à soumettre des formulaires. Pris en charge par défaut. |
| allow-popups | Autorise l’application à ouvrir des fenêtres contextuelles. Pris en charge par défaut. |
| allow-same-origin | Si ce jeton n'est pas utilisé, la ressource est traitée comme provenant d'une origine spéciale qui ne respecte pas toujours la politique de même origine (empêchant potentiellement l'accès aux données storage/cookies , entre autres JavaScript APIs). Pris en charge par défaut. |
| allow-scripts | Permet à la page d’exécuter des scripts. Pris en charge par défaut. |
| allow-downloads | Permet de télécharger des fichiers via un élément ou doté de l’attribut Téléchargement, ainsi que par le biais de la navigation qui mène au téléchargement d’un fichier |
| autoriser-modal | Permet à la page d’ouvrir des fenêtres modales à l’aide de Window.alert(), Window.confirm(), Window.print() et Window.prompt(), tandis que l’ouverture d’un élément