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.

# Configuration de l’expérience de chat du client dans Amazon Connect
<a name="enable-chat-in-app"></a>

Vous pouvez proposer une expérience de chat à vos clients en employant l'une des méthodes suivantes : 
+ [Ajout d’une interface utilisateur de chat à votre site Web hébergé par Amazon Connect](add-chat-to-website.md). 
+ [Personnalisation du chat avec l’exemple open source Amazon Connect](download-chat-example.md). 
+ [Personnalisez votre solution à l'aide d'Amazon Connect APIs](integrate-with-startchatcontact-api.md). Nous vous recommandons de commencer par la bibliothèque open source Amazon Connect ChatJS lorsque vous personnalisez vos propres expériences de chat. Pour plus d'informations, consultez le référentiel [Amazon Connect ChatJS](https://github.com/amazon-connect/amazon-connect-chatjs) sur GitHub. 

## Ressources supplémentaires concernant la personnalisation de l'expérience de chat
<a name="more-resource-customize-chat"></a>
+ Les messages interactifs fournissent aux clients une invite et des options d'affichage préconfigurées qu'ils peuvent sélectionner. Ces messages reposent sur Amazon Lex et sont configurés via Amazon Lex à l'aide d'une fonction Lambda. Pour savoir comment ajouter des messages interactifs via Amazon Lex, consultez ce billet de blog : [Set up interactive messages for your Amazon Connect chatbot](https://aws.amazon.com/blogs/contact-center/easily-set-up-interactive-messages-for-your-amazon-connect-chatbot/).

  Amazon Connect prend en charge les modèles suivants : un sélecteur de liste et un sélecteur d'heure. Pour de plus amples informations, veuillez consulter [Ajout de messages interactifs Amazon Lex pour les clients dans une session de chat](interactive-messages.md). 
+  [Activation d’Apple Messages for Business avec Amazon Connect](apple-messages-for-business.md) 
+  [Documentation de l'API Amazon Connect Service](https://docs.aws.amazon.com/connect/latest/APIReference), en particulier l'[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API.
+  [API Amazon Connect Participant Service](https://docs.aws.amazon.com/connect-participant/latest/APIReference/Welcome.html). 
+  [Kit SDK Amazon Connect Chat et exemples d'implémentation](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/) 
+  [Amazon Connect Streams](https://github.com/aws/amazon-connect-streams). Utilisez-les pour intégrer vos applications existantes à Amazon Connect. Vous pouvez intégrer les composants du Panneau de configuration des contacts dans votre application. 
+  [Activer le streaming de messages pour le chat alimenté par l'IA](message-streaming-ai-chat.md) 

# La chat/SMS chaîne dans Amazon Connect
<a name="web-and-mobile-chat"></a>

**Important**  
**Vous essayez de contacter Amazon pour obtenir de l'aide ?** Consultez [Service client d’Amazon](https://www.amazon.com/gp/help/customer/display.html?icmpid=docs_connect_messagingcap_customerservice) (commandes et livraisons Amazon) ou [Support AWS](https://aws.amazon.com/premiumsupport/?icmpid=docs_connect_messagingcap_premiumsupport) (Amazon Web Services).

Amazon Connect vous permet d’intégrer des fonctionnalités de messagerie par chat (chat mobile, chat Web, SMS et services de messagerie tiers) à votre site Web et à vos applications mobiles. Il permet à vos clients de commencer à discuter avec les agents du centre de contact depuis n'importe laquelle de vos applications professionnelles, Web ou mobiles. 

Les interactions sont asynchrones, ce qui permet à vos clients de démarrer un chat avec un agent ou un robot Amazon Lex, de s'en éloigner, puis de reprendre le chat. Ils peuvent même changer d'appareil et continuer la conversation instantanée.

**Topics**
+ [Plusieurs canaux, une seule expérience](#unified-experience-chat)
+ [Prise en main](#enable-chat)
+ [Exemple de scénario de conversation instantanée](#example-chat-scenario)
+ [Quand les conversations instantanées se terminent-elles ?](#when-do-chats-end)
+ [Tarification](#web-and-mobile-chat-pricing)
+ [En savoir plus](#chat-more-info)

## Plusieurs canaux, une seule expérience
<a name="unified-experience-chat"></a>

Les agents disposent d'une interface utilisateur unique pour aider les clients en utilisant les appels vocaux, le chat et les tâches. Cela réduit le nombre d'outils que les agents doivent apprendre et le nombre d'écrans avec lesquels ils doivent interagir. 

Les activités de chat s'intègrent à vos flux de centre de contact existants et à l'automatisation que vous avez conçue pour les appels vocaux. Vous créez vos flux une seule fois et pouvez les réutiliser sur plusieurs canaux. 

La collecte des métriques et les tableaux de bord que vous avez créés bénéficient automatiquement des métriques unifiées sur plusieurs canaux.

## Prise en main
<a name="enable-chat"></a>

Pour ajouter des fonctionnalités de messagerie par chat à votre centre de contact Amazon Connect et permettre à vos agents de participer à des chats, effectuez les étapes suivantes :
+ Le chat est activé au niveau de l'instance lorsqu'[un compartiment Amazon S3 est créé pour stocker les transcriptions de chat](amazon-connect-instances.md#get-started-data-storage).
+ [Ajoutez le chat au profil de routage de votre agent](routing-profiles.md).
+ En option, vous pouvez configurer des sous-types de chat, tels que la messagerie SMS. Vous vous procurez un numéro de téléphone compatible SMS en l'utilisant AWS End User Messaging SMS, en l'important Amazon Connect, puis en l'attribuant à vos flux. Pour en savoir plus, consultez : 
  + [Demandez un numéro de téléphone compatible SMS via AWS End User Messaging SMS](sms-number.md)
  + [Configuration de la messagerie SMS dans Amazon Connect](setup-sms-messaging.md)

Les agents peuvent ensuite commencer à accepter les chats via le panneau de configuration des contacts.

Vous pouvez consulter les statistiques en temps réel et historiques du canal de messagerie par chat (par exemple, l'heure d'arrivée, le temps de traitement) dans le cadre des statistiques globales du canal de chat dans le cadre de la même expérience de reporting utilisée pour calls/chats/tasks évaluer les performances et la productivité des agents.

Amazon Connect propose plusieurs ressources pour vous aider à ajouter le chat à votre site Web. Pour plus d’informations, consultez [Configuration de l’expérience de chat du client dans Amazon Connect](enable-chat-in-app.md).

## Exemple de scénario de conversation instantanée
<a name="example-chat-scenario"></a>

Un client et un agent discutent. Le client cesse de répondre à l'agent. L'agent demande « Êtes-vous là ? » et ne reçoit pas de réponse. L'agent quitte la conversation instantanée. Désormais, le chat n'est plus associé à un agent. Votre flux détermine ce qui se passe ensuite. 

Dans ce scénario, le client envoie finalement un autre message (« Hé, je suis de retour ») et le chat reprend. Selon la logique que vous définissez dans le flux, le chat peut être attribué à l'agent d'origine ou à un autre agent/une autre file d'attente.

Voici comment vous créez ce scénario :

1. Créez un flux de déconnexion. L'image suivante montre l'[Exemple de flux de déconnexion dans Amazon Connect](sample-disconnect.md) dans le concepteur de flux. Ce flux inclut les blocs connectés suivants : **Lire l'invite**, **Patienter**, qui se ramifie en trois branches **Lire les invites** (pour **Client revenu**, **Délai expiré** et **Erreur**), puis **Transférer vers la file d'attente** et **Déconnecter**.  
![\[Exemple de flux de déconnexion.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/sample-disconnect-flow.png)

1.  Dans le flux de déconnexion, ajoutez un bloc [Wait](wait.md). Le bloc Wait a deux branches : 
   +  **Expiration** : exécutez cette branche si le client n'a pas envoyé de message après un délai spécifié. La durée totale du chat, y compris plusieurs blocs **Patienter**, ne peut pas dépasser sept jours. 

      Par exemple, pour cette branche, vous pouvez simplement exécuter un bloc **Disconnect (Déconnecter)** et mettre fin à la conversation instantanée. 
   +  **Customer return (Retour client)** : exécutez cette branche lorsque le client revient et envoie un message. Avec cette branche, vous pouvez acheminer le client vers l'agent précédent, la file d'attente précédente ou définir une nouvelle file d'attente ou un nouvel agent de travail. 

1.  Dans votre flux entrant, ajoutez le bloc [Définir le flux de déconnexion](set-disconnect-flow.md). Utilisez-le pour spécifier que lorsque l'agent ou le robot Amazon Lex s'est déconnecté du chat et que seul le client reste, le bloc Définir le flux de déconnexion doit s'exécuter. 

    Dans le bloc suivant, par exemple, nous avons spécifié que le bloc **Sample disconnect flow (Exemple de flux de déconnexion)** devait s'exécuter.   
![\[Bloc Définir le flux de déconnexion, menu déroulant Sélectionner un flux, option d'exemple de flux de déconnexion.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/set-disconnect-flow.png)

    Pour obtenir un exemple qui utilise le bloc **Définir le flux de déconnexion**, consultez [Exemple de flux entrant](sample-inbound-flow.md). 

## Quand les conversations instantanées se terminent-elles ?
<a name="when-do-chats-end"></a>

 Par défaut, la durée totale d'une conversation par chat, y compris le temps passé à attendre lorsque le client n'est pas actif, ne peut pas dépasser 25 heures. Cependant, vous pouvez modifier cette durée par défaut et configurer à la place une durée de chat personnalisée. Vous pouvez configurer un chat pour qu'il dure au moins 1 heure (60 minutes) et jusqu'à 7 jours (10 080 minutes). Pour configurer une durée de discussion personnalisée, appelez l'[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API et ajoutez le `ChatDurationInMinutes` paramètre. 

Au cours d'une session de chat en cours, il n'y a pas de limite au nombre de fois où un client peut quitter et rejoindre une session de chat en cours. Pour ce faire, utilisez le bloc [Patienter](wait.md). Par exemple, vous pouvez attendre 12 heures que le client reprenne le chat avant de mettre fin à la session de chat. Si le client essaie de reprendre le chat après 12 heures, dans le flux, vous pouvez faire en sorte qu'un robot Amazon Lex demande s'il vous contacte au sujet du même problème ou non. 

En spécifiant un temps d'attente nettement inférieur à la durée du chat, vous contribuez à garantir une bonne expérience aux clients. Par exemple, pour un chat de 25 heures, le client peut reprendre le chat après 24 heures et 58 minutes, puis être interrompu après deux minutes parce que le chat se termine à la limite des 25 heures.

**Astuce**  
Si vous utilisez Amazon Lex avec le chat, notez que le délai d'expiration par défaut d'une session Amazon Lex est de 5 minutes. La durée totale d'une session ne peut pas dépasser 24 heures. Pour modifier le délai d’expiration de session, consultez [Définition du délai d’expiration d’une session](https://docs.aws.amazon.com/lex/latest/dg/context-mgmt.html#context-mgmt-session-timeoutg) dans le *Guide du développeur Amazon Lex*. 

## Tarification
<a name="web-and-mobile-chat-pricing"></a>

Le chat est facturé à l'utilisation. Aucun paiement initial, aucun engagement à long terme ou aucun frais mensuel minimum n'est requis. Vous payez par chat, quel que soit le nombre d'agents ou de clients qui utilisent le chat. La tarification peut varier en fonction de la région. Pour plus d'informations, consultez [Tarification d'Amazon Connect](https://aws.amazon.com/connect/pricing/). 

## En savoir plus
<a name="chat-more-info"></a>

Pour plus d'informations sur le chat, consultez les rubriques suivantes :
+  [Test des expériences vocales, de chat et de tâches dans Amazon Connect](chat-testing.md) 
+  [Fonctionnement du routage avec plusieurs canaux](about-routing.md#routing-profile-channels-works) 
+  [Création d’un profil de routage dans Amazon Connect pour relier des files d’attente à des agents](routing-profiles.md) 
+  [Kit SDK Amazon Connect Chat et exemples d'implémentation](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/) 

# Ajout d’une interface utilisateur de chat à votre site Web hébergé par Amazon Connect
<a name="add-chat-to-website"></a>

Pour aider vos clients par chat, vous pouvez ajouter un widget de communication à votre site Web hébergé par Amazon Connect. Vous pouvez configurer le widget de communication sur le site Web de l' Amazon Connect administration. Vous pouvez personnaliser la police et les couleurs, et sécuriser le widget afin qu’il puisse être lancé uniquement depuis votre site Web. Vous aurez alors un extrait de code court que vous ajouterez à votre site Web. 

Amazon Connect héberge le widget, ce qui garantit que la dernière version est toujours disponible sur votre site Web. 

**Astuce**  
L’utilisation du widget de communication est soumise aux quotas de service par défaut, tels que le nombre de caractères requis pour chaque message. Avant de lancer votre widget de communication en production, assurez-vous que vos quotas de service sont définis en fonction des besoins de votre entreprise. Pour de plus amples informations, veuillez consulter [Amazon Connect quotas de service](amazon-connect-service-limits.md). 

**Topics**
+ [Champs d’extrait de widget pris en charge et personnalisables](supported-snippet-fields.md)
+ [Navigateurs pris en charge](#chat-widget-supported-browsers)
+ [Étape 1 : personnaliser votre widget de communication](#customize-chat-widget)
+ [Étape 2 : spécifier les domaines du site Web où vous souhaitez afficher le widget de communication](#chat-widget-domains)
+ [Étape 3 : confirmer et copier le code et les clés de sécurité du widget de communication](#confirm-and-copy-chat-widget-script)
+ [Vous obtenez des messages d’erreur ?](#chat-widget-error-messages)
+ [Personnalisation du comportement de lancement du widget et de l’icône du bouton](customize-widget-launch.md)
+ [Transmission du nom d’affichage du client](pass-display-name-chat.md)
+ [Transmission des attributs de contact](pass-contact-attributes-chat.md)
+ [Personnalisations supplémentaires pour votre widget de chat](pass-customization-object.md)
+ [Téléchargement de la transcription de votre widget de chat](chat-widget-download-transcript.md)
+ [Téléchargement et personnalisation de notre exemple open source](download-chat-example.md)
+ [Démarrez des discussions dans vos applications à l'aide d'Amazon Connect APIs](integrate-with-startchatcontact-api.md)
+ [Envoi des notifications par navigateur aux clients lorsque des messages de chat arrivent](browser-notifications-chat.md)
+ [Déconnexion du chat par programmation](programmatic-chat-disconnect.md)
+ [Transmission de propriétés personnalisées pour remplacer les valeurs par défaut dans le widget de communication](pass-custom-styles.md)
+ [Ciblez le bouton et le cadre de votre widget avec CSS/ JavaScript](target-widget-button.md)
+ [Résolution des problèmes liés à votre widget de communication](ts-cw.md)
+ [Ajouter un formulaire de pré-contact ou de pré-chat](add-precontact-form.md)
+ [Sondage post-chat](enable-post-chat-survey.md)

# Champs d’extrait de widget pris en charge et personnalisables dans Amazon Connect
<a name="supported-snippet-fields"></a>

Le tableau suivant répertorie les champs d’extrait de widget de communication que vous pouvez personnaliser. L’exemple de code figurant après le tableau montre comment utiliser les champs d’extrait.


| Champ d’extrait | Type | Description | Documentation supplémentaire | 
| --- | --- | --- | --- | 
| `snippetId` | String | Obligatoire, généré automatiquement | N/A | 
| `styles` | String | Obligatoire, généré automatiquement | N/A | 
| `supportedMessagingContentTypes` | Tableau | Obligatoire, généré automatiquement | N/A | 
| `customLaunchBehavior` | Objet | Personnalisez la façon dont votre site Web affiche et lance l’icône du widget hébergé | [Personnalisation du comportement de lancement du widget et de l’icône du bouton pour votre site Web hébergé sur Amazon Connect](customize-widget-launch.md), plus loin dans cette rubrique. | 
| `authenticate` | Fonction | Fonction de rappel pour activer la sécurité JWT sur votre site Web | [Étape 2 : spécifier les domaines du site Web où vous souhaitez afficher le widget de communication](add-chat-to-website.md#chat-widget-domains), précédemment dans cette section. | 
| `customerDisplayName` | Fonction | Transmettez le nom d’affichage du client lors de l’initialisation d’un contact | [Transmission du nom d’affichage du client lors du démarrage d’un chat Amazon Connect](pass-display-name-chat.md), plus loin dans cette section. | 
| `customStyles` | Objet | Remplacez les styles CSS par défaut | [Transmission de propriétés personnalisées pour remplacer les valeurs par défaut dans le widget de communication dans Amazon Connect](pass-custom-styles.md), plus loin dans cette section. | 
| `chatDurationInMinutes` | Number | Durée totale de la session de chat nouvellement démarrée | Par défaut : 1 500, Min. : 60, Max. : 10 080 | 
| `enableLogs` | Booléen | Activez les journaux de débogage | Valeur par défaut : false | 
| `language` | String |  Amazon Connect peut effectuer des traductions pour les codes de langue au format ISO-639 pris en charge. Pour plus d'informations, consultez [https://en.wikipedia. org/wiki/List\$1DES\$1CODES\$1ISO\$1639-1.](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) Cela ne traduirait pas les remplacements de texte personnalisés ni le contenu des messages (envoyés et reçus).  | Par défaut : en\$1US. Pris en charge : 'cs\$1CZ', 'da\$1DK', 'de\$1DE', 'en\$1AU', 'en\$1CA', 'en\$1GB', 'en\$1US', 'es\$1ES', 'fi\$1FI', 'fr\$1FR', 'hu\$1HU', 'id\$1ID', 'it\$1IT', 'ja\$1JP', 'ko\$1KR', 'nl\$1NL', 'nn\$1NO' 'pt\$1BR', 'pt\$1PT', 'sk\$1SK', 'sv\$1SE', 'zh\$1CN', 'zh\$1TW' | 
| `disableCSM` | Booléen | Désactivation du suivi des métriques côté client à partir du widget de communication. | Valeur par défaut : false | 
| `nonce` | String | Valeur de négociation entre l’iframe et la politique CSP du site Web du client. Exemple : la politique CSP du client autorise la valeur nonce 1234, l’iframe qui extrait un autre script doit avoir la même valeur nonce 1234 pour que le navigateur sache qu’il s’agit d’un script approuvé par le site parent de l’iframe. | Valeur par défaut : non définie | 
| `customizationObject` | Objet | Personnalisez la transcription et la disposition des widgets | Pour plus d’informations, consultez [Personnalisations supplémentaires pour votre widget de chat Amazon Connect](pass-customization-object.md), plus loin dans cette section. | 
| `contactAttributes` | Objet | Transmission des attributs au flux de contacts directement à partir de l’extrait de code, sans aucune configuration JWT | Pour plus d’informations, consultez [Transmission des attributs de contact lors du démarrage du chat](https://docs.aws.amazon.com/connect/latest/adminguide/pass-contact-attributes-chat.html). | 
| `customDisplayNames` | Objet | Remplacement des configurations du nom d’affichage et du logo du système ou du bot définies sur le site Web d’administration Amazon Connect. | Pour plus d’informations, consultez [Comment remplacer les noms d’affichage et logos du système et du bot pour le widget de communication](https://docs.aws.amazon.com/connect/latest/adminguide/pass-custom-styles.html#pass-override-system). | 
| `contactMetadataHandler` | Fonction | Fonction de rappel pour accéder à contactId. Par exemple, ajoutez un écouteur d'événements pour gérer des scénarios tels que l'appel de la StopContact fonction avec le ContactID lorsque l'onglet du navigateur est fermé ou le maintien de la persistance du chat avec un ContactiD précédent.  |  | 
| `registerCallback` | Objet | Cela permet d’exécuter des rappels pour les événements de cycle de vie exposés.  Pour de plus amples informations, veuillez consulter [amazon-connect-chatjs](https://github.com/amazon-connect/amazon-connect-chatjs).  | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/supported-snippet-fields.html) | 
| `initialMessage` | String | Message à envoyer au chat qui vient d’être créé. Contraintes de longueur : minimum 1, maximum 1 024. | Pour invoquer le robot Lex configuré dans le flux de contacts à l’aide d’un message initial, modifiez le bloc de flux [Obtenir les données client](get-customer-input.md) en sélectionnant l’option **Initialisez le robot avec le message**. Pour plus d’informations, consultez [Comment configurer le bloc de flux Obtenir les données client](get-customer-input.md#get-customer-input-properties). | 
| `authenticationParameters` | Objet | Cela active le bloc de flux [Authentifier le client](authenticate-customer.md) | Pour plus d’informations, consultez [Activation de l’authentification des clients](enable-connect-managed-auth.md). | 
| `mockLexBotTyping` | Booléen | Activez l’indicateur de saisie simulée pour les messages de robot Lex. | Valeur par défaut : false | 
| `customStartChat` | Fonction | Fonction de rappel permettant d’appeler l’API Start Chat depuis le système dorsal. | Pour plus d’informations, consultez [Interface utilisateur du widget hébergé avec API Start Chat personnalisée](https://github.com/amazon-connect/amazon-connect-chat-interface#option-3-hosted-widget-ui-with-custom-start-chat-api).  | 

L’exemple suivant montre comment ajouter des champs d’extrait dans le script HTML qui ajoute le widget de chat à votre site Web.

```
(function(w, d, x, id) {   /* ... */})(window, document, 
'amazon_connect', 'widgetId');
 amazon_connect('snippetId', 'snippetId');
 amazon_connect('styles', /* ... */);
 amazon_connect('registerCallback', {
    // Custom event example
    // WIDGET_FRAME_CLOSED
    /**
     * This event is triggered when user clicks on the chat widget close button, 
     * either widget close button was clicked when error in the chat session or normally by the user. 
     * This event can be used for webview use cases to go back to main app
     * 
     * @param {string} status - The reason for widget closure
     *   - "error_chat": Indicates the user clicked on widget close button due to an error in the chat session
     *   - "close_chat": Indicates the user clicked on widget close button normally by the user
     */
    'WIDGET_FRAME_CLOSED': (eventName, { status }) => {
        // You can implement custom logic based on the status value(error_chat or close_chat)
        if (status == "error_chat") {
            // handle error chat
        } else if (status == "close_chat") {
            // handle close chat  
        } 
    },
    // System event example
    /**
     * chatDetails: { 
     *     contactId: string, 
     *     participantId: string,
     *     participantToken: string,
     * }
     * data: {
     *     AbsoluteTime?: string,
     *     ContentType?: string,
     *     Type?: string,
     *     ParticipantId?: string,
     *     DisplayName?: string,
     *     ParticipantRole?: string,
     *     InitialContactId?: string
     * }
     */
    'PARTICIPANT_JOINED': (eventName, { chatDetails, data }) => {
        alert(`${data.ParticipantRole} joined the chat.`);
    },
    'event_Name_3': callback(function),
    'event_Name_4': callback(function),
    // ...
}); 
amazon_connect('initialMessage', 'Your initial message string');
// ... 
amazon_connect('snippetFieldHere', /* ... */);
<script/>
```

## Navigateurs pris en charge
<a name="chat-widget-supported-browsers"></a>

Le widget de communication préconçu prend en charge les versions de navigateur suivantes et ultérieures : 
+ Google Chrome 85.0
+ Safari 13.1
+ Microsoft Edge version 85
+ Mozilla Firefox 81.0

Le widget de communication prend en charge les notifications du navigateur pour ordinateurs de bureau. Pour de plus amples informations, veuillez consulter [Envoi des notifications par navigateur aux clients lorsque des messages de chat arrivent](browser-notifications-chat.md).

## Étape 1 : personnaliser votre widget de communication
<a name="customize-chat-widget"></a>

Au cours de cette étape, vous personnalisez l’expérience du widget de communication pour vos clients.

1. Connectez-vous au site Web d' Amazon Connect administration à l'adresse https ://*instance name*.my.connect.aws/. Choisissez **Personnalisation du widget de communication**.  
![\[Page Guide de configuration, lien de personnalisation du widget de communication\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/chatwidget-customize-chat-window-button.png)

1. Sur la page **Widgets de communication**, choisissez **Ajouter un widget de communication** pour commencer à personnaliser une nouvelle expérience de widget de communication. Pour modifier, supprimer ou dupliquer un widget de communication existant, choisissez l’une des options de la colonne **Actions**, comme illustré dans l’image suivante.   
![\[Page Widgets de communication, lien du bouton Ajouter un widget de communication.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/chatwidget-add-chat-widget.png)

1. Entrez un **Nom** et une **Description** pour le widget de communication. 
**Note**  
Le nom doit être unique pour chaque widget de communication créé dans une instance Amazon Connect. 

1. Dans la section **Options de communication**, choisissez la manière dont vos clients peuvent interagir avec votre widget, puis choisissez **Enregistrer et continuer**.
**Note**  
Vous ne pouvez activer une tâche ou un formulaire de pré-contact par e-mail que si le chat et la voix ne sont pas activés.

   L’image suivante illustre les options autorisant le chat et permettant aux clients de recevoir des messages. Pour activer un formulaire de pré-chat, vous devez d’abord créer une [vue](view-resources-sg.md) avec un bouton d’action de connexion et sélectionner l’action `StartChatContact`. Pour plus d’informations sur les formulaires de pré-chat et de pré-contact, consultez [Ajout du widget Amazon Connect à votre site Web](connect-widget-on-website.md).  
![\[Page de widget de communication configurée pour le chat et les appels Web\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/comm-widget-page-chat.png)

1. Sur la page **Créer un widget de communication**, choisissez les styles des boutons du widget, puis les noms d’affichage et les styles.

   À mesure que vous choisissez ces options, l’aperçu du widget est automatiquement mis à jour afin que vous puissiez voir à quoi ressemblera l’expérience pour vos clients.  
![\[Aperçu du widget de communication\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/netra-chat-preview.png)

**Styles de boutons**

1. Choisissez les couleurs de l’arrière-plan des boutons en saisissant des valeurs hexadécimales ([codes couleur HTML](https://htmlcolorcodes.com/)).

1. Choisissez **Blanc** ou **Noir** comme couleur d’icône. La couleur d’icône ne peut pas être personnalisée.

**En-tête du widget**

1. Fournissez des valeurs pour le message et la couleur d’en-tête, ainsi que pour la couleur d’arrière-plan du widget. 

1. **URL du logo** : insérez une URL vers la bannière de votre logo depuis un compartiment Amazon S3 ou une autre source en ligne.
**Note**  
L’aperçu du widget de communication sur la page de personnalisation n’affichera pas le logo s’il provient d’une source en ligne autre qu’un compartiment Amazon S3. Cependant, le logo sera affiché lorsque le widget de communication personnalisé sera implémenté sur votre page.

   La bannière doit être au format .svg, .jpg ou .png. L’image peut mesurer 280 pixels (largeur) par 60 pixels (hauteur). Toute image supérieure à ces dimensions sera redimensionnée pour s’adapter à l’espace des composants de logo de 280 x 60.

   1. Pour obtenir des instructions sur le chargement d’un fichier tel que la bannière de votre logo sur S3, consultez [Chargement d’objets](https://docs.aws.amazon.com/AmazonS3/latest/userguide/upload-objects.html) dans le *Guide de l’utilisateur Amazon Simple Storage Service*.

   1. Assurez-vous que les autorisations pour les images sont correctement définies afin que le widget de communication soit autorisé à accéder à l’image. Pour plus d’informations sur la façon de rendre un objet S3 accessible au public, consultez [Étape 2 : ajouter une stratégie de compartiment](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html#bucket-policy-static-site) dans la rubrique *Définition des autorisations pour l’accès au site Web*.

**Vue du chat**

1.  **Police de caractères** : utilisez la liste déroulante pour choisir la police du texte du widget de communication.

1. 
   + **Nom d’affichage du message système** : entrez un nouveau nom d’affichage pour remplacer le nom par défaut. La valeur par défaut est **MESSAGE\$1SYSTÈME**.
   + **Nom d’affichage du message de bot** : entrez un nouveau nom d’affichage pour remplacer le nom par défaut. La valeur par défaut est **BOT**.
   + **Espace réservé d’entrée de texte** : saisissez le nouveau texte de l’espace réservé pour remplacer le texte par défaut. Le texte par défaut est **Saisir un message**. 
   + **Texte du bouton de fin de conversation** : saisissez un nouveau texte pour remplacer le texte par défaut. Le texte par défaut est **Mettre fin au chat**.

1. **Couleur de la bulle de messagerie instantanée de l’agent** : choisissez les couleurs des bulles de message de l’agent en entrant des valeurs hexadécimales ([codes couleur HTML](https://htmlcolorcodes.com/)).

1. **Couleur de la bulle de messagerie instantanée du client** : choisissez les couleurs des bulles de message du client en entrant des valeurs hexadécimales ([codes couleur HTML](https://htmlcolorcodes.com/)). 

1. Choisissez **Save and continue (Enregistrer et continuer)**.

## Étape 2 : spécifier les domaines du site Web où vous souhaitez afficher le widget de communication
<a name="chat-widget-domains"></a>

1. Entrez les domaines du site Web où vous souhaitez placer le widget de communication. Le chat se charge uniquement sur les sites Web sélectionnés au cours de cette étape. 

   Choisissez **Ajouter un domaine** pour ajouter jusqu’à 50 domaines.  
![\[Option Ajouter un domaine.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/chatwidget-add-domain.png)

   Comportement de la liste d’autorisation de domaines :
   + Les sous-domaines sont automatiquement inclus. Par exemple, si vous autorisez example.com, tous ses sous-domaines (tels que sub.example.com) sont également autorisés.
   + Le protocole http:// ou https:// doit correspondre exactement à votre configuration. Spécifiez le protocole exact lors de la configuration des domaines autorisés.
   + Tous les chemins d’URL sont automatiquement autorisés. Par exemple, si exemple.com est autorisé, toutes les pages situées en dessous (par exemple. com/cart or example.com/checkout) sont accessibles. Vous ne pouvez pas autoriser ni bloquer des sous-répertoires spécifiques.
**Important**  
Vérifiez que votre site Web est valide et URLs qu'il ne contient pas d'erreurs. Incluez l’URL complète commençant par https://.
Nous vous recommandons d’utiliser https:// pour vos sites Web et applications de production.

1. Sous Renforcer **la sécurité de votre widget de communication**, nous vous recommandons de choisir **Oui** et de travailler avec l'administrateur de votre site Web pour configurer vos serveurs Web afin qu'ils émettent des jetons Web JSON (JWTs) pour les nouvelles demandes de chat. Cela vous permet de mieux contrôler le lancement de nouveaux chats, notamment de vérifier que les demandes de chat envoyées à Amazon Connect proviennent d’utilisateurs authentifiés.  
![\[Activation de la sécurité pour les nouvelles demandes de widgets de communication.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/chatwidget-choose-security.png)

   Si vous choisissez **Oui,** vous obtenez les résultats suivants :
   + Amazon Connect fournit une clé de sécurité à 44 caractères sur la page suivante que vous pouvez utiliser pour créer des jetons Web JSON (JWTs).
   + Amazon Connect ajoute une fonction de rappel dans le script d’incorporation du widget de communication qui vérifie la présence d’un jeton Web JSON (JWT) lorsqu’un chat est démarré.

     Vous devez implémenter la fonction de rappel dans l’extrait incorporé, comme illustré dans l’exemple suivant.

     ```
     amazon_connect('authenticate', function(callback) {
       window.fetch('/token').then(res => {
         res.json().then(data => {
           callback(data.data);
         });
       });
     });
     ```

   Si vous choisissez cette option, vous obtiendrez à l’étape suivante une clé de sécurité pour toutes les demandes de chat lancées sur vos sites Web. Demandez à l'administrateur de votre site Web de configurer vos serveurs Web pour qu'ils JWTs utilisent cette clé de sécurité. 

1. Choisissez **Enregistrer**.

## Étape 3 : confirmer et copier le code et les clés de sécurité du widget de communication
<a name="confirm-and-copy-chat-widget-script"></a>

Au cours de cette étape, vous confirmez vos sélections, copiez le code du widget de communication et l’incorporez dans votre site Web. Si vous avez choisi de JWTs les utiliser à l'[étape 2](#chat-widget-domains), vous pouvez également copier les clés secrètes pour les créer. 

### Clé de sécurité
<a name="chat-widget-security-key"></a>

Utilisez cette clé de sécurité de 44 caractères pour générer des jetons Web JSON à partir de votre serveur Web. Vous pouvez également mettre à jour ou faire pivoter les clés si vous devez les modifier. Dans ce cas, Amazon Connect vous fournit une nouvelle clé et conserve la clé précédente jusqu’à ce que vous ayez l’occasion de la remplacer. Une fois la nouvelle clé déployée, vous pouvez revenir dans Amazon Connect et supprimer la clé précédente.

![\[Clé de sécurité fournie par Amazon Connect.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/chatwidget-security-key.png)


Lorsque vos clients interagissent avec l’icône Démarrer le chat sur votre site Web, le widget de communication demande un jeton JWT à votre serveur Web. Lorsque ce JWT est fourni, le widget l’inclut dans la demande de chat du client final à Amazon Connect. Amazon Connect utilise ensuite la clé secrète pour déchiffrer le jeton. En cas de succès, cela confirme que le JWT a été émis par votre serveur Web et Amazon Connect achemine la demande de chat vers les agents de votre centre de contact.

#### Spécificités du jeton Web JSON
<a name="jwt"></a>
+ Algorithme : **HS256**
+ Demandes :
  + **sous** : *widgetId*

    Remplacez `widgetId` par votre propre identifiant de widget. Pour trouver votre identifiant de widget, consultez l’exemple [Script de widget de communication](#chat-widget-script).
  + **iat** : \$1pour Issued At Time (Émis à).
  + **exp** : \$1Expiration (10 minutes au maximum).
  + **segmentAttributes (facultatif)** : ensemble de paires clé-valeur définies par le système et stockées sur des segments de contact individuels à l’aide d’un mappage d’attribut. Pour plus d'informations SegmentAttributes , consultez l'[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-StartChatContact-request-SegmentAttributes)API.
  + **attributs (facultatif)** : objet avec des paires string-to-string clé-valeur. Les attributs de contact doivent respecter les limites définies par l'[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-StartChatContact-request-Attributes)API.
  + **relatedContactId (facultatif)** : chaîne avec un identifiant de contact valide. Ils relatedContactId doivent respecter les limites définies par l'[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API.
  + **customerId (facultatif)** : il peut s’agir d’un identifiant de la fonctionnalité Profils des clients Amazon Connect ou d’un identifiant personnalisé provenant d’un système externe, tel qu’un CRM. 

  \$1 Pour plus d’informations sur le format de date, consultez le document Internet Engineering Task Force (IETF) : [JSON Web Token (JWT)](https://tools.ietf.org/html/rfc7519), page 5. 

L’extrait de code suivant illustre comment générer un JWT en Python :

```
import jwt 
import datetime 
CONNECT_SECRET = "your-securely-stored-jwt-secret" 
WIDGET_ID = "widget-id" 
JWT_EXP_DELTA_SECONDS = 500

payload = { 
'sub': WIDGET_ID, 
'iat': datetime.datetime.utcnow(), 
'exp': datetime.datetime.utcnow() + datetime.timedelta(seconds=JWT_EXP_DELTA_SECONDS), 
'customerId': "your-customer-id",
'relatedContactId':'your-relatedContactId',                    
'segmentAttributes': {"connect:Subtype": {"ValueString" : "connect:Guide"}}, 'attributes': {"name": "Jane", "memberID": "123456789", "email": "Jane@example.com", "isPremiumUser": "true", "age": "45"} } 
header = { 'typ': "JWT", 'alg': 'HS256' } 
encoded_token = jwt.encode((payload), CONNECT_SECRET, algorithm="HS256", headers=header) // CONNECT_SECRET is the security key provided by Amazon Connect
```

### Script de widget de communication
<a name="chat-widget-script"></a>

L'image suivante montre un exemple de JavaScript ce que vous intégrez aux sites Web sur lesquels vous souhaitez que les clients discutent avec des agents. Ce script affiche le widget dans le coin inférieur droit de votre site Web. 

![\[Script de widget de communication.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/chatwidget-code.png)


Lorsque votre site Web se charge, les clients voient d’abord l’icône **Démarrer**. Lorsqu’ils choisissent cette icône, le widget de communication s’ouvre et les clients peuvent envoyer un message à vos agents.

Pour apporter des modifications au widget de communication à tout moment, choisissez **Modifier**.

**Note**  
Les modifications enregistrées mettent à jour l’expérience client en quelques minutes. Confirmez la configuration de votre widget avant de l’enregistrer. 

![\[Lien de modification dans l’aperçu du widget\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/chatwidget-edit.png)


Pour modifier les icônes de widget sur le site Web, vous recevez un nouvel extrait de code afin de mettre à jour directement votre site Web.

## Vous obtenez des messages d’erreur ?
<a name="chat-widget-error-messages"></a>

Si vous recevez des messages d’erreur, consultez [Dépannage lié à votre widget de communication Amazon Connect](ts-cw.md).

# Personnalisation du comportement de lancement du widget et de l’icône du bouton pour votre site Web hébergé sur Amazon Connect
<a name="customize-widget-launch"></a>

Pour personnaliser davantage la façon dont votre site Web affiche et lance l’icône du widget hébergé, vous pouvez configurer le comportement de lancement et masquer l’icône par défaut. Par exemple, vous pouvez lancer le widget par programmation à partir d’un élément du bouton **Discuter avec nous** affiché sur votre site Web.

**Topics**
+ [Comment configurer un comportement de lancement personnalisé pour le widget](#config-widget-launch)
+ [Options et contraintes prises en charge](#launch-options-constraints)
+ [Configuration du lancement du widget pour des cas d’utilisation personnalisés](#launch-usage)
+ [Activation de la persistance des sessions de chat entre les onglets](#chat-persistence-across-tabs)

## Comment configurer un comportement de lancement personnalisé pour le widget
<a name="config-widget-launch"></a>

Pour transmettre un comportement de lancement personnalisé, utilisez l’exemple de bloc de code suivant et incorporez-le dans votre widget. Tous les champs présentés dans l’exemple suivant sont facultatifs et n’importe quelle combinaison peut être utilisée.

```
amazon_connect('customLaunchBehavior', {
    skipIconButtonAndAutoLaunch: true,
    alwaysHideWidgetButton: true,
    programmaticLaunch: (function(launchCallback) {
        var launchWidgetBtn = document.getElementById('launch-widget-btn');
        if (launchWidgetBtn) {
            launchWidgetBtn.addEventListener('click', launchCallback);
            window.onunload = function() {
            launchWidgetBtn.removeEventListener('click', launchCallback);
            return;
            }
        }
    })
});
```

## Options et contraintes prises en charge
<a name="launch-options-constraints"></a>

Le tableau suivant répertorie les options de comportement de lancement personnalisé prises en charge. Les champs sont facultatifs et n’importe quelle combinaison peut être utilisée.


| Nom d’option | Type | Description | Valeur par défaut | 
| --- | --- | --- | --- | 
|  `skipIconButtonAndAutoLaunch`  | Booléen  | Un drapeau indiquant enable/disable le lancement automatique du widget sans que l'utilisateur ne clique sur le chargement de la page. | non définie | 
|  `alwaysHideWidgetButton`  | Booléen  | Un drapeau indiquant que enable/disable le bouton de l'icône du widget s'affiche (sauf si une session de discussion est en cours). | non définie | 
|  `programmaticLaunch`  | Fonction  |  | non définie | 

## Configuration du lancement du widget pour des cas d’utilisation personnalisés
<a name="launch-usage"></a>

### Bouton de lancement du widget personnalisé
<a name="custom-launch-button"></a>

L’exemple suivant montre les modifications que vous devez apporter au widget pour configurer le lancement par programmation afin qu’il ne s’ouvre que lorsque l’utilisateur choisit un élément de bouton personnalisé affiché n’importe où sur votre site Web. Par exemple, il peut choisir un bouton nommé **Nous contacter** ou **Discuter avec nous**. Vous pouvez éventuellement masquer l’icône du widget Amazon Connect par défaut tant que le widget n’est pas ouvert.

```
<button id="launch-widget-btn">Chat With Us</button>
```

```
<script type="text/javascript">
 (function(w, d, x, id){
    s=d.createElement("script");
    s.src="./amazon-connect-chat-interface-client.js"
    s.async=1;
    s.id=id;
    d.getElementsByTagName("head")[0].appendChild(s);
    w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
  })(window, document, 'amazon_connect', 'asfd-asdf-asfd-asdf-asdf');
  amazon_connect('styles', { openChat: { color: '#000', backgroundColor: '#3498fe'}, closeChat: { color: '#fff', backgroundColor: '#123456'} });
  amazon_connect('snippetId', "QVFJREFsdafsdfsadfsdafasdfasdfsdafasdfz0=")
  amazon_connect('customLaunchBehavior', {
        skipIconButtonAndAutoLaunch: true,
        alwaysHideWidgetButton: true,
        programmaticLaunch: (function(launchCallback) {
            var launchWidgetBtn = document.getElementById('launch-widget-btn');
            if (launchWidgetBtn) {
                launchWidgetBtn.addEventListener('click', launchCallback);
                window.onunload = function() {
                launchWidgetBtn.removeEventListener('click', launchCallback);
                return;
                }
            }
        }),
    });
</script>
```

### Prise en charge des hyperliens
<a name="hyperlink-support"></a>

L’exemple suivant présente les modifications que vous devez apporter à la configuration de widget `auto-launch`, qui permet d’ouvrir le widget sans attendre que l’utilisateur clique. Vous pouvez effectuer un déploiement sur une page hébergée par votre site Web pour créer un lien hypertexte partageable.

```
https://example.com/contact-us?autoLaunchMyWidget=true
```

```
<script type="text/javascript">
 (function(w, d, x, id){
    s=d.createElement("script");
    s.src="./amazon-connect-chat-interface-client.js"
    s.async=1;
    s.id=id;
    d.getElementsByTagName("head")[0].appendChild(s);
    w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
  })(window, document, 'amazon_connect', 'asfd-asdf-asfd-asdf-asdf');
  amazon_connect('styles', { openChat: { color: '#000', backgroundColor: '#3498fe'}, closeChat: { color: '#fff', backgroundColor: '#123456'} });
  amazon_connect('snippetId', "QVFJREFsdafsdfsadfsdafasdfasdfsdafasdfz0=")
  amazon_connect('customLaunchBehavior', {
        skipIconButtonAndAutoLaunch: true
    });
</script>
```

### Chargement des ressources du widget par un clic sur un bouton
<a name="load-assets"></a>

L’exemple suivant présente les modifications que vous devez apporter au widget pour accélérer le chargement de la page de votre site Web en récupérant les ressources statiques du widget lorsqu’un utilisateur clique sur le bouton **Discuter avec nous**. En général, seul un faible pourcentage de clients visitant une page **Nous contacter** ouvre le widget Amazon Connect. Le widget peut ajouter de la latence au chargement des pages en récupérant des fichiers depuis le CDN, même si les clients n’ouvrent jamais le widget.

Une autre solution consiste à exécuter l’extrait de code de manière asynchrone (ou jamais) en cliquant sur un bouton. 

```
<button id="launch-widget-btn">Chat With Us</button>
```

```
var buttonElem = document.getElementById('launch-widget-btn');

buttonElem.addEventListener('click', function() {
    (function(w, d, x, id){
        s=d.createElement("script");
        s.src="./amazon-connect-chat-interface-client.js"
        s.async=1;
        s.id=id;
        d.getElementsByTagName("head")[0].appendChild(s);
        w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
    })(window, document, 'amazon_connect', 'asfd-asdf-asfd-asdf-asdf');
    amazon_connect('styles', { openChat: { color: '#000', backgroundColor: '#3498fe'}, closeChat: { color: '#fff', backgroundColor: '#123456'} });
    amazon_connect('snippetId', "QVFJREFsdafsdfsadfsdafasdfasdfsdafasdfz0=")
    amazon_connect('customLaunchBehavior', {
        skipIconButtonAndAutoLaunch: true
    });
});
```

### Lancement d’un nouveau chat dans une fenêtre de navigateur
<a name="new-chat-browser-window"></a>

L’exemple suivant présente les modifications que vous devez apporter au widget pour ouvrir une nouvelle fenêtre de navigateur et lancer automatiquement le chat en mode plein écran.

```
<button id="openChatWindowButton">Launch a Chat</button>
```

```
<script> // Function to open a new browser window with specified URL and dimensions
    function openNewWindow() {
        var url = 'https://mycompany.com/support?autoLaunchChat=true';

        // Define the width and height
        var width = 300;
        var height = 540;

        // Calculate the left and top position to center the window
        var left = (window.innerWidth - width) / 2;
        var top = (window.innerHeight - height) / 2;

        // Open the new window with the specified URL, dimensions, and position
        var newWindow = window.open(url, '', 'width=${width}, height=${height}, left=${left}, top=${top}');
    }

    // Attach a click event listener to the button
    document.getElementById('openChatWindowButton').addEventListener('click', openNewWindow);
</script>
```

## Activation de la persistance des sessions de chat entre les onglets
<a name="chat-persistence-across-tabs"></a>

Par défaut, si un chat est ouvert dans un onglet, puis que l’utilisateur ouvre un nouvel onglet et démarre un autre chat, un nouveau chat démarre au lieu de se connecter au chat existant. Vous pouvez activer la persistance des sessions de chat entre les onglets si vous souhaitez que l’utilisateur se connecte au chat existant qui a été lancé dans l’onglet initial. 

La session de chat est enregistrée dans le stockage de session du navigateur dans la variable `persistedChatSession`. Vous devez copier cette valeur dans le stockage de session du nouvel onglet lors de la première initialisation du widget. Voici les instructions.

Pour vous connecter à la même session de chat lorsque l’utilisateur accède à différents sous-domaines, vous pouvez définir la propriété de domaine du cookie. Par exemple, vous possédez deux sous-domaines : `domain1.example.com` et `domain2.example.com`. Vous pouvez ajouter la propriété `domain=.example.com` afin que le cookie soit accessible depuis tous les sous-domaines.

1. Copiez le code suivant à côté des autres fonctionnalités amazon\$1connect dans l’extrait de widget hébergé. Cela utilise les gestionnaires d’événements `registerCallback` pour stocker `persistedChatSession` sous forme de cookie afin qu’il soit accessible dans le nouvel onglet. Cela nettoie également le cookie à la fin du chat.

   

   ```
   amazon_connect('registerCallback', {
   'CONNECTION_ESTABLISHED': (eventName, { chatDetails, data }) => {
    document.cookie = `activeChat=${sessionStorage.getItem("persistedChatSession")}; SameSite=None; Secure`;
   }, 
   'CHAT_ENDED': () => {
     document.cookie = "activeChat=; SameSite=None; Secure";
   }
   });
   ```

1. Récupérez la valeur du cookie si elle existe et définissez la valeur de stockage de session dans le nouvel onglet.

   ```
   const cookie = document.cookie.split('; ').find(c => c.startsWith('activeChat='));
   if (cookie) {
     const activeChatValue = cookie.split('=')[1];
     sessionStorage.setItem('persistedChatSession', activeChatValue);
   }
   
   //Your hosted widget snippet should be on this page
   ```

# Transmission du nom d’affichage du client lors du démarrage d’un chat Amazon Connect
<a name="pass-display-name-chat"></a>

Pour offrir une expérience plus personnalisée à vos clients et à vos agents, vous pouvez personnaliser le widget de communication Amazon Connect afin de transmettre le nom d’affichage du client lors de l’initialisation du contact. Le nom est visible à la fois par le client et par l’agent tout au long de l’interaction par chat. Ce nom d’affichage est enregistré dans la transcription du chat.

Les images suivantes présentent le nom d’affichage du client dans son expérience de chat et son nom dans le CCP de l’agent.

![\[Nom du client dans son expérience de chat, nom du client dans le CCP de l’agent.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/chatwidget-displayname.png)


1. Comment le nom d’affichage du client peut apparaître au client à l’aide de l’interface utilisateur de chat.

1. Comment le nom d’affichage du client peut apparaître à l’agent à l’aide du CCP.

## Comment transmettre le nom d’affichage d’un client dans le widget de communication
<a name="setup-display-name"></a>

Pour transmettre le nom d’affichage d’un client, implémentez votre fonction de rappel dans l’extrait. Amazon Connect récupère automatiquement le nom d’affichage.

1. Si vous ne l’avez pas déjà fait, exécutez les étapes figurant dans [Ajout d’une interface utilisateur de chat à votre site Web hébergé par Amazon Connect](add-chat-to-website.md).

1. Augmentez votre extrait de widget existant pour ajouter un rappel `customerDisplayName`. Voici un exemple :

   ```
   amazon_connect('customerDisplayName', function(callback) {
     const displayName = 'Jane Doe';
     callback(displayName);
   });
   ```

   L’important est que le nom soit transmis à `callback(name)`.

## Ce que vous devez savoir au sujet du nom d’affichage du client
<a name="setup-display-name-important-notes"></a>
+ Il ne peut exister qu’une seule fonction `customerDisplayName` à la fois.
+ Le nom d'affichage du client doit respecter les limites définies par l'[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-Type-ParticipantDetails-DisplayName)API. En d’autres termes, le nom doit être une chaîne de 1 à 256 caractères.
+ Une chaîne vide, nulle ou non définie n’est pas une entrée valide pour le nom d’affichage. Pour éviter de transmettre accidentellement ces entrées, le widget consigne une erreur (`Invalid customerDisplayName provided`) dans la console du navigateur, puis démarre le chat avec le nom d’affichage par défaut, **Client**.
+ Comme l’extrait se trouve dans la partie frontale de votre site Web, ne transmettez pas de données sensibles comme le nom d’affichage. Veillez à respecter les pratiques de sécurité appropriées pour protéger vos données contre les attaques et les acteurs malveillants.

# Transmission des attributs de contact à un agent dans le Panneau de configuration des contacts (CCP) lors du démarrage d’un chat
<a name="pass-contact-attributes-chat"></a>

Vous pouvez utiliser les [attributs de contact](what-is-a-contact-attribute.md) pour capturer des informations sur le contact qui utilise le widget de communication. Vous pouvez ensuite présenter ces informations à l’agent via le panneau de configuration des contacts (CCP) ou les utiliser ailleurs dans le flux.

Par exemple, vous pouvez personnaliser votre flux pour indiquer le nom du client dans votre message de bienvenue. Vous pouvez également utiliser des attributs spécifiques à votre entreprise, tels que account/member IDs des identifiants clients tels que des noms et des e-mails, ou d'autres métadonnées associées à un contact.

## Comment transmettre des attributs de contact dans le widget de communication
<a name="how-to-contact-attributes-chatwidget"></a>

1. Activez la sécurité dans le widget de communication comme décrit dans [Ajout d’une interface utilisateur de chat à votre site Web hébergé par Amazon Connect](add-chat-to-website.md), si ce n’est pas déjà fait :

   1. Dans Étape 2, sous **Sécuriser votre widget de chat**, choisissez **Oui**.

   1. Dans Étape 3, utilisez la clé de sécurité pour générer des jetons Web JSON.

1. Ajoutez les attributs de contact aux données utiles de votre JWT sous forme de demande `attributes`.

   Voici un exemple de la façon dont vous pouvez générer un JWT avec des attributs de contact en Python :
**Note**  
JWT doit être installé comme prérequis. Pour l’installer, lancez `pip install PyJWT` dans votre terminal.

   ```
   import jwt 
   import datetime 
   CONNECT_SECRET = "your-securely-stored-jwt-secret" 
   WIDGET_ID = "widget-id" 
   JWT_EXP_DELTA_SECONDS = 500
   
   payload = { 
   'sub': WIDGET_ID, 
   'iat': datetime.datetime.utcnow(), 
   'exp': datetime.datetime.utcnow() + datetime.timedelta(seconds=JWT_EXP_DELTA_SECONDS), 
   'segmentAttributes': {"connect:Subtype": {"ValueString" : "connect:Guide"}}, 'attributes': {"name": "Jane", "memberID": "123456789", "email": "Jane@example.com", "isPremiumUser": "true", "age": "45"} } 
   header = { 'typ': "JWT", 'alg': 'HS256' } 
   encoded_token = jwt.encode((payload), CONNECT_SECRET, algorithm="HS256", headers=header) // CONNECT_SECRET is the security key provided by Amazon Connect
   ```

   Dans les données utiles, vous devez créer une clé de chaîne `attributes` (telle quelle, entièrement en minuscules), avec un objet comme valeur. Cet objet doit comporter des paires string-to-string clé-valeur. Si un élément transmis dans l’un des attributs n’est pas une chaîne, le chat ne démarre pas. 

   Les attributs de contact doivent respecter les limites définies par l'[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-StartChatContact-request-Attributes)API : 
   + La longueur minimale des clés doit être 1
   + La longueur minimale des valeurs dot être 0

Vous pouvez éventuellement ajouter la chaîne SegmentAttributes à la carte d'[SegmentAttributeValue](https://docs.aws.amazon.com/connect/latest/APIReference/API_SegmentAttributeValue.html)objets, dans la charge utile. Les attributs sont des Amazon Connect attributs standard. Ils sont accessibles dans les flux. Les attributs de contact doivent respecter les limites définies par l'[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-StartChatContact-request-SegmentAttributes)API.

## Méthode alternative : transmettre les attributs de contact directement à partir de l’extrait de code
<a name="pass-attributes-directly"></a>

**Note**  
L’extrait de code précède `HostedWidget-` dans toutes les clés d’attribut de contact qu’il transmet. Dans l’exemple suivant, le côté agent verra la paire clé-valeur `HostedWidget-foo: 'bar'`.
Bien que ces attributs soient délimités par le préfixe `HostedWidget-`, ils restent des attributs client-site mutables. Utilisez la configuration JWT si vous avez besoin de données d’identification personnelle ou de données immuables dans votre flux. 

L’exemple suivant illustre comment transmettre des attributs de contact directement depuis un extrait de code sans activer la sécurité des widgets. 

```
<script type="text/javascript">
  (function(w, d, x, id){ /* ... */ })(window, document, 'amazon_connect', 'widgetId');
  amazon_connect('snippetId', 'snippetId');
  amazon_connect('styles', /* ... */);
  // ...

  amazon_connect('contactAttributes', {
   foo: 'bar'
  })
<script/>
```

### Utilisation des attributs dans les flux
<a name="contact-flow-usage-chat"></a>

Le bloc de flux [Vérifier les attributs de contact](check-contact-attributes.md) permet d’accéder à ces attributs en utilisant l’espace de noms **Défini par l’utilisateur**, comme indiqué dans l’image suivante. Vous pouvez utiliser le bloc de flux pour ajouter une logique de branchement. Le chemin complet est `$.Attributes.HostedWidget-attributeName`.

![\[Image montrant un bloc de flux se branchant vers des invites valides et non valides.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/flow-check-contact-attrib.png)


## À savoir
<a name="contact-attributes-chatwidget-important-notes"></a>
+ Le widget de communication comporte une limite de 6 144 octets pour l’ensemble du jeton encodé. Comme il JavaScript utilise le codage UTF-16, 2 octets sont utilisés par caractère, de sorte que la taille maximale du `encoded_token` doit être d'environ 3 000 caractères.
+ Le jeton codé doit être transmis à `callback(data)`. L’extrait `authenticate` ne nécessite aucune modification supplémentaire. Par exemple :

  ```
  amazon_connect('authenticate', function(callback) {
    window.fetch('/token').then(res => {
      res.json().then(data => {
        callback(data.data);
      });
    });
  });
  ```
+ L’utilisation d’un JWT pour transmettre les attributs de contact garantit l’intégrité des données. Si vous protégez le secret partagé et que vous respectez les pratiques de sécurité appropriées, vous pouvez contribuer à ce que les données ne puissent pas être manipulées par une personne mal intentionnée.
+ Les attributs de contact sont uniquement codés dans le JWT, mais ils ne sont pas chiffrés. Il est donc possible de les décoder et de les lire.
+ Si vous souhaitez tester l’expérience de chat avec l’[expérience de chat simulée](chat-testing.md#test-chat) et inclure des attributs de contact, veillez à mettre la clé et la valeur entre guillemets, comme indiqué dans l’image suivante.  
![\[Page des paramètres de test, clé d’attribut de contact entre guillemets, valeur entre guillemets.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/test-chat-contact-attributes.png)

# Personnalisations supplémentaires pour votre widget de chat Amazon Connect
<a name="pass-customization-object"></a>

Vous pouvez ajouter les personnalisations facultatives suivantes à votre interface utilisateur de chat :
+ Affichez le bouton **Mettre fin à la conversation** dans le menu déroulant d’en-tête plutôt que dans le pied de page.
+ Masquez ou dissimulez les noms d’affichage.
+ Ajoutez des icônes de message.
+ Remplacez les messages d’événements.
+ Configurez une boîte de dialogue de confirmation qui sera présentée aux clients lorsqu’ils choisissent le bouton **Mettre fin au chat**. Cette boîte de dialogue vérifie que les clients ont bien l’intention de mettre fin à la session de chat. Vous pouvez personnaliser la boîte de dialogue de confirmation, le titre, le message et le texte du bouton.
+ Remplacez le message de rejet de la pièce jointe.

## Configuration de l’objet de personnalisation
<a name="configure-customization-object"></a>

L’exemple suivant illustre comment implémenter toutes les personnalisations facultatives. Pour obtenir la liste de toutes les personnalisations possibles, consultez [Options et contraintes prises en charge](#customization-options-constraints). Comme elles sont facultatives, vous pouvez implémenter une partie ou la totalité des champs présentés dans l’exemple suivant. Remplacez les chaînes `eventNames.customer`, `eventNames.agent`, `eventNames.supervisor`, `eventMessages.participantJoined`, `eventMessages.participantDisconnect`, `eventMessages.participantLeft`, `eventMessages.participantIdle`, `eventMessages.participantReturned` et `eventMessages.chatEnded` selon les besoins. Les icônes doivent être hébergées sur un site public URLs.

```
amazon_connect('customizationObject', {
        header: { 
            dropdown: true, 
            dynamicHeader: true,
        },
        transcript: { 
            hideDisplayNames: false, 
            eventNames: {
                customer: "User",
                agent: "Webchat Agent",
                supervisor: "Webchat Supervisor"
            },
            eventMessages: {
                participantJoined: "{name} has joined the chat",
                participantDisconnect: "",
                participantLeft: "{name} has dropped",
                participantIdle: "{name}, are you still there?",
                participantReturned: "",
                chatEnded: "Chat ended",
            },
            displayIcons: true,
            iconSources: { 
                botMessage: "imageURL",
                systemMessage: "imageURL",
                agentMessage: "imageURL",
                customerMessage: "imageURL",
            },
        },
        composer: {
            disableEmojiPicker: true,
            disableCustomerAttachments: true,
            alwaysHideToolbar: true,
            hide: false,
        },
        footer: {
            disabled:true,
            skipCloseChatButton: true,
        },
        endChat: {
            enableConfirmationDialog: true,
            confirmationDialogText: {
                title: "End Chat",
                message: "Are you sure you want to end this chat?",
                confirmButtonText: "End Chat",
                cancelButtonText: "Cancel",
        },
    },
    attachment: {
         // Default rejectedErrorMessage: Attachment was rejected.
        rejectedErrorMessage: "Custom Error Message: Files cannot exceed 15 MB." //this is customizable attribute 
    }
});
```

L’image suivante montre à quoi ressemblent les personnalisations si vous utilisez cet exemple :

![\[Diagramme montrant les noms d’affichage, les emplacements des menus, les icônes personnalisables et la boîte de dialogue de confirmation Mettre fin au chat.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/chat-customization-diagram2.png)


## Options et contraintes prises en charge
<a name="customization-options-constraints"></a>

Le tableau suivant répertorie les champs de personnalisation pris en charge et les contraintes de valeurs recommandées.


| Option de mise en page personnalisée | Type | Description | 
| --- | --- | --- | 
|  `header.dropdown`  |  Booléen  |  Affiche le rendu du menu déroulant d’en-tête à la place du pied de page par défaut.  Lorsque vous définissez cette option sur `true`, le bouton **Téléchargement de la transcription** apparaît et reste visible jusqu’à ce que vous définissiez l’option sur `false` ou que vous la supprimiez.   | 
| `header.dynamicHeader` | Booléen | Définit dynamiquement le titre de l'en-tête sur « Chatting with Bot/ AgentName ». | 
| `header.hideTranscriptDownloadButton` | Booléen | Masquez le bouton de [téléchargement de la transcription](chat-widget-download-transcript.md) dans le menu déroulant d’en-tête. La valeur par défaut est false. | 
|  `transcript.hideDisplayNames`  |  Booléen  |  Masque tous les noms d’affichage, applique les masques de nom par défaut si `eventNames` n’est pas fourni.  | 
|  `transcript.eventNames.customer`  |  String  |  Masque le nom d’affichage du client.  | 
|  `transcript.eventNames.agent`  |  String  |  Masque le nom d’affichage de l’agent.  | 
|  `transcript.eventNames.supervisor`  |  String  |  Masque le nom d’affichage du superviseur.  | 
|  ` transcript.eventMessages.participantJoined`  |  String  |  Remplace le message de l’événement dans la transcription lorsqu’un participant rejoint le chat. Si une chaîne vide est spécifiée, le message d’événement sera omis de la transcription. `{name}` peut être transmis dans le message et sera remplacé par le nom d’affichage du participant correspondant. Le message par défaut est `{name} has joined the chat`.   | 
|  `transcript.eventMessages.participantDisconnect`  |  String  |  Remplace le message d’événement dans la transcription lorsqu’un participant est déconnecté du chat. Si une chaîne vide est spécifiée, le message d’événement sera omis de la transcription. `{name}` peut être transmis dans le message et sera remplacé par le nom d’affichage du participant correspondant. Le message par défaut est \$1`name} has been idle too long, disconnecting`.  | 
|  `transcript.eventMessages.participantLeft`  |  String  |  Remplace le message de l’événement dans la transcription lorsqu’un participant quitte le chat. Si une chaîne vide est spécifiée, le message d’événement sera omis de la transcription. `{name}` peut être transmis dans le message et sera remplacé par le nom d’affichage du participant correspondant. Le message par défaut est `{name} has left the chat`.  | 
|  `transcript.eventMessages.participantIdle`  |  String  |  Remplace le message d’événement dans la transcription lorsqu’un participant est inactif. Si une chaîne vide est spécifiée, le message d’événement sera omis de la transcription. `{name}` peut être transmis dans le message et sera remplacé par le nom d’affichage du participant correspondant. Le message par défaut est `{name} has become idle`.  | 
|  `transcript.eventMessages.participantReturned`  |  String  |  Remplace le message d’événement dans la transcription lorsqu’un participant revient au chat. Si une chaîne vide est spécifiée, le message d’événement sera omis de la transcription. `{name} ` peut être transmis dans le message et sera remplacé par le nom d’affichage du participant correspondant. Le message par défaut est `{name} has returned`.  | 
|  `transcript.eventMessages.chatEnded`  |  String  |  Remplace le message d’événement figurant dans la transcription lorsque le chat est terminé. Si une chaîne vide est spécifiée, le message d’événement sera omis de la transcription. `{name}` peut être transmis dans le message et sera remplacé par le nom d’affichage du participant correspondant. Le message par défaut est `Chat has ended!`  | 
|  `transcript.displayIcons`  |  Booléen  |  Active les icônes d’affichage de message.  | 
|  `transcript.iconSources.botMessage`  |  String  |  Icône affichée pour les messages du bot, doit être hébergée sur une URL publique.  | 
|  `transcript.iconSources.systemMessage`  |  String  |  Icône affichée pour un message système, doit être hébergée sur une URL publique.  | 
|  `transcript.iconSources.agentMessage`  |  String  |  Icône affichée pour un message d’agent, doit être hébergée sur une URL publique.  | 
|  `transcript.iconSources.customerMessage`  |  String  |  Icône affichée pour un message du client, doit être hébergée sur une URL publique.  | 
|  `composer.alwaysHideToolbar`  |  Booléen  |  Masque la barre d’outils de mise en forme qui inclut des fonctionnalités de mise en forme du texte telles que le gras, l’italique et les options de liste à puces et de liste numérotée.  | 
|  `composer.disableEmojiPicker`  |  Booléen  |  Désactive le sélecteur d’emoji lorsque vous utilisez l’[éditeur de texte enrichi](enable-text-formatting-chat.md).  | 
| `composer.disableCustomerAttachments` | Booléen | Empêche les clients d’envoyer ou de télécharger des pièces jointes. | 
| `composer.hide` | Booléen | Masque le compositeur (`true`) ou l'affiche (`false`). Pour activer ou désactiver le compositeur en fonction d'événements (par exemple lorsqu'un agent rejoint le compositeur), utilisez `registerCallback` la `hideComposer` méthode. Pour de plus amples informations, veuillez consulter [Champs d’extrait de widget pris en charge et personnalisables dans Amazon Connect](supported-snippet-fields.md).<pre>document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatInterface.hideComposer(false)</pre> | 
|  `footer.disabled`  |  Booléen  |  Masquez le pied de page par défaut avec le bouton **Mettre fin à la conversation**.  | 
|  `footer.skipCloseChatButton`  |  Booléen  |  Ferme directement le widget en cliquant sur le bouton **Mettre fin au chat** au lieu d’afficher le bouton **Fermer**.  | 
| `endChat.enableConfirmationDialog` | Booléen | Active la boîte de dialogue de confirmation de fin de discussion. Les textes par défaut sont utilisés si confirmationDialogText n’est pas fourni. | 
| `endChat.confirmationDialogText.title` | String | Remplace le titre de la boîte de dialogue de confirmation de fin de discussion. | 
| `endChat.confirmationDialogText.message` | String | Remplace le message de la boîte de dialogue de confirmation de fin de discussion. | 
| `endChat.confirmationDialogText.confirmButtonText` | String | Remplace le texte du bouton de confirmation dans la boîte de dialogue de confirmation de fin de discussion. | 
| `endChat.confirmationDialogText.cancelButtonText` | String | Remplace le texte du bouton d’annulation dans la boîte de dialogue de confirmation de fin de discussion. | 
| `attachment.rejectedErrorMessage` | String | Remplace le message d’erreur concernant le rejet des pièces jointes au widget de chat. | 

# Téléchargement de la transcription de votre widget de chat dans Amazon Connect
<a name="chat-widget-download-transcript"></a>

Vous pouvez télécharger la transcription au format PDF dans votre widget de chat.

**Topics**
+ [Activation de la liste déroulante des en-têtes](#chat-widget-download-transcript-enable-header-dropdown)
+ [Téléchargement du PDF de la transcription du chat](#chat-widget-download-transcript-pdf)

## Activation de la liste déroulante des en-têtes
<a name="chat-widget-download-transcript-enable-header-dropdown"></a>

Le bouton permettant de télécharger la transcription se trouve dans un menu déroulant situé dans l’en-tête. Pour activer le menu déroulant de l’en-tête, nous devons configurer l’objet [customizationObject](pass-customization-object.md) de notre widget de chat dans le script du widget.

```
amazon_connect('customizationObject', {
        header: { 
            dropdown: true, 
        }
});
```

Notez que l’activation du menu déroulant désactive automatiquement le pied de page puisque la fonctionnalité **Mettre fin au chat** est déplacée vers le menu déroulant d’en-tête. Si vous souhaitez conserver le pied de page, vous pouvez le réactiver en utilisant ce qui suit :

```
amazon_connect('customizationObject', {
        header: { 
            dropdown: true, 
        },
        footer: {
            disabled: false,
        }
});
```

## Téléchargement du PDF de la transcription du chat
<a name="chat-widget-download-transcript-pdf"></a>

Après avoir activé le menu déroulant d’en-tête, vous devriez pouvoir voir un menu à trois points en haut à gauche du widget de chat. Dans ce menu déroulant, vous devriez voir un bouton de téléchargement **Transcription du chat**.

![\[Affiche le bouton permettant de télécharger la transcription du chat.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/chat-widget-download-transcript-pdf-1.png)


Si vous choisissez de télécharger la **transcription du chat**, le téléchargement du PDF commencera. Le PDF de la transcription du chat affichera tous les messages, les noms d’affichage, les horodatages et les événements liés aux messages, tels que le départ ou l’arrivée des participants.

![\[Exemple de transcription de chat téléchargé.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/chat-widget-download-transcript-pdf-2.png)


# Personnalisation du chat avec l’exemple open source Amazon Connect
<a name="download-chat-example"></a>

Vous pouvez personnaliser davantage l’expérience de chat que les clients utilisent pour interagir avec les agents. Utilisez la [bibliothèque open source Amazon Connect](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/cloudformationTemplates/asyncCustomerChatUX) sur GitHub. C’est une plateforme qui vous aidera à démarrer rapidement. Voici comment cela fonctionne :
+ Le GitHub référentiel renvoie à un CloudFormation modèle, qui démarre le point de terminaison Amazon API Gateway qui initie une fonction Lambda. Vous pouvez utiliser ce modèle comme exemple.
+ Après avoir créé la AWS CloudFormation pile, vous pouvez appeler cette API depuis votre application, importer le widget de communication prédéfini, transmettre la réponse au widget et commencer à discuter. 

Pour plus d’informations sur la personnalisation de l’expérience de chat, consultez les ressources suivantes : 
+ [Documentation de l'API Amazon Connect Service](https://docs.aws.amazon.com/connect/latest/APIReference/welcome.html), en particulier l'[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API. 
+  [API Amazon Connect Participant Service](https://docs.aws.amazon.com/connect-participant/latest/APIReference/Welcome.html). 
+  [Amazon Connect Streams](https://github.com/aws/amazon-connect-streams). Utilisez-les pour intégrer vos applications existantes à Amazon Connect. Vous pouvez intégrer les composants du Panneau de configuration des contacts dans votre application. 
+ [Kit SDK Amazon Connect Chat et exemples d’implémentation](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/) 

# Démarrez des discussions dans vos applications à l'aide d'Amazon Connect APIs
<a name="integrate-with-startchatcontact-api"></a>

Utilisez l' StartChatContact API d'Amazon Connect APIs pour démarrer des discussions dans vos propres applications.

Pour démarrer une discussion, utilisez l'[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API.

Lorsque vous explorez l’expérience de chat pour la première fois, vous remarquez que les chats ne sont pas comptabilisés dans la métrique **Contacts entrants** de votre rapport de métriques historiques. En effet, la méthode d’initiation de chat définie dans l’enregistrement de contact est **API**. 

L’image suivante d’un enregistrement de contact montre la *méthode d’initiation* définie sur *API*. 

![\[Enregistrement de contact, méthode d’initiation définie sur API.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/ctr-api.png)


Après le transfert d’une conversation instantanée vers un agent, la métrique **Contacts entrants** est incrémentée. L’enregistrement de contact du transfert n’incrémente plus l’API, mais incrémente **Contacts entrants**. 

# Envoi des notifications par navigateur aux clients lorsque des messages de chat arrivent
<a name="browser-notifications-chat"></a>

Le widget de communication prend en charge les notifications du navigateur pour vos clients via leurs ordinateurs de bureau. Plus précisément, vos clients recevront une notification via leur navigateur Web lorsqu’ils recevront un nouveau message mais qu’ils ne seront pas actifs sur la page Web contenant la fenêtre de chat. Lorsque vos clients cliquent ou appuient sur cette notification, ils sont automatiquement redirigés vers la page Web contenant la fenêtre de chat. Vos clients peuvent activer ou désactiver les notifications au début de chaque conversation par chat. 

L’image suivante présente un exemple de bannière de notification que les clients reçoivent lorsqu’ils ne se trouvent pas sur la page Web contenant la fenêtre de chat. La bannière indique à vos clients qu’ils ont un nouveau message et affiche le nom du site Web. 

![\[Bannière Google Chrome indiquant que vous avez reçu un nouveau message.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/chatwidget-notification-banner.png)


Les clients reçoivent également une icône de notification (un point rouge) sur le widget de communication lorsque celui-ci est réduit. L’image suivante présente l’icône de notification que les clients reçoivent lorsque leur fenêtre de chat est réduite.

![\[Icône de notification.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/chatwidget-browser-notification.png)


Ces deux fonctionnalités sont automatiquement incluses dans le widget de communication. Vous n’avez besoin d’exécuter aucune étape pour les mettre à la disposition de vos clients.

Vos clients reçoivent une allow/deny notification contextuelle lorsqu'ils initient une discussion et n'ont pas encore autorisé les notifications provenant de votre site Web ou de votre domaine. Une fois qu’ils ont accordé des autorisations de notification, ils commencent à recevoir des notifications du navigateur à chaque envoi de message ou de pièce jointe par l’agent lorsqu’ils ne se trouvent pas sur la page Web contenant la fenêtre de chat. Ce comportement s’applique même si vous avez déjà implémenté le widget de communication.

## Comment effectuer un test
<a name="test-browser-notifications-chat"></a>

1. Une fois que vous avez autorisé les notifications en tant que client test et que l’agent est connecté au chat, réduisez votre fenêtre de chat, puis ouvrez une nouvelle instance de navigateur afin de ne pas vous trouver sur la page Web contenant la fenêtre de chat.

1. Envoyez un message depuis la fenêtre de l’agent.

1. En tant que client test, vous voyez la bannière de notification.

1. Cliquez ou appuyez sur la bannière de notification. Vous accédez automatiquement à la page Web qui contient la fenêtre de chat.

1. Comme vous avez réduit votre fenêtre de chat précédemment, vous voyez également une icône de notification (un point rouge) sur le widget de communication.

Si vous ne voyez pas la notification du navigateur, vérifiez les points suivants : 
+ Vous utilisez un [navigateur pris en charge](add-chat-to-website.md#chat-widget-supported-browsers).
+ L'autorisation de notification se trouve allowed/enabled sur votre navigateur pour la page Web avec fenêtre de discussion.
+ L'agent (ou vous-même depuis votre session de chat d'agent) a envoyé un nouveau message message/attachment alors que vous êtes sur une page Web différente de celle qui contient la fenêtre de discussion. Pour que l’icône de notification (un point rouge) du widget soit visible, réduisez votre fenêtre de chat.
+ Les notifications du navigateur ne sont pas suspendues (temporairement ignorées).

# Déconnexion par programmation de la session de chat d’un widget de communication Amazon Connect
<a name="programmatic-chat-disconnect"></a>

Vous pouvez déconnecter la session de chat d'un widget de communication JavaScript par programmation en utilisant « » en appelant la `disconnect` méthode enregistrée dans le widget. `iframe` Dans le document hôte du widget, vous pouvez référencer la fonction `disconnect` à l’aide de l’extrait de code suivant : 

```
document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect()
```

Vous pouvez facilement l’ajouter au script du widget existant. Voici un exemple d’extrait :

```
<script type="text/javascript">
  (function(w, d, x, id){
    s=d.createElement('script');
    s.src='https://your-instance-alias.my.connect.aws/connectwidget/static/amazon-connect-chat-interface-client.js';
    s.async=1;
    s.id=id;
    d.getElementsByTagName('head')[0].appendChild(s);
    w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
  })(window, document, 'amazon_connect', '...');
  amazon_connect('styles', { iconType: 'CHAT', openChat: { color: '#ffffff', backgroundColor: '#123456' }, closeChat: { color: '#ffffff', backgroundColor: '#123456'} });
  amazon_connect('snippetId', '...');
  amazon_connect('supportedMessagingContentTypes', [ 'text/plain', 'text/markdown', 'application/vnd.amazonaws.connect.message.interactive', 'application/vnd.amazonaws.connect.message.interactive.response' ]);
 
  // Add disconnect event listener
  window.addEventListener("pagehide", () => {
      document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect();
  });
</script>
```

## Implémentation et cas d’utilisation
<a name="implementation-chat-disconnect"></a>

La déconnexion d’appel par programmation peut être utile dans de nombreux cas. Elle permet de mieux contrôler le moment où il faut mettre fin à la conversation, en dehors du simple fait de cliquer manuellement sur le bouton `End Chat`. Voici quelques cas d’utilisation courants des appels `disconnect`.

### À la fermeture ou à la navigation
<a name="close-chat-disconnect"></a>

Un cas d’utilisation courant consiste à associer la fonctionnalité de déconnexion aux événements qui se déclenchent lorsque le contexte du navigateur ou de l’onglet est détruit. `pagehide` et `beforeunload` sont les événements courants qui se déclenchent lors de la désactivation du navigateur. Ils sont déclenchés lorsqu’un utilisateur actualise, accède à une autre URL ou ferme l’onglet ou le navigateur. Bien que les deux événements soient déclenchés lorsque le contexte du navigateur est détruit, rien ne garantit que la fonctionnalité `disconnect` puisse être complètement exécutée avant que les ressources du navigateur ne soient nettoyées.

`pagehide` est un événement plus moderne du cycle de vie des pages qui est pris en charge par tous les principaux navigateurs et systèmes d’exploitation. `beforeunload` est un événement alternatif à essayer si l’événement `pagehide` ne parvient pas à appeler la déconnexion de manière cohérente. `beforeunload` est déclenché avant `pagehide`, ce qui peut apporter une fiabilité supplémentaire si la fonctionnalité `disconnect` ne s’exécute pas avant la fermeture du navigateur. Il y a eu des problèmes de fiabilité concernant `beforeunload`, en particulier sur les appareils iOS.

Voici un exemple d’extrait :

```
// Call disconnect when `beforeunload` triggers
window.addEventListener("beforeunload", (event) => {
    document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect();
});

// Call disconnect when `pagehide` triggers
window.addEventListener("pagehide", (event) => {
    document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect();
});
```

### Lors du changement de contexte
<a name="context-chat-disconnect"></a>

Un autre cas d'utilisation serait de déclencher une déconnexion lorsque l'utilisateur change de contexte, par exemple lorsqu'un utilisateur change, minimise tab/app ou verrouille son écran. L’événement `visibilitychange` peut gérer de manière fiable les scénarios dans lesquels le contexte n’est plus visible.

Voici un exemple d’extrait :

```
window.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "hidden") {
        document.getElementById("amazon-connect-chat-widget-iframe").contentWindow.connect.ChatSession.disconnect();
    } else if (document.visibilityState === "visible") {
        ...
    }
});
```

# Transmission de propriétés personnalisées pour remplacer les valeurs par défaut dans le widget de communication dans Amazon Connect
<a name="pass-custom-styles"></a>

Pour personnaliser davantage votre interface utilisateur de chat, vous pouvez remplacer les propriétés par défaut en transmettant vos propres valeurs. Par exemple, vous pouvez définir la largeur du widget sur 400 pixels et sa hauteur sur 700 pixels (contrairement à la taille par défaut de 300 pixels par 540 pixels). Vous pouvez également utiliser vos couleurs et tailles de police préférées.

## Comment transmettre des styles personnalisés pour le widget de communication
<a name="chat-widget-pass-custom-styles"></a>

Pour transmettre des styles personnalisés, utilisez l'exemple de bloc de code suivant et intégrez-le dans votre widget. Amazon Connect récupère automatiquement les styles personnalisés. Tous les champs présentés dans l’exemple suivant sont facultatifs.

```
amazon_connect('customStyles', {
 global: {
     frameWidth: '400px',
     frameHeight: '700px',
     textColor: '#fe3251',
     fontSize: '20px',
     footerHeight: '120px',
     typeface: "'AmazonEmber-Light', serif",
     customTypefaceStylesheetUrl: "https://ds6yc8t7pnx74.cloudfront.net/etc.clientlibs/developer-portal/clientlibs/main/css/resources/fonts/AmazonEmber_Lt.ttf",
     headerHeight: '120px',
 },
 header: {
     headerTextColor: '#541218',
     headerBackgroundColor: '#fe3',
 },
 transcript: {
     messageFontSize: '13px',
     messageTextColor: '#fe3',
     widgetBackgroundColor: '#964950',
     agentMessageTextColor: '#ef18d3',
     systemMessageTextColor: '#ef18d3',
     customerMessageTextColor: '#ef18d3',
     agentChatBubbleColor: '#111112',
     systemChatBubbleColor: '#111112',
     customerChatBubbleColor: '#0e80f2',
 },
 footer: {
     buttonFontSize: '20px',
     buttonTextColor: '#ef18d3',
     buttonBorderColor: '#964950',
     buttonBackgroundColor: '#964950',
     footerBackgroundColor: '#0e80f2',
     startCallButtonTextColor: '#541218',
     startChatButtonBorderColor: '#fe3',
     startCallButtonBackgroundColor: '#fe3',
 },
 logo: {
     logoMaxHeight: '61px',   
     logoMaxWidth: '99%',
 },
  composer: {
     fontSize: '20px', 
 },
  fullscreenMode: true // Enables fullscreen mode on the widget when a mobile screen size is detected in a web browser.
})
```

## Styles et contraintes pris en charge
<a name="chat-widget-supported-styles"></a>

Le tableau suivant répertorie les noms de styles personnalisés pris en charge et les contraintes de valeurs recommandées. Certains styles existent à la fois au niveau global et au niveau des composants. Par exemple, le style `fontSize` existe globalement et dans le composant de transcription. Les styles au niveau des composants ont une priorité plus élevée et sont pris en compte dans le widget de chat.


|  Nom de style personnalisé  |  Description  |  Contraintes recommandées  | 
| --- | --- | --- | 
|  `global.frameWidth`  |  Largeur de l’ensemble du cadre du widget  |  Minimum : 300 pixels Maximum : largeur de la fenêtre Ajustement recommandé en fonction de la taille de la fenêtre  | 
|  `global.frameHeight`  |  Hauteur de l’ensemble du cadre du widget  |  Minimum : 480 pixels Maximum : hauteur de la fenêtre Ajustement recommandé en fonction de la taille de la fenêtre  | 
|  `global.textColor`  |  Couleur pour tous les textes  |  Toute valeur de couleur CSS légale. Pour plus d’informations, consultez [Valeurs de couleur CSS légales](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `global.fontSize`  |  Taille de police pour tous les textes  |  12 à 20 pixels recommandés pour les différents cas d’utilisation  | 
|  `global.footerHeight`  |  Hauteur du pied de page du widget  |  Minimum : 50 pixels Maximum : hauteur du cadre Ajustement recommandé en fonction de la taille du cadre  | 
|  `global.typeface`  |  La police de caractères utilisée dans le widget.  |  N’importe quelle police de cette liste : Arial, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond, Book man, Tacoma, Trebuches MS, Arial Black, Impact, Comic Sans MS. Vous pouvez également ajouter une police ou une famille de polices personnalisée, mais vous devez héberger le fichier de police avec un accès public en lecture. Par exemple, vous pouvez consulter la documentation relative à l’utilisation de la famille de polices Amazon Ember dans la [bibliothèque pour développeurs Amazon](https://developer.amazon.com/en-US/alexa/branding/echo-guidelines/identity-guidelines/typography).   | 
|  `global.customTypefaceStylesheetUrl`  |  Emplacement où le fichier de police personnalisé est hébergé avec un accès public en lecture.  |  Effectuez une liaison vers l’emplacement HTTP public où le fichier de police est hébergé. Par exemple, l'emplacement du CDN de police de caractères AmazonEmber Light est `https://ds6yc8t7pnx74.cloudfront.net/etc.clientlibs/developer-portal/clientlibs/main/css/resources/fonts/AmazonEmber_Lt.ttf`  | 
|  `header.headerTextColor`  |  Couleur du texte du message d’en-tête  |  Toute valeur de couleur CSS légale. Pour plus d’informations, consultez [Valeurs de couleur CSS légales](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `header.headerBackgroundColor`  |  Couleur du texte pour l’arrière-plan de l’en-tête  |  Toute valeur de couleur CSS légale. Pour plus d’informations, consultez [Valeurs de couleur CSS légales](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `global.headerHeight`  |  Hauteur du pied de page du widget  |  Il est recommandé de l’ajuster en fonction du titre ou du logo de l’image, ou des deux.  | 
|  `transcript.messageFontSize`  |  Taille de police pour tous les textes  |  12 à 20 pixels recommandés pour les différents cas d’utilisation  | 
|  `transcript.messageTextColor`  |  Couleur du texte pour les messages de transcription  |  Toute valeur de couleur CSS légale. Pour plus d’informations, consultez [Valeurs de couleur CSS légales](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `transcript.widgetBackgroundColor`  |  Couleur du texte pour l’arrière-plan de la transcription  |  Toute valeur de couleur CSS légale. Pour plus d’informations, consultez [Valeurs de couleur CSS légales](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `transcript.customerMessageTextColor`  |  Couleur du texte pour les messages clients  |  Toute valeur de couleur CSS légale. Pour plus d’informations, consultez [Valeurs de couleur CSS légales](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `transcript.agentMessageTextColor`  |  Couleur du texte pour les messages d’agents  |  Toute valeur de couleur CSS légale. Pour plus d’informations, consultez [Valeurs de couleur CSS légales](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `transcript.systemMessageTextColor`  |  Couleur du texte pour les messages système  |  Toute valeur de couleur CSS légale. Pour plus d’informations, consultez [Valeurs de couleur CSS légales](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `transcript.agentChatBubbleColor`  |  Couleur de fond pour les bulles de message d’agent  |  Toute valeur de couleur CSS légale. Pour plus d’informations, consultez [Valeurs de couleur CSS légales](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `transcript.customerChatBubbleColor`  |  Couleur de fond pour les bulles de message client  |  Toute valeur de couleur CSS légale. Pour plus d’informations, consultez [Valeurs de couleur CSS légales](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `transcript.systemChatBubbleColor`  |  Couleur de fond pour les bulles de message système  |  Toute valeur de couleur CSS légale. Pour plus d’informations, consultez [Valeurs de couleur CSS légales](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `footer.buttonFontSize`  |  Taille de police pour le texte du bouton d’action  |  Ajustement recommandé en fonction de la hauteur du pied de page  | 
|  `footer.buttonTextColor`  |  Couleur du texte du bouton d’action  |  Toute valeur de couleur CSS légale. Pour plus d’informations, consultez [Valeurs de couleur CSS légales](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `footer.buttonBorderColor`  |  Couleur de la bordure du bouton d’action  |  Toute valeur de couleur CSS légale. Pour plus d’informations, consultez [Valeurs de couleur CSS légales](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `footer.buttonBackgroundColor`  |  Couleur du fond du bouton d’action  |  Toute valeur de couleur CSS légale. Pour plus d’informations, consultez [Valeurs de couleur CSS légales](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `footer.BackgroundColor`  |  Couleur de fond du pied de page  |  Toute valeur de couleur CSS légale. Pour plus d’informations, consultez [Valeurs de couleur CSS légales](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `footer.startCallButtonTextColor`  |  Couleur du texte du bouton de démarrage de l’appel  |  Toute valeur de couleur CSS légale. Pour plus d’informations, consultez [Valeurs de couleur CSS légales](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `footer.startCallButtonBorderColor`  |  Couleur de la bordure du bouton de démarrage de l’appel  |  Toute valeur de couleur CSS légale. Pour plus d’informations, consultez [Valeurs de couleur CSS légales](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `footer.startCallButtonBackgroundColor`  |  Couleur de fond du bouton de démarrage de l’appel  |  Toute valeur de couleur CSS légale. Pour plus d’informations, consultez [Valeurs de couleur CSS légales](https://www.w3schools.com/cssref/css_colors_legal.php).  | 
|  `logo.logoMaxHeight`  |  Hauteur maximum du logo  |  Minimum : 0 pixels Maximum : hauteur de l’en-tête Ajustement recommandé en fonction de la taille de l’image et de la hauteur du cadre  | 
|  `logo.logoMaxWidth`  |  Largeur maximum du logo  |  Minimum : 0 pixels Maximum : largeur de l’en-tête Ajustement recommandé en fonction de la taille de l’image et de la largeur du cadre  | 
|  `composer.fontSize`  |  Taille de police du texte du compositeur  |  12 à 20 pixels recommandés pour les différents cas d’utilisation  | 
|  `fullscreenMode`  |  Active le mode Plein écran sur le widget lorsqu’une taille d’écran mobile est détectée dans un navigateur Web.  |  type : boolean  | 

Voici les éléments qui composent le widget de communication.

![\[Éléments qui composent le widget de communication\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/chatwidget-elements.png)


## Comment passer les logos et les noms d’affichage système et du bot pour le widget de communication
<a name="pass-override-system"></a>

Pour remplacer les configurations du nom System/Bot d'affichage et du logo définies sur le site Web Amazon Connect d'administration, intégrez le bloc de code suivant dans l'extrait de code de votre widget. Tous les champs présentés dans l’exemple suivant sont facultatifs.

```
amazon_connect('customDisplayNames', {
 header: {
     headerMessage: "Welcome!",
     logoUrl: "https://example.com/abc.png",
     logoAltText: "Amazon Logo Banner"
 },
 transcript: {
     systemMessageDisplayName: "Amazon System",
     botMessageDisplayName: "Alexa"
 },
 footer: {
     textInputPlaceholder: "Type Here!",     
      endChatButtonText: "End Session",      
      closeChatButtonText: "Close Chat",      
      startCallButtonText: "Start Call"
 },
})
```

### Propriétés et contraintes prises en charge
<a name="supported-properties-displaynames"></a>


| Nom de style personnalisé | Description | Contraintes recommandées | 
| --- | --- | --- | 
|  `header.headerMessage`  | Texte du message d’en-tête | Longueur minimale : 1 caractère Longueur maximale : 11 caractères  Ajustement recommandé en fonction de la hauteur du pied de page | 
|  `header.logoUrl`  | URL pointant vers l’image du logo |  Longueur maximale : 2048 caractères Il doit s’agir d’une URL valide pointant vers un fichier .png, .jpg ou .svg | 
|  `header.logoAltText`  | Texte pour remplacer l’attribut alt de la bannière du logo |  Longueur maximale : 2048 caractères | 
|  `transcript.systemMessageDisplayName`  | Texte pour remplacer le nom d’affichage SYSTEM\$1MESSAGE | Longueur minimale : 1 caractère Longueur maximale : 26 caractères  | 
|  `transcript.botMessageDisplayName`  | Texte pour remplacer le nom d’affichage du BOT | Longueur minimale : 1 caractère Longueur maximale : 26 caractères  | 
|  `footer.textInputPlaceholder`  | Texte pour remplacer l’espace réservé dans la saisie de texte | Longueur minimale : 1 caractère Longueur maximale : 256 caractères  | 
|  `footer.endChatButtonText`  | Texte pour remplacer le texte du bouton de fin de discussion | Longueur minimale : 1 caractère Longueur maximale : 256 caractères Ajustement recommandé en fonction de la taille de la fenêtre  | 
|  `footer.closeChatButtonText`  | Texte pour remplacer le texte du bouton de fermeture du chat | Longueur minimale : 1 caractère Longueur maximale : 256 caractères Ajustement recommandé en fonction de la taille de la fenêtre  | 
|  `footer.startCallButtonText`  | Texte pour remplacer le texte du bouton de démarrage de l’appel | Longueur minimale : 1 caractère Longueur maximale : 256 caractères Ajustement recommandé en fonction de la taille de la fenêtre  | 

## Prévisualisation de votre widget de communication avec des propriétés personnalisées
<a name="chat-widget-preview"></a>

Assurez-vous de prévisualiser votre widget de communication avec les propriétés personnalisées avant de le mettre en production. Les valeurs personnalisées peuvent endommager l’interface utilisateur du widget de communication si elles ne sont pas définies correctement. Nous vous recommandons de le tester sur différents navigateurs et appareils avant de le proposer à vos clients.

Vous trouverez ci-dessous quelques exemples de problèmes susceptibles de se produire lorsque des valeurs incorrectes sont utilisées, ainsi que les solutions suggérées.
+ **Problème :** la fenêtre du widget occupe une trop grande partie de l’écran.

  **Correctif :** utilisez une valeur plus petite pour `frameWidth` et `frameHeight`.
+ **Problème :** la taille de police est trop petite ou trop grande.

  **Correctif :** ajustez la taille de police.
+ **Problème :** il y a une zone vide en dessous de la fin du chat (pied de page).

  **Correctif :** utilisez une valeur plus petite pour `frameHeight` ou plus grande pour `footerHeight`.
+ **Problème :** le bouton de fin de chat est trop petit ou trop grand.

  **Correctif :** ajustez la valeur de `buttonFontSize`.
+ **Problème :** le bouton de fin de chat sort de la zone de pied de page.

  **Correctif :** utilisez une valeur plus grande pour `footerHeight` ou plus petite pour `buttonFontSize`.

# Ciblez le bouton et le cadre de votre widget Amazon Connect avec CSS/ JavaScript
<a name="target-widget-button"></a>

Le widget de communication affiche le bouton du open/close widget et le cadre du widget directement sur le site Web hôte. Il existe des sélecteurs spécifiques que vous pouvez utiliser pour cibler ces éléments à l'aide de CSS ou pour les référencer. JavaScript 

**Astuce**  
Pour mettre à jour les couleurs du bouton du widget ou les styles du widget lui-même, utilisez le [site Web d’administration Amazon Connect](add-chat-to-website.md#customize-chat-widget). Pour des styles plus personnalisables, vous pouvez [les transmettre](pass-custom-styles.md) directement au widget de communication.

## Elément de widget IDs et exemples
<a name="widget-elementid"></a>

Les images suivantes montrent comment le bouton du widget de chat apparaît sur l’écran de l’utilisateur. La première image illustre le bouton Ouvrir pour ouvrir le widget de chat. La deuxième image illustre le bouton Fermer pour fermer le widget de chat.

![\[Side-by-side images du widget de chat pour ouvrir et fermer la fenêtre de discussion.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/widget-elements.png)


1.  Bouton d’ouverture du widget : `#amazon-connect-open-widget-button` 

1. Bouton de fermeture du widget : `#amazon-connect-close-widget-button`

1. Cadre du widget : `#amazon-connect-widget-frame`

   1. Cadre du widget lorsqu’il est ouvert : `#amazon-connect-widget-frame.show`

   1. Cadre du widget lorsqu’il est fermé : `#amazon-connect-widget-frame:not(.show)`

Voici un exemple d’une feuille de style CSS modifiant ces éléments :

```
/* Target widget button while widget is minimized */
#amazon-connect-open-widget-button {
  ...
}

/* Target widget button while widget is showing */
#amazon-connect-close-widget-button {
  ...
}

/* Target widget frame */
#amazon-connect-widget-frame {
  ...
}

/* Target widget frame while it is showing */
#amazon-connect-widget-frame.show {
  ...
}

/* Target widget frame while it is minimized */
#amazon-connect-widget-frame:not(.show) {
  ...
}
```

Voici un exemple de référencement de ces éléments à l'aide JavaScript de :

```
const openWidgetButton = document.getElementById("amazon-connect-open-widget-button");
const closeWidgetButton = document.getElementById("amazon-connect-close-widget-button");

const widgetFrame = document.querySelector("#amazon-connect-widget-frame");
const openWidgetFrame = document.querySelector("#amazon-connect-widget-frame.show");
const hiddenWidgetFrame = document.querySelector("#amazon-connect-widget-frame:not(.show)");
```

# Dépannage lié à votre widget de communication Amazon Connect
<a name="ts-cw"></a>

Cette rubrique s'adresse aux développeurs qui doivent étudier les problèmes susceptibles de survenir lors de la configuration d'un widget de communication sur le site Web Amazon Connect d'administration. 

**Topics**
+ [« Un problème est survenu »](#sww)
+ [Clients ne recevant pas les messages des agents : réseau ou WebSocket déconnectés](#mam)
+ [Contournement du CORS lors de l’ouverture de liens tiers](#bcwotpl)

## « Un problème est survenu »
<a name="sww"></a>

Si le message d’erreur **Une erreur s’est produite** s’affiche lors du chargement de votre widget de communication, ouvrez les outils du navigateur pour consulter les journaux d’erreurs. 

![\[Message indiquant qu’une erreur s’est produite.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/chatwidget-error-message.png)


Vous trouverez ci-dessous les problèmes courants qui peuvent provoquer cette erreur.

### 400 Demande non valide
<a name="400-invalid-request"></a>

Si les journaux mentionnent une erreur 400 Demande non valide, plusieurs causes sont possibles :
+ Votre widget de communication n’est pas diffusé sur un domaine autorisé. Vous devez indiquer spécifiquement les domaines dans lesquels vous allez héberger votre widget.
+ La demande envoyée au point de terminaison n’est pas au format correct. Cela se produit généralement uniquement si le contenu de l’extrait incorporé a été modifié.

### 401 Accès non autorisé
<a name="401-unauthorized"></a>

![\[Message indiquant qu’une erreur s’est produite.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/something-went-wrong.png)


Si les journaux mentionnent une erreur 401 Accès non autorisé, il s’agit d’un problème lié à l’authentification du jeton Web JSON (JWT). Cela affiche la page d’erreur ci-dessus.

Une fois que vous disposez du JWT, vous devez l’implémenter dans la fonction de rappel `authenticate`. L’exemple suivant montre comment implémenter votre jeton si vous essayez de le récupérer puis de l’utiliser : 

```
amazon_connect('authenticate', function(callback) {
  window.fetch('/token').then(res => {
    res.json().then(data => {
      callback(data.data);
    });
  });
});
```

Voici une version plus basique de ce qui doit être mis en œuvre :

```
amazon_connect('authenticate', function(callback) {
   callback(token);
});
```

Pour des instructions sur l’implémentation de JWT, consultez [Étape 3 : confirmer et copier le code et les clés de sécurité du widget de communication](add-chat-to-website.md#confirm-and-copy-chat-widget-script).

Si vous avez déjà implémenté le rappel, les scénarios suivants peuvent toujours provoquer une erreur 401 :
+ Signature non valide
+ Jeton expiré

### 404 Non trouvé
<a name="404-not-found"></a>

Un code d’état 404 se produit généralement lorsque la ressource demandée n’existe pas :
+ Un widgetId non valide est spécifié dans la demande d’API
+ Le widgetId est valide mais le flux associé a été supprimé ou archivé
+ Le widget n’a pas été publié ou il a été supprimé

Vérifiez que votre extrait est exactement tel qu'il a été copié depuis le site Web Amazon Connect d'administration et qu'aucun des identifiants n'a changé.

Si les identifiants n’ont pas changé et que vous voyez une erreur 404, contactez AWS Support. 

### 500 Erreur de serveur interne
<a name="500-internalservererror-chatwidget"></a>

Cela peut être dû au fait que votre rôle lié à un service ne dispose pas des autorisations requises pour démarrer un chat. Cela se produit si votre instance Amazon Connect a été créée avant octobre 2018, car aucun rôle lié à un service n’est configuré.

**Solution** : ajoutez la politique `connect:*` au rôle associé à votre instance Amazon Connect. Pour de plus amples informations, veuillez consulter [Utilisation de rôles liés aux services et d’autorisations de rôle pour Amazon Connect](connect-slr.md).

Si votre rôle lié à un service dispose des autorisations correctes, contactez AWS Support.

## Clients ne recevant pas les messages des agents : réseau ou WebSocket déconnectés
<a name="mam"></a>

Au cours d'une session de chat, un client qui utilise une application de chat perd sa network/WebSocket connexion. Il reprend rapidement contact, mais les messages envoyés par l’agent pendant cette période ne sont pas affichés dans l’interface de chat du client. 

L'image suivante montre un exemple de l'interface de chat du client et du panneau de contrôle des contacts de l'agent side-by-side. Un message envoyé par l’agent n’est pas affiché lors de la session de chat du client. Cependant, l’agent a l’impression que le client l’a reçu.

![\[Un message dans le CCP qui n’est pas envoyé au contact.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/tw-cw-001-message-not-sent.png)


Si l'application de chat du client perd sa network/WebSocket connexion, l'interface utilisateur du chat doit procéder comme suit pour récupérer les futurs messages ainsi que les messages qui lui ont été envoyés alors qu'elle était déconnectée : 
+ Rétablissez la WebSocket connexion pour recevoir à nouveau les futurs messages entrants.
+ Envoyez une requête [chatSession.getTranscript](https://github.com/amazon-connect/amazon-connect-chatjs?tab=readme-ov-file#chatsessiongettranscript) (API [getTranscripts](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html)) pour récupérer tous les messages manquants envoyés alors que le client était déconnecté.

Si l’agent envoie un message alors que l’interface utilisateur de chat du client est déconnectée, le message est correctement stocké dans le système dorsal Amazon Connect : le CCP fonctionne comme prévu et les messages sont tous enregistrés dans la transcription, mais l’appareil du client ne peut pas recevoir de messages. Lorsque le client se reconnecte au WebSocket, il y a une lacune dans les messages. Les prochains messages entrants apparaîtront à nouveau depuis le WebSocket, mais les messages d'écart sont toujours absents à moins que le code n'appelle explicitement l'[GetTranscript](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html)API.

### Solution
<a name="solution-network-disconnected"></a>

Utilisez le [ChatSession. onConnectionEstablished](https://github.com/amazon-connect/amazon-connect-chatjs?tab=readme-ov-file#chatsessiononconnectionestablished)gestionnaire d'événements pour appeler l'[GetTranscript](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html)API. Le gestionnaire `chatSession.onConnectionEstablished` d'événements est déclenché lors de la WebSocket reconnexion. ChatJS intègre une logique de battement de cœur et de nouvelle tentative pour la connexion. WebSocket Comme ChatJS ne stocke pas la transcription, vous devez toutefois ajouter un code personnalisé à l’interface utilisateur du chat pour récupérer à nouveau la transcription manuellement.

L’exemple de code suivant montre comment implémenter `onConnectionEstablished` pour appeler `GetTranscript`.

```
import "amazon-connect-chatjs";

const chatSession = connect.ChatSession.create({
  chatDetails: {
    ContactId: "the ID of the contact",
    ParticipantId: "the ID of the chat participant",
    ParticipantToken: "the participant token",
  },
  type: "CUSTOMER",
  options: { region: "us-west-2" },
});

// Triggered when the websocket reconnects
chatSession.onConnectionEstablished(() => {
  chatSession.getTranscript({
    scanDirection: "BACKWARD",
    sortOrder: "ASCENDING",
    maxResults: 15,
    // nextToken?: nextToken - OPTIONAL, for pagination
  })
    .then((response) => {
      const { initialContactId, nextToken, transcript } = response.data;
      // ...
    })
    .catch(() => {})
});
```

```
function loadLatestTranscript(args) {
    // Documentation: https://github.com/amazon-connect/amazon-connect-chatjs?tab=readme-ov-file#chatsessiongettranscript
    return chatSession.getTranscript({
        scanDirection: "BACKWARD",
        sortOrder: "ASCENDING",
        maxResults: 15,
        // nextToken?: nextToken - OPTIONAL, for pagination
      })
      .then((response) => {
        const { initialContactId, nextToken, transcript } = response.data;
        
        const exampleMessageObj = transcript[0];
        const {
          DisplayName,
          ParticipantId,
          ParticipantRole, // CUSTOMER, AGENT, SUPERVISOR, SYSTEM
          Content,
          ContentType,
          Id,
          Type,
          AbsoluteTime, // sentTime = new Date(item.AbsoluteTime).getTime() / 1000
          MessageMetadata, // { Receipts: [{ RecipientParticipantId: "asdf" }] }
          Attachments,
          RelatedContactid,
        } = exampleMessageObj;

        return transcript // TODO - store the new transcript somewhere
      })
      .catch((err) => {
        console.log("CustomerUI", "ChatSession", "transcript fetch error: ", err);
      });
}
```

Pour un autre exemple, consultez cette [implémentation open source sur GitHub](https://github.com/amazon-connect/amazon-connect-chat-interface/blob/c88f854073fe6dd45546585c3bfa363d3659d73f/src/components/Chat/ChatSession.js#L408). 

## Contournement du CORS lors de l’ouverture de liens tiers
<a name="bcwotpl"></a>

Pour améliorer la sécurité, le widget de communication fonctionne dans un environnement de test (sandbox). Par conséquent, les liens tiers partagés dans le widget ne peuvent pas être ouverts.

**Solution**

Il existe deux options pour contourner le CORS afin de permettre l’ouverture de liens tiers.
+ **(Recommandé)**

  Mettez à jour l’attribut sandbox pour autoriser l’ouverture de liens dans un nouvel onglet, ce qui peut être fait en ajoutant l’attribut suivant à l’extrait de code :

  ```
  amazon_connect('updateSandboxAttributes', 'allow-scripts allow-same-origin allow-popups allow-downloads allow-top-navigation-by-user-activation allow-popups-to-escape-sandbox')
  ```
**Note**  
La valeur de l’attribut peut être mise à jour selon les besoins pour permettre des actions spécifiques. Voici un exemple illustrant comment autoriser l’ouverture de liens dans un nouvel onglet.
+ Supprimez l’attribut sandbox, ce qui peut être fait en ajoutant l’attribut suivant à l’extrait de code :

  ```
  amazon_connect('removeSandboxAttribute', true)
  ```

# Ajouter un formulaire de pré-contact ou de pré-chat
<a name="add-precontact-form"></a>

Vous pouvez saisir les informations du client avant de commencer un contact :
+ **Formulaire de pré-contact** : ajoutez pour recueillir des informations auprès du client avant de commencer une tâche ou de le contacter par e-mail.
+ **Formulaire de pré-chat** : ajoutez pour recueillir les informations du client avant de démarrer un contact par chat.

Après avoir recueilli les informations, vous pouvez les présenter à l’agent via le Panneau de configuration des contacts (CCP) ou les utiliser ailleurs dans le flux.

Pour créer le formulaire, vous devez créer une vue personnalisée et utiliser le composant du bouton d’action de connexion. Pour plus d’informations sur les vues, consultez [Utilisez le générateur d'interface utilisateur d'Amazon Connect pour accéder aux ressources contenues dans les step-by-step guides](no-code-ui-builder.md).

Le bouton d'action de connexion vous permet de prendre en compte les informations saisies par l'utilisateur depuis le formulaire et de sélectionner l'action à effectuer lorsque le formulaire est soumis : démarrer une task/email session ou discuter.

# Activer le sondage après le chat
<a name="enable-post-chat-survey"></a>

L'enquête post-chat vous permet de recueillir les commentaires des clients finaux immédiatement après la fin d'une conversation par chat. Avec le **`DisconnectOnCustomerExit`**paramètre de l'[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API, vous pouvez configurer la déconnexion automatique de l'agent lorsque le client final se déconnecte, en veillant à ce que le flux de déconnexion soit déclenché de manière cohérente, quel que soit le participant qui se déconnecte en premier.

## Options de mise en œuvre
<a name="post-chat-survey-implementation"></a>

Il existe deux manières d'activer le sondage après le chat :

### Pour un widget de chat personnalisé
<a name="post-chat-survey-custom-builder"></a>

Si vous utilisez une implémentation de chat personnalisée :

1. Effectuez une mise à niveau vers la dernière version de [amazon-connect-chatjs](https://github.com/amazon-connect/amazon-connect-chatjs).

1. Ajoutez le `DisconnectOnCustomerExit` paramètre à votre demande [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)d'API :

   ```
   {
       "DisconnectOnCustomerExit": ["AGENT"],
       // ... other StartChatContact parameters
   }
   ```

### Pour le widget de communication Amazon Connect
<a name="post-chat-survey-communication-widget"></a>

Si vous utilisez le widget de communication Amazon Connect :

1. Ouvrez la console Amazon Connect et accédez aux **widgets de communication**.

1. Activez le paramètre d'enquête post-chat via la page Widgets de communication.  
![\[La page des paramètres du widget de communication présentant l'option d'enquête post-chat.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/post-chat-survey-communication-widget.png)

## Mettre à jour le flux de contacts pour ajouter une enquête post-chat en tant que flux de déconnexion
<a name="post-chat-survey-disconnect-flow"></a>

Pour activer l'enquête post-chat, vous devez mettre à jour le flux de déconnexion connecté à votre solution de chat. Une fois configurée, l'enquête se déclenchera automatiquement lorsque les clients mettront fin à leurs sessions de chat.

Pour plus d'informations sur la création d'un flux de déconnexion, consultez[Exemple de scénario de conversation instantanée](web-and-mobile-chat.md#example-chat-scenario).

Il existe deux méthodes pour implémenter une enquête dans votre flux de déconnexion :
+ **Option \$11 : Utilisation du ShowView bloc** - Utilisez le [Bloc de flux dans Amazon Connect : Afficher la vue](show-view-block.md) pour afficher une interface d'enquête personnalisée.
+ **Option \$12 : Utilisation de Lex** : intégrez à Amazon Lex pour la collecte de sondages sous forme de texte. Pour de plus amples informations, veuillez consulter [Ajouter un bot Amazon Lex à Amazon Connect](amazon-lex.md).

**Note**  
Pour les scénarios impliquant un superviseur, assurez-vous d'ajouter un [Bloc de flux dans Amazon Connect : Définir une file d’attente active](set-working-queue.md) bloc avant le **transfert vers** la file d'attente. Si vous ne le faites pas, les contacts du chat seront résiliés plutôt que transférés pour cette fonctionnalité.  

![\[Un organigramme montrant le bloc Définir la file d'attente de travail avant le transfert vers la file d'attente pour les scénarios d'introduction d'un superviseur.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/post-chat-survey-set-working-queue-block.png)


**Contactez Trace Records**  
Lorsqu'un client met fin à une session de chat, Amazon Connect `CUSTOMER_DISCONNECT` passe `disconnectReason` à[ContactTraceRecord](ctr-data-model.md#ctr-ContactTraceRecord). Une fois `DisconnectOnCustomerExit` configuré, le système génère un nouvel identifiant de contact (`nextContactId`) et lance le flux de déconnexion configuré.  
Exemple :  

```
{
    "contactId": "104c05e3-abscdfre",
    "nextContactId": "4cbae06d-ca5b-1234567",
    "channel": "CHAT",
    "initiationMethod": "DISCONNECT",
    "disconnectReason": "CUSTOMER_DISCONNECT"
}
```
[Fonctionnement des attributs de contact dans Amazon Connect](what-is-a-contact-attribute.md)sera mis à jour dans la recherche de contacts et les informations de contact.  

![\[Informations de contact indiquant les attributs des contacts pour une enquête post-chat.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/post-chat-survey-contact-attributes.png)


## Ressources supplémentaires
<a name="post-chat-survey-additional-resources"></a>
+ [StartChatContact API](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)
+ [Exemple de flux entrant dans Amazon Connect pour l’expérience du premier contact](sample-inbound-flow.md)
+ [Exemple de scénario de conversation instantanée](web-and-mobile-chat.md#example-chat-scenario)
+ [Bloc de flux dans Amazon Connect : Définir une file d’attente active](set-working-queue.md)
+ [Bloc de flux dans Amazon Connect : Transférer vers la file d’attente](transfer-to-queue.md)
+ [Amazon Connect ShowView](https://docs.aws.amazon.com/connect/latest/adminguide/show-view-block.html)
+ [Amazon Connect avec Lex](https://docs.aws.amazon.com/connect/latest/adminguide/amazon-lex.html)
+ [Fonctionnement des attributs de contact dans Amazon Connect](what-is-a-contact-attribute.md)

# Intégrer le Amazon Connect chat dans une application mobile
<a name="integrate-chat-with-mobile"></a>

Cette rubrique explique comment intégrer le chat Amazon Connect dans votre application mobile. Vous pouvez utiliser l'une des options suivantes : 
+ [WebView intégration](#webview)
+ The [Amazon Connect Chat SDKs pour iOS et Android](#integrate-chat-with-mobile-sdks-for-mobile)
+ [Intégration React Native](#react-native-integration)

Utilisez l' Amazon Connect [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API pour établir le contact. 

**Topics**
+ [Quelle option d’intégration utiliser](#integrate-options)
+ [Amazon Connect flux de travail d'intégration du chat](#integrate-chat-with-mobile-workflow)
+ [Commencez avec l'intégration du Amazon Connect chat](#integrate-chat-with-mobile-getting-started)

## Quelle option d’intégration utiliser
<a name="integrate-options"></a>

Cette section fournit une description de chaque option d’intégration afin de vous aider à choisir celle à utiliser pour votre solution. 

### WebView intégration
<a name="webview"></a>

L' WebView intégration d'Amazon Connect Chat vous permet d'intégrer l'expérience de chat complète à vos applications mobiles avec un minimum d'efforts de développement. Cette méthode utilise `WebView` sur Android et `WKWebView` sur iOS pour fournir une interface de chat fluide et complète. Il est idéal pour les équipes à la recherche d'une out-of-the-box solution rapide pour intégrer les fonctionnalités de chat sans avoir à effectuer de nombreuses personnalisations.

Cette approche garantit une communication sécurisée et tire parti de l’interface de chat Amazon Connect basée sur le Web. Cependant, vous devrez configurer votre application pour qu'elle gère JavaScript correctement les cookies.

Pour plus d'informations sur la mise en œuvre de WebView l'intégration, consultez le GitHub référentiel d'[exemples d'interface utilisateur](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples) de chat Amazon Connect.

**Recommandation** : l'intégration WebView basée est idéale pour un développement rapide et une maintenance minimale tout en garantissant une fonctionnalité de chat complète.

### Amazon Connect Chat SDKs pour mobile
<a name="integrate-chat-with-mobile-sdks-for-mobile"></a>

Le Amazon Connect Chat SDKs pour iOS et Android simplifie l'intégration du Amazon Connect chat pour les applications mobiles natives. L' SDKs aide gère la logique de discussion côté client et les communications dorsales de la même manière que la bibliothèque Amazon Connect ChatJS.

Le Amazon Connect chat SDKs englobe le service participant Amazon Connect APIs et fait abstraction de la gestion de la session de chat et WebSocket. Cela vous permet de vous concentrer sur l'interface utilisateur et l'expérience tout en vous appuyant sur le SDK Amazon Connect Chat pour interagir avec tous les services principaux. Cette approche nécessite toujours que vous utilisiez votre propre backend de chat pour appeler l' Amazon Connect `StartChatContact`API afin d'établir le contact.
+ Pour plus d'informations sur le SDK iOS basé sur SWIFT, consultez la page du [SDK Amazon Connect Chat pour iOS](https://github.com/amazon-connect/amazon-connect-chat-ios). GitHub 
+ Pour plus d'informations sur le SDK Android basé sur Kotlin, consultez la page [Amazon Connect Chat SDK for Android](https://github.com/amazon-connect/amazon-connect-chat-android). GitHub 

**Avantages** : les versions natives SDKs offrent des fonctionnalités robustes et des performances élevées, ce qui les rend idéales pour les applications nécessitant une personnalisation approfondie et une expérience utilisateur fluide.

### Intégration React Native
<a name="react-native-integration"></a>

L’intégration de React Native au chat Amazon Connect offre une solution multiplateforme. Elle permet aux équipes de créer des fonctionnalités de chat pour Android et iOS avec une base de code partagée. Cette méthode offre un juste équilibre entre personnalisation et efficacité du développement tout en tirant parti des fonctionnalités de React Native pour créer des applications mobiles robustes.

Cette intégration utilise des ponts natifs pour accéder aux fonctionnalités avancées et garantit des performances constantes ainsi qu’une expérience utilisateur uniforme sur toutes les plateformes. Il est plus facile de mettre en œuvre des fonctionnalités clés telles que WebSocket la communication en utilisant des bibliothèques telles que `react-native-websocket` des appels d'API avec`axios`.

**Idéal pour** : les équipes qui souhaitent optimiser la réutilisation du code tout en préservant la flexibilité fonctionnelle.

## Amazon Connect flux de travail d'intégration du chat
<a name="integrate-chat-with-mobile-workflow"></a>

Le schéma suivant montre le flux de programmation entre un client utilisant une application mobile et un agent. Le texte numéroté dans ce schéma correspond au texte numéroté situé sous l’image.

![\[Schéma illustrant le flux du programme de Amazon Connect chat.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/integrate-chat-mobile-diagram.png)


**Dans le schéma**

1. Lorsqu'un client lance une discussion dans l'application mobile, celle-ci doit envoyer une demande à Amazon Connect l'aide de l'[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API. Cela nécessite des paramètres spécifiques, tels que le point de terminaison de l'API et IDs le flux d'[instance](amazon-connect-instances.md) et de [contact](connect-contact-flows.md), pour authentifier et lancer le chat.

1. L’API `StartChatContact` interagit avec votre système dorsal pour obtenir un jeton de participant et un ID de contact qui serviront d’identifiants uniques pour la session de chat.

1. L’interface utilisateur de l’application transmet la réponse `StartChatContact` au kit SDK mobile afin que celui-ci puisse communiquer avec [Amazon Connect Participant Service](https://docs.aws.amazon.com/connect/latest/APIReference/API_Operations_Amazon_Connect_Participant_Service.html) et configurer la session de chat du client correctement.

1. Le kit SDK expose un objet [chatSession](https://github.com/amazon-connect/amazon-connect-chat-ios?tab=readme-ov-file#chatsession-apis) à l’interface utilisateur, qui contient des méthodes faciles à utiliser pour interagir avec la session de chat.

1. En arrière-plan, le kit SDK interagit avec [Amazon Connect Participant Service](https://docs.aws.amazon.com/connect/latest/APIReference/API_Operations_Amazon_Connect_Participant_Service.html) à l’aide du [kit AWS SDK](https://aws.amazon.com/developer/tools/). La communication avec Amazon Connect Participant Service est responsable de toutes les interactions du client avec la session de chat. Cela inclut des actions telles que `CreateParticipantConnection`, `SendMessage`, `GetTranscript` ou `DisconnectParticipant`.

1. Le SDK gère également la WebSocket connexion nécessaire pour recevoir les messages, les événements et les pièces jointes de l'agent. Tout cela est traité et analysé par le kit SDK et présenté dans l’interface utilisateur dans une structure facile à utiliser.

## Commencez avec l'intégration du Amazon Connect chat
<a name="integrate-chat-with-mobile-getting-started"></a>

Les étapes et ressources suivantes vous aideront à commencer à intégrer Amazon Connect Chat dans vos applications mobiles natives :

1. Vous pouvez rapidement configurer une [CloudFormation](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/Welcome.html)pile pour fournir le backend nécessaire à appeler StartChatContact en consultant notre exemple d'[startChatContactAPI](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/cloudformationTemplates/startChatContactAPI) sur GitHub.

1. Pour des exemples illustrant comment créer votre interface utilisateur de chat mobile basée sur Amazon Connect Chat SDKs, consultez notre GitHub projet d'[exemples d'interface utilisateur](https://github.com/amazon-connect/amazon-connect-chat-ui-examples).

   Consultez nos exemples de chat [iOS](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples/iOSChatExample) et [Android](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples/androidChatExample) qui montrent comment faire fonctionner une application de chat à l'aide du SDK Amazon Connect Chat pour iOS/Android.

1. Consultez les pages du [SDK Amazon Connect Chat pour](https://github.com/amazon-connect/amazon-connect-chat-ios) iOS [Amazon Connect et du SDK de chat](https://github.com/amazon-connect/amazon-connect-chat-android) pour Android. GitHub La GitHub page contient la documentation de l'API et un guide de mise en œuvre qui explique les conditions préalables et les étapes d'installation.

1. Configurez l’intégration de React Native : utilisez l’exemple de [React Native](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples/connectReactNativeChat) pour obtenir des conseils sur la mise en œuvre d’une solution basée sur React Native.

1. Si vous avez des questions ou des problèmes concernant la configuration ou l’utilisation du kit SDK de chat Amazon Connect dans vos applications mobiles, vous pouvez signaler un problème sur la page [Problèmes du kit SDK de chat Amazon Connect pour iOS](https://github.com/amazon-connect/amazon-connect-chat-ios/issues) ou [Problèmes du kit SDK de chat Amazon Connect pour Android](https://github.com/amazon-connect/amazon-connect-chat-android/issues). En cas de problème avec les exemples d’interface utilisateur de chat mobile, vous pouvez le signaler sur la page [Exemples de problèmes liés à l’interface utilisateur de chat Amazon Connect](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/issues).

# Activation de la mise en forme de texte dans Amazon Connect pour l’expérience de chat de vos clients
<a name="enable-text-formatting-chat"></a>

Grâce à la mise en forme des messages Amazon Connect, vous pouvez permettre à vos clients et vos agents d'ajouter rapidement de la structure et de la clarté à leurs messages de chat. 

**Topics**
+ [Types de formats pris en charge](#supported-format-types)
+ [Activation de la mise en forme des messages](#how-to-enable-message-formatting)
+ [Comment ajouter des liens permettant d’envoyer un e-mail et d’appeler un numéro de téléphone](#add-email-phone-links)
+ [Comment ajouter des messages de chatbot](#add-bot-messages)

## Types de formats pris en charge
<a name="supported-format-types"></a>

Vous pouvez indiquer les types de mise en forme suivants à la fois sur l'interface utilisateur de chat et sur l'application d'agent en utilisant la syntaxe Markdown :
+ Gras
+ Italique
+ Liste à puces
+ Liste numérotée
+ Hyperliens
+ Emoji
+ Pièces jointes. Pour activer les pièces jointes, consultez [Activation des pièces jointes dans le CCP afin que les clients et les agents puissent partager et charger des fichiers](enable-attachments.md).

## Comment activer la mise en forme des messages
<a name="how-to-enable-message-formatting"></a>

1. Lorsque vous créez une nouvelle [interface utilisateur de chat](add-chat-to-website.md), la mise en forme de texte enrichi est activée immédiatement. Aucune configuration supplémentaire n’est requise.

1. Pour ajouter des fonctionnalités de mise en forme de texte à une [interface utilisateur de chat](add-chat-to-website.md) existante, mettez à jour le [code du widget de communication](add-chat-to-website.md) avec le code suivant, mis en évidence en gras : 

   ```
       (function(w, d, x, id){
           s=d.createElement('script');
           s.src='https://your-instance-alias.my.connect.aws/connectwidget/static/amazon-connect-chat-interface-client.js';
           s.async=1;
           s.id=id;
           d.getElementsByTagName('head')[0].appendChild(s);
           w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
       })(window, document, 'amazon_connect', 'widget-id');
       amazon_connect('styles', { openChat: { color: 'white', backgroundColor: '#123456'}, closeChat: { color: 'white', backgroundColor: '#123456'} });
       amazon_connect('snippetId', 'snippet-id');
       amazon_connect('supportedMessagingContentTypes', [ 'text/plain', 'text/markdown' ]);
   ```

   Les valeurs correctes sont affectées au code mis en évidence en rouge lorsque vous obtenez l'extrait de code depuis la console Amazon Connect. Le seul contenu que vous choisissez d'ajouter ou de supprimer est la dernière ligne en gras pour `supportedMessagingContentTypes`. 

1. Pour ajouter des fonctionnalités de mise en forme de texte à votre propre interface utilisateur de chat personnalisée (par exemple, [Interface de chat](https://github.com/amazon-connect/amazon-connect-chat-interface) ou votre propre solution d'interface utilisateur en plus de [ChatJS](https://github.com/amazon-connect/amazon-connect-chatjs)), procédez comme suit : 

   1. Appelez l'API [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html). Lors de l'appel de `StartChatContact`, ajoutez le paramètre `SupportedMessagingContentTypes` comme indiqué en gras dans l'exemple suivant :

      ```
      // Amazon Connect StartChatContact API
      {
          "Attributes": { 
              "string" : "string" 
          },
          "ClientToken": "string",
          "ContactFlowId": "your flow ID",
          "InitialMessage": { 
              "Content": "string",
              "ContentType": "string"
          },
          "InstanceId": "your instance ID",
          "ParticipantDetails": { 
              "DisplayName": "string"
          }
          
          // optional
         "SupportedMessagingContentTypes": [ "text/plain", "text/markdown" ]
      }
      ```

   1. Importez `chatjs` en tant qu'objet, comme illustré dans l'exemple suivant :

      ```
      import "amazon-connect-chatjs";
      
      this.session = connect.ChatSession.create({
            ...
          });
      
      this.session.sendMessage({
            message: "message-in-markdown-format",
            contentType: "text/markdown"
      });
      ```

      Si vous ne l'utilisez pas ChatJs, consultez ces rubriques pour plus d'informations sur l'envoi de texte Markdown via Amazon Connect APIs : [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)et [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html).

   1. Envoyez des messages avec la syntaxe Markdown. Consultez l'extrait de code précédent pour importer `chatjs` en tant qu'objet afin d'obtenir un exemple d'envoi de messages. Vous pouvez utiliser la syntaxe Markdown simple pour mettre en forme le texte dans les chats. Si vous [utilisez déjà chatjs aujourd'hui pour envoyer des messages en texte brut](https://github.com/amazon-connect/amazon-connect-chatjs/blob/master/src/core/chatController.js#L66), vous pouvez modifier votre logique existante pour appeler [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html)avec `text/markdown` as `contentType` plutôt que `text/plain` lorsque vous souhaitez envoyer des messages Markdown. Veillez à mettre à jour le paramètre `sendMessage` pour qu'il corresponde au format Markdown de vos messages. Pour plus d'informations, consultez [Syntaxe de base du guide Markdown](https://www.markdownguide.org/basic-syntax/).

   1. Mettez en œuvre votre propre logique dans le package d'interface utilisateur pour afficher les messages Markdown dans la zone de saisie et dans la transcription de chat. Si vous utilisez React, vous pouvez vous servir de [react-markdown](https://github.com/remarkjs/react-markdown) comme référence.

**Note**  
Les fonctionnalités de mise en forme de texte sont visibles pour votre agent uniquement si elles ont été activées pour votre client dans l'interface utilisateur de chat. Si la mise en forme de texte n'est pas prise en charge ou activée sur l'interface utilisateur de chat du client, l'agent ne sera pas en mesure de composer et d'envoyer des messages avec une mise en forme de texte.
Toutes les fonctionnalités de mise en forme de texte, à l’exception des pièces jointes, sont disponibles pour les [réponses rapides](create-quick-responses.md).

## Comment ajouter des liens permettant d’envoyer un e-mail et d’appeler un numéro de téléphone
<a name="add-email-phone-links"></a>

L’exemple suivant montre comment ajouter des liens cliquables et des liens permettant d’appeler un numéro à vos applications Web et mobiles.

```
Call us today: [+1 (123) 456-7890](tel:+11234567890)
[Call Us](tel:+11234567890)
[Skype Us](callto:+91123-456-7890)
[Fax Us](fax:+91123-456-7890)
[Text Us](SMS:+91123-456-7890)
[Email Us](mailto:name@email.com)
```

## Comment ajouter des messages de chatbot
<a name="add-bot-messages"></a>

Lorsque vous activez le markdown pour les messages de chat, vous pouvez utiliser le format de texte enrichi pour les types de messages de chatbot suivants :
+ Flux [Lire l’invite](play.md)
+ Flux [Obtenir les données client](get-customer-input.md)
+ `SYSTEM_MESSAGE`
+ `Lex BOT`
+ `Third Party BOT`
+ `Lex BOT Lambda`

L’image suivante montre comment activer une invite manuellement dans un bloc de flux [Lire l’invite](play.md) :

![\[Image d’un bloc de flux et d’une invite contenant deux liens, l’un pour une FAQ et l’autre pour un numéro de téléphone.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/chat-rtf-play-prompt-flow-1.png)


L’image suivante montre comment activer une invite manuellement dans le bloc de flux [Get customer input](get-customer-input.md), puis comment associer ce bloc de flux à un bot Amazon Lex :

![\[Image d’un bloc de flux et d’une invite contenant deux liens, l’un pour une FAQ et l’autre pour un numéro de téléphone.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/chat-rtf-get-customer-flow.png)


L’image suivante montre comment l’invite apparaît dans SYSTEM\$1MESSAGE et dans les différents types de messages BOT :

![\[Image montrant les liens « Review our FAQ » et « give us a call » dans les messages SYSTEM et BOT.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/chat-rtf-sys-bot-messages.png)


L’image suivante montre comment configurer une invite dans une intention de bot Amazon Lex :

![\[Image d’une intention Amazon Lex contenant une invite avec deux liens, l’un pour une FAQ et l’autre pour un numéro de téléphone.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/chat-rtf-lex-flow.png)


Pour plus d’informations sur les intentions, consultez [Ajout d’intentions](https://docs.aws.amazon.com/lexv2/latest/dg/add-intents.html) dans le *Guide du développeur Amazon Lex V2*. Pour plus d'informations sur les messages Lambda, consultez la section [Activation de la logique personnalisée avec les fonctions AWS Lambda](https://docs.aws.amazon.com/lexv2/latest/dg/lambda.html), également dans le guide du développeur *Amazon Lex V2*.

# Activation des notifications pour les clients du chat dans Amazon Connect
<a name="message-receipts"></a>

Vous pouvez activer les accusés de réception des messages *Remis* et *Lu* dans votre [interface utilisateur de chat](add-chat-to-website.md) afin que vos clients connaissent le statut des messages qu'ils envoient. Cela apporte de la transparence aux clients et améliore l'expérience globale de chat. 

Que les accusés de réception des messages soient activés ou non, les données et les événements relatifs à la réception des messages sont toujours envoyés et peuvent être consultés dans le journal réseau. L’activation et la désactivation des accusés de réception des messages dans l’interface utilisateur du chat ont uniquement une incidence sur l’affichage des accusés de réception dans la transcription du widget de communication.

**Astuce**  
Par défaut, les accusés de réception des messages sont déjà activés dans l'expérience [Tester la messagerie instantanée](chat-testing.md#test-chat), dans le panneau de configuration des contacts (CCP) et dans un [exemple open source téléchargeable](download-chat-example.md) du widget de chat.

**Pour activer les accusés de réception des messages dans votre interface utilisateur de chat**

1. Connectez-vous au site web d’administration Amazon Connect à l’adresse https://*nom d’instance*.my.connect.aws/. Choisissez **Personnalisation du widget de communication**.  
![\[Page Guide de configuration, option Personnalisation du widget de communication.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/chatwidget-customize-chat-window-button.png)

1. Choisissez **Modifier**.  
![\[Page de personnalisation du widget de communication enregistrée, bouton Modifier.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/chatwidget-edit-messagereceipt.png)

1. Par défaut, l'option **Accusés de réception des messages** n'est pas activée. Définissez-la sur **Activé**.  
![\[Option Accusés de réception des messages activée.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/chatwidget-enable-messagereceipt.png)

Les accusés de réception des messages sont désormais activés. Les clients qui utilisent le widget de communication commenceront immédiatement à voir les accusés de réception *Remis* et *Lu*. 

# Configuration des délais de chat pour les participants au chat
<a name="setup-chat-timeouts"></a>

Lorsqu'une conversation par chat entre un agent et un client est inactive (aucun message envoyé) pendant un certain temps, vous pouvez considérer qu'un participant au chat est inactif et vous pouvez même vouloir déconnecter automatiquement un agent du chat.

Pour ce faire, vous pouvez configurer à la fois les délais d'inactivité et les délais de fermeture automatique à l'aide de cette action. [UpdateParticipantRoleConfig](https://docs.aws.amazon.com/connect/latest/APIReference/API_UpdateParticipantRoleConfig.html)

**Astuce**  
Cette rubrique traite de la configuration des délais d’expiration des sessions de chat pour les conversations entre le client et l’agent. Si vous recherchez des informations sur la configuration des délais d’expiration des sessions de chat lorsque les clients interagissent avec Lex, consultez la section [Délais configurables pour la saisie dans le chat lors d'une interaction avec Lex](get-customer-input.md#get-customer-input-configurable-timeouts-chat) du bloc [Bloc de flux dans Amazon Connect : Obtenir les données client](get-customer-input.md). 

**Vous pouvez définir quatre types de minuteurs différents.**
+ Spécifiez la durée qui doit s'écouler avant l'exécution d'une action.
+ N'importe quelle combinaison de minuteurs peut être utilisée.     
[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/setup-chat-timeouts.html)

**Spécifiez tous les minuteurs en minutes.**
+ Minimum : 2 minutes
+ Maximum : 480 minutes (8 heures)

**Les minuteurs s'appliquent aux rôles des participants et à la durée du chat.**
+ Configurez des minuteurs pour les rôles de participant tels que l'agent et le client, plutôt que pour des participants individuels.
+  Une fois que vous avez défini les minuteurs, ils s'appliquent à la durée du chat. Si un chat est transféré, les minuteries s'appliquent à la nouvelle agent/customer interaction.

## Fonctionnement des minuteurs de chat
<a name="how-chat-timer-work"></a>

Les minuteurs se comportent comme suit :
+ Les minuteurs s’exécutent lorsqu’un agent et un client sont connectés au chat ou lorsqu’un client et un participant personnalisé (un bot personnalisé, par exemple) sont mis en relation. 
+ Les minuteries démarrent d'abord lorsqu'un agent/custom participant rejoint le chat et s'arrêtent lorsque le agent/custom participant quitte le chat.
+ Les minuteurs d'inactivité s'exécutent avant les minuteurs de déconnexion automatique, si les deux sont configurés pour un rôle. Par exemple, si les deux minuteurs sont configurés, le minuteur de déconnexion automatique ne démarre qu'une fois qu'un participant est considéré comme inactif.
+ Si un seul type de minuteur est configuré pour un rôle, ce minuteur démarre immédiatement.
+ Si un participant envoie un message à un moment donné, les minuteurs pour ce participant sont réinitialisés. S’il était considéré comme inactif, il ne l’est plus.
+ Lorsqu’une pièce jointe est ajoutée à un message, le minuteur du chat est réinitialisé.
+  La configuration définie lors de l'inscription du agent/custom participant s'applique tant que le agent/custom participant reste sur le chat. Si vous mettez à jour la configuration du chronomètre alors qu'un agent/custom participant et un client sont déjà connectés l'un à l'autre, la nouvelle configuration est enregistrée mais n'est appliquée qu'à moins qu'un nouveau agent/custom participant ne se connecte au chat.
+ Lorsqu’un événement de déconnexion automatique se produit, tous les participants autres que le client (tels que l’agent, tout superviseur éventuel ou tout participant personnalisé) sont déconnectés. Si l’agent est celui qui a été déconnecté et si un bloc [Set disconnect flow (Définir le flux de déconnexion)](set-disconnect-flow.md) a été configuré, le chat est acheminé vers ce bloc.

### Expiration des minuteurs inactifs
<a name="idle-timer-expiry"></a>

Voici ce qui se passe lorsqu’un délai d’inactivité expire lors d’une interaction personnalisée entre un client et un participant personnalisé : 

1. Un événement inactif est diffusé sur tous websockets/streaming les points de terminaison.

1. Si un minuteur de déconnexion automatique est configuré, il est lancé. 

1. Si le délai d’inactivité expire alors que le contact par chat se trouve dans un bloc **Patienter**, le contact n’est pas acheminé vers la branche **Temps dépassé**. Aucune action n’est effectuée si ce scénario se produit. 

### Déconnexion automatique des participants personnalisés
<a name="auto-disconnecting"></a>

Lorsqu’un délai de déconnexion automatique expire, le participant personnalisé est déconnecté du chat. 

Amazon Connect exécute l’une des étapes suivantes lorsque les délais de déconnexion automatique expirent :

1. Le chat se trouve actuellement dans un bloc [Attente](wait.md) configuré pour un participant personnalisé. 
   + Le participant personnalisé est déconnecté du chat, qui reprend le flux en utilisant la branche **Robot participant déconnecté**.

1. Le chat se trouve actuellement dans un bloc [Attente](wait.md) configuré pour le client OU le chat n’est pas dans un bloc **Patienter**.
   + Le participant personnalisé est déconnecté du chat et aucune autre action n’est entreprise. 

## Messages affichés à destination des participants
<a name="chat-timeouts-events"></a>

Des messages sont affichés à destination de tous les participants lorsque l'un des événements suivants se produit :
+ Un participant devient inactif.
+ Un participant inactif envoie un message et n'est plus inactif.
+ Une déconnexion automatique se produit. Comme l'agent est déconnecté, il ne pourra pas voir le message.

Ces événements ne sont pas conservés dans les transcriptions, ni facturés.

Les messages par défaut (dans toutes les langues prises en charge) sont affichés pour les agents dans le Panneau de configuration des contacts (CCP) pour chacun de ces événements. 

L'image suivante montre des exemples de messages d'inactivité par défaut que l'agent peut voir dans le CCP. Par exemple, *L'agent est devenu inactif*.

![\[Le CCP, les messages d'inactivité par défaut.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/chat-timeout-message.png)


## Utilisation recommandée
<a name="chat-timeouts-usage"></a>

Pour utiliser la fonctionnalité de délai de chat, nous vous recommandons de procéder comme suit :

1. Intégrez un appel à l'[UpdateParticipantRoleConfig](https://docs.aws.amazon.com/connect/latest/APIReference/API_UpdateParticipantRoleConfig.html)action dans un Lambda dans un flux de contacts.

1. Selon votre cas d'utilisation, placez la fonction Lambda soit immédiatement après le démarrage du chat (au début du flux), soit juste avant l'acheminement du contact vers une file d'attente.

## Personnalisation de l'interface utilisateur de chat du client pour un événement de déconnexion
<a name="chat-timeouts-ui"></a>

Pour personnaliser l'interface utilisateur de chat de votre client pour un événement de déconnexion, consultez les méthodes suivantes dans [ChatJS](https://github.com/amazon-connect/amazon-connect-chatjs) :
+ `onParticipantIdle(callback)`
+ `onParticipantReturned(callback)`
+ `onAutoDisconnection(callback)`

Utilisez ces méthodes pour enregistrer les gestionnaires de rappel qui sont déclenchés à l'arrivée de nouveaux événements.

# Activation des notifications push pour le chat mobile
<a name="enable-push-notifications-for-mobile-chat"></a>

Les notifications push pour le chat mobile sont configurées via la [ messagerie pour utilisateurs finaux AWS](https://docs.aws.amazon.com/sms-voice/latest/userguide/what-is-service.html). Vous pouvez activer les notifications push pour le chat mobile sur les appareils iOS ou Android afin d’avertir les clients en cas de nouveaux messages même s’ils n’utilisent pas activement votre application mobile. Vous pouvez activer cette fonctionnalité dans votre application existante intégrée au [Amazon Connect mobile SDKs](https://docs.aws.amazon.com/connect/latest/adminguide/integrate-chat-with-mobile.html), dans une [solution de visualisation Web](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples) ou dans une solution native personnalisée. 

 Les étapes et ressources suivantes vous aideront à commencer à intégrer les notifications Amazon Connect push dans vos applications mobiles natives : 

## Étape 1 : obtenir les informations d'identification de la console FCM d'Apple APNs et de Google
<a name="step-1-enable-push-notifications-for-mobile-chat"></a>

Pour le configurer de Amazon Connect manière à ce qu'il puisse envoyer des notifications push à vos applications, vous devez d'abord obtenir les informations d'identification de la console FCM d'Apple APNs et de Google qui permettront à [l'utilisateur AWS final d'](https://docs.aws.amazon.com/sms-voice/latest/userguide/what-is-service.html)envoyer des notifications à vos applications mobiles. Les informations d’identification que vous fournissez dépendent du système de notification push que vous utilisez : 
+  Pour les informations d'identification du service de notification push Apple (APNs), consultez les [sections Obtenir une clé de chiffrement et un identifiant de clé auprès d'Apple](https://developer.apple.com/documentation/usernotifications/establishing-a-token-based-connection-to-apns#Obtain-an-encryption-key-and-key-ID-from-Apple) et [Obtenir un certificat de fournisseur auprès d'Apple](https://developer.apple.com/documentation/usernotifications/establishing-a-certificate-based-connection-to-apns#Obtain-a-provider-certificate-from-Apple) dans la documentation destinée aux développeurs Apple. 
+  Pour les informations d’identification Firebase Cloud Messaging (FCM) de Google, elles peuvent être obtenues via la console Firebase (voir [Firebase Cloud Messaging](https://firebase.google.com/docs/cloud-messaging)). 

## Étape 2 : créer une application de service de messagerie pour utilisateurs AWS finaux à l'aide de la AWS console et activer le canal de notification push pour FCM ou APNs
<a name="step-2-enable-push-notifications-for-mobile-chat"></a>

 Avant de pouvoir activer Amazon Connect pour envoyer des notifications push, vous devez [créer une application de messagerie pour utilisateurs finaux AWS et activer le canal de notifications push](https://docs.aws.amazon.com/push-notifications/latest/userguide/procedure-enable-push.html) dans la [console AWS](https://console.aws.amazon.com/push-notifications/).

 Suivez ces instructions pour créer une application et activer l’un des canaux push. Pour terminer cette procédure, il vous suffit de saisir le nom d’une application. Vous pourrez activer ou désactiver n’importe quel canal push ultérieurement : 

1.  Ouvrez la console AWS Final User Messaging Push à l'adresse [https://console.aws.amazon.com/push-notifications/](https://console.aws.amazon.com/push-notifications/) 

1.  Choisissez **Créer une application**. 

1.  Dans **Nom de l’application**, entrez le nom de votre application. 

1.  (Facultatif) Suivez cette étape facultative pour activer le **service de notification push Apple (APNs)**. 

   1.  Pour le **service de notification push Apple (APNs)**, sélectionnez **Activer**. 

   1.  Pour **Type d’authentification par défaut**, choisissez l’une des options suivantes : 

      1.  Si vous choisissez **Key credentials**, fournissez les informations suivantes depuis votre compte développeur Apple. AWS Final User Messaging Push a besoin de ces informations pour créer des jetons d'authentification. 

         1.  **ID de clé** : ID attribué à votre clé de signature. 

         1.  **Identifiant de solution groupée** : ID attribué à votre application iOS. 

         1.  **Identifiant d’équipe** : ID attribué à l’équipe chargée de votre compte Apple Developer. 

         1.  **Clé d'authentification** : fichier .p8 que vous téléchargez depuis votre compte de développeur Apple lorsque vous créez une clé d'authentification. 

      1.  Si vous choisissez **Certificate credentials (Informations d’identification de certificat)**, fournissez les informations suivantes : 

         1.  **SSL certificate (Certificat SSL)** : fichier .p12 de votre certificat TLS. 

         1.  **Mot de passe de certificat** : si vous avez attribué un mot de passe à votre certificat, entrez-le ici. 

         1.  **Type de certificat** : sélectionnez le type de certificat à utiliser. 

1.  (Facultatif) Suivez cette étape facultative pour activer **Firebase Cloud Messaging (FCM)**. 

   1.  Pour **Firebase Cloud Messaging (FCM)**, sélectionnez **Activer**. 

   1.  Choisissez **informations d’identification du jeton** pour le **type d’authentification par défaut**, puis choisissez le fichier JSON de service. 

1.  Choisissez **Créer une application**. 

## Étape 3 : associer l'application de messagerie utilisateur AWS final à une Amazon Connect instance
<a name="step-3-enable-push-notifications-for-mobile-chat"></a>

 Pour activer les notifications push sur une [Amazon Connect instance](https://docs.aws.amazon.com/connect/latest/adminguide/find-instance-arn.html), vous devez associer une application de messagerie utilisateur AWS final à une [Amazon Connect instance](https://docs.aws.amazon.com/connect/latest/adminguide/find-instance-arn.html) en appelant l'[CreateIntegrationAssociation](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateIntegrationAssociation.html)API avec le `PINPOINT_APP` [IntegrationType](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateIntegrationAssociation.html#API_CreateIntegrationAssociation_RequestSyntax). Vous pouvez appeler cette API [AWS CLI](https://docs.aws.amazon.com/cli/latest/reference/connect/create-integration-association.html) ou le [kit SDK Amazon Connect](https://aws.amazon.com/developer/tools/) pour toutes les langues prises en charge. Il s'agit d'une étape d'intégration unique requise pour chaque intégration entre une application de messagerie utilisateur AWS final et une Amazon Connect instance. 

## Étape 4 : Obtenez un jeton d'appareil avec FCM ou APNs SDK, et enregistrez-le avec Amazon Connect
<a name="step-4-enable-push-notifications-for-mobile-chat"></a>

Vous devrez récupérer le jeton de l'appareil et l'utiliser pour enregistrer un appareil mobile de l'utilisateur final auprès d'un contact de Amazon Connect chat afin d'envoyer des notifications push pour les nouveaux messages dans le chat. Lisez la documentation destinée aux FCM/APNs développeurs ci-dessous pour savoir comment le jeton de l'appareil est généré et obtenu à partir de l'application mobile.
+  Pour le service de notification push (APN) Apple, consultez la section [Enregistrement de votre application auprès](https://developer.apple.com/documentation/usernotifications/registering-your-app-with-apns) de APNs la documentation Apple destinée aux développeurs.
+  Pour Firebase Cloud Messaging (FCM), consultez [Bonnes pratiques pour la gestion des jetons d’inscription FCM](https://firebase.google.com/docs/cloud-messaging/manage-tokens).

 Pour enregistrer l’appareil avec un contact par chat, nous vous recommandons de procéder comme suit : 

1.  Lorsque l'application mobile appelle l'[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API, transmettez les [attributs `deviceToken` et `deviceType` en tant que contact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-StartChatContact-request-Attributes). Pour les utilisateurs de WebView et de widgets de communication hébergés, consultez [Comment transmettre des attributs de contact dans le widget de communication](https://docs.aws.amazon.com/connect/latest/adminguide/pass-contact-attributes-chat.html#how-to-contact-attributes-chatwidget) pour plus de détails.

1.  Intégrez un appel à l'[CreatePushNotificationRegistration](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateIntegrationAssociation.html)action dans une fonction Lambda dans un flux de contacts. Le bloc de flux doit lire `deviceToken` et `deviceType` à partir des attributs de contact définis par l’utilisateur, ainsi que l’`initialContactId` à partir des attributs système, puis transmettre ces valeurs à la fonction Lambda.

   1.  Selon votre cas d’utilisation, placez la fonction Lambda juste après le démarrage du chat (au début du flux) si vous souhaitez que l’utilisateur final reçoive des notifications push immédiatement ou juste avant le routage du contact vers une file d’attente pour qu’il ne reçoive ces notifications que lorsque l’agent est sur le point de le rejoindre. Une fois l’appel d’API effectué, l’appareil commence à recevoir des notifications push lorsqu’un nouveau message provient de l’agent ou du système. Par défaut, des notifications push sont envoyées pour tous les messages du système et de l’agent.  
![\[Invoquez le bloc de flux Fonction Lambda dans le concepteur de flux du site Web d’administration Amazon Connect .\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/step-4-set-up-push-notifications-for-mobile-chat-1.png)

1.  (facultatif) Intégrez un appel à l'[DeletePushNotificationRegistration](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateIntegrationAssociation.html)action dans une fonction Lambda dans un flux. Une fois l’appel d’API effectué, l’appareil cesse de recevoir des notifications push lorsqu’un nouveau message provient de l’agent ou du système.

## Étape 5 : recevoir une notification push sur vos applications mobiles
<a name="step-5-enable-push-notifications-for-mobile-chat"></a>

 Consultez notre projet d'[exemples d'interface utilisateur de Amazon Connect chat](https://github.com/amazon-connect/amazon-connect-chat-ui-examples) et consultez nos exemples de vues Web de chat [iOS](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples/iOS-WKWebView-sample) et [Android](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples/android-webview-sample) qui montrent comment intégrer Amazon Connect APIs et recevoir des notifications push.

## Surveillance de votre utilisation des notifications push
<a name="monitor-your-usage-for-push-notification"></a>

 Pour garantir la fiabilité, la disponibilité et les performances de vos notifications push, il est essentiel de surveiller leur utilisation. Vous pouvez suivre ces informations par le biais de plusieurs canaux : 

1.  AWS fournit des outils de surveillance complets pour les notifications push. Pour plus d'informations, consultez la section [Surveillance des messages push destinés aux utilisateurs AWS finaux](https://docs.aws.amazon.com/push-notifications/latest/userguide/monitoring-overview.html). 

1.  Selon le service de notification push que vous utilisez, vous pouvez accéder à des données d’utilisation supplémentaires via leur console respective. 

   1.  Firebase Cloud Messaging (FCM) : consultez la documentation de FCM [Comprendre la distribution des messages](https://firebase.google.com/docs/cloud-messaging/understand-delivery?platform=android) pour obtenir des informations sur votre utilisation de FCM. 

   1.  Service de notifications push Apple (APNs) : consultez la section de APNs documentation sur l'[affichage de l'état des notifications push à l'aide de métriques et APNs](https://developer.apple.com/documentation/usernotifications/viewing-the-status-of-push-notifications-using-metrics-and-apns) pour surveiller l'état de vos notifications. 

# Permettre aux clients de reprendre les conversations par chat dans Amazon Connect
<a name="chat-persistence"></a>

Les clients démarrent souvent un chat, puis quittent la conversation et reviennent plus tard pour continuer à discuter. Cela peut se produire de nombreuses fois sur plusieurs jours, mois, voire années. Pour prendre en charge les chats de longue durée comme ceux-ci, activez le chat persistant. 

Grâce au chat persistant, les clients peuvent reprendre les conversations précédentes en utilisant le contexte, les métadonnées et les transcriptions transmis. Ils n’ont pas besoin de se répéter lorsqu’ils reviennent dans un chat et les agents ont accès à l’historique complet de la conversation. 

## Réhydratation du chat
<a name="rehydration"></a>

Le chat persistant est possible grâce à un processus appelé réhydratation du chat. Ce processus permet de récupérer les transcriptions des chats à partir des contacts par chat précédents et de les afficher. Il permet aux clients et aux agents de reprendre facilement les conversations là où ils les ont laissées.

**Important**  
Seules les sessions de chat terminées sont autorisées à réhydrater une nouvelle session de chat, car la génération des transcriptions s’effectue de manière asynchrone.   
Les utilisateurs doivent attendre 30 à 60 secondes avant de tenter une réhydratation du chat après une session terminée.

Amazon Connect permet deux types de réhydratation :
+ `ENTIRE_PAST_SESSION` : démarre une nouvelle session de chat et réhydrate tous les segments de chat des sessions de chat passé.
+ `FROM_SEGMENT` : démarre une nouvelle session et effectue la réhydratation à partir du segment de chat passé spécifié.

Pour obtenir des exemples de cas d'utilisation illustrant ces différents modes de réhydratation, consultez [Exemples de cas d’utilisation](#persistentchatscenario).

## RelatedContactId
<a name="relatedcontactid"></a>

Un nouveau contact peut être associé à un contact existant via le `RelatedContactId`. Ce nouveau contact contient une copie des [propriétés](connect-attrib-list.md) du contact associé.

Pour plus d'informations sur la modélisation du `RelatedContactId` dans les enregistrements de contact, consultez [Modèle de données pour les enregistrements de contacts Amazon Connect](ctr-data-model.md).

Pour le chat persistant, le `RelatedContactId` représente le `contactId` utilisé pour la réhydratation du chat source.

## Comment activer le chat persistant
<a name="enable-persistent-chat"></a>

Il existe deux façons d’activer le chat persistant :
+ Spécifiez un ID de contact précédent lors de la création d’un chat. Pour obtenir des instructions, consultez [Activation du chat persistant lors de la création d’un contact par chat](#enable-persistent-chat-creating-new-chat-contact).
+ Ajoutez le bloc [Création d’une association de contacts permanente](create-persistent-contact-association-block.md) à un flux. Pour obtenir des instructions, consultez [Activation du chat persistant dans un flux](#enable-persistent-chat-within-contact-flow).

**Note**  
Vous pouvez choisir l'une des deux méthodes pour conserver les chats, mais pas les deux. Autrement dit, vous pouvez n’activer qu’une seule fois la persistance d’un `SourceContactID` sur un nouveau chat.

Pour proposer des expériences de chat persistant, vous devez fournir un ID de contact précédent lorsque vous démarrez une nouvelle session de chat ou lorsque vous utilisez le bloc de flux [Création d’une association de contacts permanente](create-persistent-contact-association-block.md). Cette opération ne s’effectue pas automatiquement pour vous. Nous vous recommandons de créer un référentiel pour stocker les données d’enregistrement des contacts. Ce référentiel permettra d’extraire ces données pour chacun de vos clients. 

 Il existe deux façons de créer des entrées dans un référentiel : 
+ Utilisez le [streaming des messages de chat](https://docs.aws.amazon.com/connect/latest/adminguide/chat-message-streaming.html) pour créer une entrée lorsqu’une session de chat est terminée.
+ Inspectez les [événements de contact](https://docs.aws.amazon.com/connect/latest/adminguide/contact-events.html#contact-events-data-model) et utilisez la [fonction AWS Lambda](https://docs.aws.amazon.com/connect/latest/adminguide/connect-lambda-functions.html) pour créer des entrées dans votre référentiel. 

Une fois le référentiel configuré, vous pouvez extraire l’ID de contact précédent du client et le fournir lors du démarrage d’une nouvelle session de chat ou dans le bloc de flux [Création d’une association de contacts permanente](create-persistent-contact-association-block.md).

En outre, assurez-vous que les transcriptions des chats passés peuvent être extraits du compartiment Amazon S3 de votre instance. Les deux situations suivantes empêchent Amazon Connect d’extraire les transcriptions et ne permettent pas la persistance des sessions de chat :
+ Vous utilisez plusieurs compartiments de transcription de chat.
+ Vous modifiez le nom du fichier de transcription du chat généré par Amazon Connect.

### Activation du chat persistant lors de la création d’un contact par chat
<a name="enable-persistent-chat-creating-new-chat-contact"></a>

Pour configurer des expériences de chat persistantes lors de la création d'un nouveau contact de chat, indiquez le précédent `contactId` dans le `SourceContactId` paramètre de l'[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API. Cela permet de réhydrater les transcriptions de chat des contacts précédents. Les transcriptions sont visibles à la fois par le client et par l’agent dans le chat. Pour obtenir un exemple, consultez [Exemples de cas d’utilisation](#persistentchatscenario).

### Activation du chat persistant dans un flux
<a name="enable-persistent-chat-within-contact-flow"></a>

Pour configurer des expériences de chat persistant dans un flux, procédez comme suit :

1. Une fois qu’un contact par chat a été créé, ajoutez le bloc [Création d’une association de contacts permanente](create-persistent-contact-association-block.md) à votre flux.

1. Utilisez un attribut défini par l’utilisateur pour spécifier un ID de contact source.

Vous pouvez également utiliser l'[CreatePersistentContactAssociation](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreatePersistentContactAssociation.html)API pour fournir un identifiant de contact source afin de rendre le chat en cours persistant.

La réhydratation commence après le début du chat, lors de l’utilisation du bloc de flux ou de l’API. Un événement est émis pour vous avertir lorsque la réhydratation est terminée.

## Exemples de cas d’utilisation
<a name="persistentchatscenario"></a>

Par exemple, un client démarre une session de chat :

1. L'agent a1 accepte le chat et la conversation commence entre le client et l'agent a1. Il s'agit du premier contact créé dans la session de chat actuelle. Par exemple, le `contactId` **C1** peut être 11111111-aaaa-bbbb-1111-1111111111111. 

1. L'agent a1 transfère ensuite le chat à l'agent a2. Un autre contact est créé. Par exemple, le `contactId` **C2** peut être 2222222-aaaa-bbbb-2222-222222222222222. 

1. L'agent a2 met fin au chat.

1. Le client est redirigé vers le flux de déconnexion pour une enquête post-chat qui crée un autre contact. Par exemple, le `contactId` **C3** peut être 33333333-aaaa-bbbb-3333-3333333333333.

1. L'enquête post-chat s'affiche et la session de chat prend fin. 

1. Plus tard, le client revient et souhaite reprendre sa session de chat passé.

À ce stade, il existe potentiellement deux cas d'utilisation différents pour le client. Vous trouverez ci-dessous les cas d’utilisation de chat persistant que le client peut rencontrer et la manière dont vous configurez Amazon Connect pour les mettre à disposition.

### Cas d’utilisation 1
<a name="persistentchatscenario-usecase1"></a>

Le client souhaite poursuivre sa session de chat passé, mais il veut masquer l'enquête post-chat. Vous utilisez la configuration ci-dessous pour proposer cette expérience. 

**Requête :**

```
PUT /contact/chat HTTP/1.1
Content-type: application/json
{
   "Attributes": { 
      "string" : "string" 
   },
   "ContactFlowId": "string",
   "InitialMessage": { 
      "Content": "string",
      "ContentType": "string"
   },
   "InstanceId": "string",
   ... // other chat fields
     
   // NEW Attribute for persistent chat 
   "PersistentChat" : {
       "SourceContactId":"2222222-aaaa-bbbb-2222-222222222222222" 
       "RehydrationType":"FROM_SEGMENT"
   }
}
```

#### Configuration
<a name="usecase1-configuration"></a>
+ SourceContactId = 2222222-aaaa-bbbb-2222-2222222222222 (le ContactiD pour C2)
+ RehydrationType = "`FROM_SEGMENT`"

#### Comportement attendu
<a name="usecase1-behavior"></a>
+ Cette configuration démarre une session de chat persistant à partir du contact C2 terminé précédemment qui a été spécifié (par exemple, 2222222-aaaa-bbbb-2222-222222222222222). 

  Les transcriptions des sessions de chat passé C2 (2222222-aaaa-bbbb-2222-222222222222222) et C1 (11111111-aaaa-bbbb-1111-1111111111111) sont accessibles dans la session de chat persistant actuelle. Notez que le segment de chat C3 (33333333-aaaa-bbbb-3333-3333333333333) est supprimé de la session de chat persistant.
+ Dans ce cas, la [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)réponse renvoie C2 (2222222-aaaa-bbbb-2222-22222222222222222) sous la forme « ». ContinuedFromContactId
+ Le `RelatedContactId` pour cette session de chat persistant est 2222222-aaaa-bbbb-2222-222222222222222 (C2).

### Cas d’utilisation 2
<a name="persistentchatscenario-usecase2"></a>

Le client souhaite poursuivre la session de chat passé et voir la transcription complète de l'engagement passé (et il ne veut pas masquer l'enquête post-chat). Vous utilisez la configuration ci-dessous pour proposer cette expérience. 

**Note**  
 Pour le type de réhydratation `ENTIRE_PAST_SESSION`, spécifiez le premier contact (`contactId` initial) de la session de chat passé en tant qu'attribut `SourceContactId`.

**Requête :**

```
PUT /contact/chat HTTP/1.1
Content-type: application/json
{
   "Attributes": { 
      "string" : "string" 
   },
   "ContactFlowId": "string",
   "InitialMessage": { 
      "Content": "string",
      "ContentType": "string"
   },
   "InstanceId": "string",
   ... // other chat fields
     
   // NEW Attribute for persistent chat 
   "PersistentChat":{
        "SourceContactId":"11111111-aaaa-bbbb-1111-1111111111111" // (first contactId C1)
        "RehydrationType":"ENTIRE_PAST_SESSION"
   }
}
```

#### Configuration
<a name="usecase2-configuration"></a>
+ SourceContactId = `11111111-aaaa-bbbb-1111-1111111111111` (C1)
+ RehydrationType = « E `NTIRE_PAST_SESSION` »

#### Comportement attendu
<a name="usecase2-behavior"></a>
+ Une session de chat persistant est alors démarrée à partir du dernier contact par chat terminé (C3). Les transcriptions des sessions de chat passé C3, C2 et C1 sont accessibles dans la session de chat persistant actuelle.
+ Dans ce cas, la [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)réponse renvoie 33333333-aaaa-bbbb-3333-333333333333333 (C3) sous la forme « ». ContinuedFromContactId
+ Le `RelatedContactId` pour cette session de chat persistant est 33333333-aaaa-bbbb-3333-3333333333333 (C3).

**Note**  
Les liens de chat sont cumulatifs. Une fois les sessions de chat liées, elles sont transmises.  
Par exemple, si un contact (`contactId` C2) appartenant à une session de chat passé a été lié à un contact (`contactId` C1) issu d’une autre session de chat passée, une nouvelle session de chat persistant créée par la liaison de C2 entraîne également un lien implicite avec C1. La nouvelle session de chat persistant comportera le lien suivant : C3 → C2 → C1  
L'ancien ContactiD, à partir duquel la session de chat persistante est poursuivie, est exposé dans `ContinuedFromContactId` le champ de la réponse de l'API. [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html) Il se trouve également dans le champ RelatedContactId de l'[enregistrement](ctr-data-model.md#ctr-ContactTraceRecord) du contact

## Comment accéder à la transcription d’un contact par chat passé pour un chat persistant
<a name="access-past-chat-transcript"></a>

L’accès à la transcription du chat passé pour un chat persistant utilise le modèle de pagination `NextToken` existant. L'appel initial [GetTranscript](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html)à une session de discussion persistante nouvellement démarrée contient un `NextToken` dans la réponse, s'il existe des messages de discussion antérieurs. `NextToken`doit être utilisé pour accéder à la transcription du chat précédent et pour régler le `ScanDirection` to `BACKWARD` lors de l'[GetTranscript](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html)appel suivant pour récupérer les messages du chat précédent. 

S'il y a plusieurs messages de chat antérieurs [GetTranscript](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html)renvoyés, un nouveau `NextToken` processus identique peut être répété pour récupérer d'autres transcriptions de chat passées.

## Non pris en charge : utilisation des filtres `StartPosition` et `contactId` pour le chat persistant
<a name="startposition"></a>

Amazon Connect ne permet pas d'utiliser `StartPosition` et de `contactId` filtrer les attributs des éléments de transcription provenant de la discussion précédente lors de l'[GetTranscript](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html)appel à candidatures. 

# Activation du streaming des messages de chat en temps réel dans Amazon Connect
<a name="chat-message-streaming"></a>

Amazon Connect Chat vous permet [APIs](https://docs.aws.amazon.com/connect/latest/APIReference/Welcome.html)de vous abonner à un flux de messages de chat en temps réel. Grâce à ces APIs outils, vous pouvez : 
+ diffuser des messages de chat en temps réel lorsqu’un contact par chat est créé ;
+ étendre les fonctionnalités de chat actuelles d’Amazon Connect pour prendre en charge des cas d’utilisation tels que la création d’intégrations avec des solutions SMS et des applications de messagerie tierces, l’activation des notifications push mobiles et la création de tableaux de bord d’analytique pour surveiller et suivre l’activité des messages de chat. 

**Note**  
Cette page explique comment s'abonner à un point de terminaison SNS pour diffuser en temps réel les messages de chat dans Amazon Connect. Si vous essayez d'activer le streaming de messages pour les interactions conversationnelles basées sur l'IA dans Amazon Connect, consultez[Activer le streaming de messages pour le chat alimenté par l'IA](message-streaming-ai-chat.md).

## Comment APIs fonctionne le streaming des messages
<a name="how-chat-message-streaming-apis-work"></a>

Le [streaming APIs des messages Amazon Connect](https://docs.aws.amazon.com/connect/latest/APIReference/Welcome.html) est déclenché lorsque certains événements se produisent au sein d'un contact Amazon Connect Chat. Par exemple, lorsqu’un client envoie un nouveau message de chat, l’événement envoie des [données utiles](sns-payload.md) à un point de terminaison spécifié, qui contient des données relatives au message qui vient d’être envoyé. Les messages sont publiés à l'aide d'[Amazon Simple Notification Service](https://docs.aws.amazon.com/sns/latest/dg/welcome.html) (Amazon SNS) sur un point de terminaison spécifique. 

Cette rubrique explique comment configurer le streaming de messages en temps réel avec Amazon Connect et Amazon SNS. La procédure est la suivante : 

1. Utilisez la console Amazon SNS pour créer une nouvelle rubrique SNS standard et configurer les messages.

1. Appelez l'[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API pour lancer le contact par chat.

1. Appelez l'[StartContactStreaming](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartContactStreaming.html)API pour lancer le streaming des messages. 

1. Appelez l'[CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)API pour créer la connexion du participant.

## Étape 1 : créer une rubrique SNS standard
<a name="step1-chat-streaming"></a>

1. Accédez à la console Amazon SNS. 

1. [Créez une rubrique SNS](https://docs.aws.amazon.com/sns/latest/dg/sns-create-topic.html) dans votre AWS compte. Dans la section **Détails**, pour **Type**, choisissez **Standard**, entrez un nom pour la rubrique, puis choisissez **Créer la rubrique**.
**Note**  
Actuellement, le streaming de messages APIs ne prend en charge que le SNS standard pour le streaming en temps réel des messages. Elles ne prennent pas en charge les [rubriques FIFO Amazon SNS](https://docs.aws.amazon.com/sns/latest/dg/sns-fifo-topics.html). 

1. Une fois la rubrique créée, son Amazon Resource Name (ARN) s'affiche dans la section **Détails**. Copiez l'ARN de la rubrique dans le Presse-papiers. Vous allez utiliser l'ARN de la rubrique à l'étape suivante et dans [Étape 3 : activer le streaming de messages sur le contact](#step3-chat-streaming). 

   L'ARN de la rubrique est similaire à l'exemple suivant : 

   ```
   arn:aws:sns:us-east-1:123456789012:MyTopic                                
   ```

1. Choisissez l'onglet **Stratégie d'accès**, sélectionnez **Modifier**, puis ajoutez une politique basée sur les ressources à la rubrique SNS afin qu'Amazon Connect soit autorisé à y publier. Vous trouverez ci-dessous un exemple de politique SNS que vous pouvez copier et coller dans l'éditeur JSON, puis personnaliser avec vos valeurs : 

------
#### [ JSON ]

****  

   ```
   {
      "Version":"2012-10-17",		 	 	 
      "Statement":[
         {
            "Effect":"Allow",
            "Principal":{
               "Service":"connect.amazonaws.com"
            },
            "Action":"sns:Publish",
            "Resource":"arn:aws:sns:us-east-1:111122223333:TopicName",
            "Condition":{
               "StringEquals":{
                   "aws:SourceAccount":"111122223333"
               },
               "ArnEquals":{
               "aws:SourceArn":"arn:aws:connect:us-east-1:111122223333:instance/InstanceId"
               }
            }
         }
      ]
   }
   ```

------
**Note**  
La **stratégie d'accès** par défaut est assortie de conditions appliquées à `sourceOwner`, telles que les suivantes :   

   ```
   "Condition": {
           "StringEquals": {
             "AWS:SourceOwner": "921772911154"
           }
         }
   ```
Assurez-vous de supprimer le paramètre et de le remplacer par `SourceAccount`, par exemple :  

   ```
   "Condition":{
               "StringEquals":{
                  "aws:SourceAccount":"YOUR_AWS_ACCOUNT_ID"
               },
               "ArnEquals":{
                  "aws:SourceArn":"YOUR_CONNECT_INSTANCE_ARN"
               }
            }
   ```
Cela évite un problème d'[adjoint confus entre services](cross-service-confused-deputy-prevention.md). 

1. Si vous utilisez le chiffrement côté serveur sur SNS, vérifiez que l'autorisation `connect.amazonaws.com` est activée sur la KMS key. Voici un exemple de stratégie :

------
#### [ JSON ]

****  

   ```
   {
       "Version":"2012-10-17",		 	 	 
       "Id": "key-consolepolicy-3",
       "Statement": [
           {
               "Sid": "Enable IAM User Permissions",
               "Effect": "Allow",
               "Principal": {
                   "AWS": "arn:aws:iam::111122223333:root",
                   "Service": "connect.amazonaws.com"
               },
               "Action": "kms:*",
               "Resource": "*"
           },
           {
               "Sid": "Allow access for Key Administrators",
               "Effect": "Allow",
               "Principal": {
                   "AWS": "arn:aws:iam::111122223333:root",
                   "Service": "connect.amazonaws.com"
               },
               "Action": [
                   "kms:Create*",
                   "kms:Describe*",
                   "kms:Enable*",
                   "kms:List*",
                   "kms:Put*",
                   "kms:Update*",
                   "kms:Revoke*",
                   "kms:Disable*",
                   "kms:Get*",
                   "kms:Delete*",
                   "kms:TagResource",
                   "kms:UntagResource",
                   "kms:ScheduleKeyDeletion",
                   "kms:CancelKeyDeletion"
               ],
               "Resource": "*"
           }
       ]
   }
   ```

------

## Étape 2 : initier le contact par chat
<a name="step2-chat-streaming"></a>

1. Appelez l'[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API Amazon Connect pour lancer le contact par chat. 

   Pour plus d'informations sur la création du client SDK permettant d'appeler Amazon Connect APIs, consultez les rubriques suivantes :
   + [Classe AmazonConnectClientBuilder](https://docs.aws.amazon.com/AWSJavaSDK/latest/javadoc/com/amazonaws/services/connect/AmazonConnectClientBuilder.html) 
   + [Création de clients de service](https://docs.aws.amazon.com/sdk-for-java/v1/developer-guide/creating-clients.html) 

1. Gardez une trace `ContactId` `ParticipantToken` de la [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)réponse, car ces attributs de réponse sont utilisés pour appeler d'autres discussions APIs nécessaires pour activer le streaming. Les étapes suivantes décrivent cette procédure.

## Étape 3 : activer le streaming de messages sur le contact
<a name="step3-chat-streaming"></a>
+ Appelez [StartContactStreaming](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartContactStreaming.html)pour activer le streaming de messages en temps réel vers votre rubrique SNS.
  + **Limites** : vous pouvez vous abonner à un maximum de deux rubriques SNS par contact.
  + Lorsque vous appelez [StartContactStreaming](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartContactStreaming.html), vous devez fournir le nom de ressource Amazon (ARN) de la rubrique SNS (voir[Étape 1 : créer une rubrique SNS standard](#step1-chat-streaming)).

    Un seul ARN de rubrique SNS peut être utilisé sur plusieurs Comptes AWS, mais il doit se trouver dans la même région que votre instance Amazon Connect. **Par exemple, si l'ARN de votre sujet se trouve dans **us-east-1**, votre instance Amazon Connect doit se trouver dans us-east-1.**
  + Pour les messages de chat initiaux qui ne sont pas reçus sur le terminal de streaming, vous pouvez appeler l'[GetTranscript](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html)API pour recevoir les messages initiaux.

## Étape 4 : créer la connexion du participant
<a name="step4-chat-streaming"></a>
+ Appel [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)dont l'`ConnectParticipant`attribut a été transmis comme vrai. 
  + Vous devez appeler [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)dans les cinq minutes suivant la création du chat.
  + Les appels [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)`ConnectParticipant`définis sur true ne fonctionnent que si vous avez activé la diffusion en continu [Étape 2 : initier le contact par chat](#step2-chat-streaming) et si le participant appelant l'est`Customer`.
  + Cette étape (création de la connexion du participant) est facultative si vous vous êtes déjà connecté avec succès au contact par chat à l'aide de `WEBSOCKET`.

## Étapes suivantes
<a name="nextsteps-chat-streaming"></a>

Vous êtes prêt à travailler avec le streaming des messages APIs.

1. Pour vérifier que cela fonctionne, assurez-vous que les messages sont publiés dans la rubrique SNS que vous avez créée. Vous pouvez le faire à l'aide CloudWatch des métriques Amazon. Pour obtenir des instructions, consultez la section [Surveillance des rubriques Amazon SNS à](https://docs.aws.amazon.com/sns/latest/dg/sns-monitoring-using-cloudwatch.html) l'aide de. CloudWatch 

1. La [conservation des messages étant limitée](https://aws.amazon.com/blogs//aws/sns-ttl-control/) sur SNS, nous vous recommandons de configurer [Amazon Simple Queue Service (Amazon SQS)](https://aws.amazon.com/sqs/) [Amazon Kinesis](https://aws.amazon.com/kinesis/) ou un autre service pour conserver les messages. 

1. L'utilisation [StopContactStreaming](https://docs.aws.amazon.com/connect/latest/APIReference/API_StopContactStreaming.html)est facultative et n'est pas obligatoire si les chats sont [déconnectés](disconnect-hang-up.md) via un flux de contacts ou si le client déconnecte le chat. Cependant, `StopContactStreaming` offre la possibilité d'arrêter le streaming de messages sur la rubrique SNS, même si le chat est actif et en cours.

# Utilisation des données utiles Amazon SNS après avoir activé le streaming des messages dans Amazon Connect
<a name="sns-payload"></a>

Après avoir activé le streaming de messages avec succès, vous devrez peut-être filtrer le message pour l'envoyer au participant prévu : agent, client ou tout le monde.

Pour filtrer par participant, lisez l'attribut spécifique des en-têtes SNS (`MessageVisibility`) afin de déterminer si le message est destiné uniquement au client, uniquement à l'agent ou à tout le monde. 
+ Pour un envoi au client uniquement : pour l'ensemble du code présenté au client, les clients doivent filtrer les messages destinés au client et élaborer la logique suivante pour lui transmettre le message.

  ```
  if ( ( MessageVisibility == CUSTOMER || MessageVisibility == ALL)  && ParticipantRole != CUSTOMER )
  ```
+ Pour un envoi à l'agent uniquement :

  ```
  if ( ( MessageVisibility == AGENT || MessageVisibility == ALL)  && ParticipantRole != AGENT )
  ```

Vous pouvez également tirer parti de la fonctionnalité de filtrage d'Amazon SNS en élaborant des [politiques de filtrage d'abonnement](https://docs.aws.amazon.com/sns/latest/dg/sns-subscription-filter-policies.html) personnalisées. Cela décharge la logique de filtrage des messages de l'abonné à la rubrique SNS vers le service SNS lui-même.

## Attributs du message dans les données utiles
<a name="sns-message-attributes"></a>

Vous trouverez ci-dessous une description de chaque attribut de message dans les données utiles Amazon SNS :
+ `InitialContactId` : ID de contact initial du chat.
+ `ContactId` : ID de contact actuel du chat. Le `InitialContactId` et `ContactId` peut être différent s'il y a eu un nouvel agent dans le chat ou dans le flux de queue-to-queue contacts.
+ `ParticipantRole` : participant qui a envoyé le message.
+ `InstanceId` : ID d'instance Amazon Connect.
+ `AccountId`: ID du AWS compte.
+ `Type` : valeurs possibles : `EVENT`, `MESSAGE`.
+ `ContentType` : valeurs possibles : `application/vnd.amazonaws.connect.event.typing`, `application/vnd.amazonaws.connect.event.participant.joined`, `application/vnd.amazonaws.connect.event.participant.left`, `application/vnd.amazonaws.connect.event.transfer.succeeded`, `application/vnd.amazonaws.connect.event.transfer.failed`, `application/vnd.amazonaws.connect.message.interactive`, `application/vnd.amazonaws.connect.event.chat.ended`, etc. 
+ `MessageVisibility` : valeurs possibles : `AGENT`, `CUSTOMER`, `ALL`.

## Exemple de données utiles SNS
<a name="sns-message-payload"></a>

```
{
  "Type" : "Notification",
  "MessageId" : "ccccccccc-cccc-cccc-cccc-ccccccccccccc",
  "TopicArn" : "arn:aws:sns:us-west-2:009969138378:connector-svc-test",
  "Message" :  "{\"AbsoluteTime\":\"2021-09-08T13:28:24.656Z\",\"Content\":\"help\",\"ContentType\":\"text/plain\",\"Id\":\"333333333-be0d-4a44-889d-d2a86fc06f0c\",\"Type\":\"MESSAGE\",\"ParticipantId\":\"bbbbbbbb-c562-4d95-b76c-dcbca8b4b5f7\",\"DisplayName\":\"Jane\",\"ParticipantRole\":\"CUSTOMER\",\"InitialContactId\":\"33333333-abc5-46db-9ad5-d772559ab556\",\"ContactId\":\"33333333-abc5-46db-9ad5-d772559ab556\"}",
  "Timestamp" : "2021-09-08T13:28:24.860Z",
  "SignatureVersion" : "1",
  "Signature" : "examplegggggg/1tEBYdiVDgJgBoJUniUFcArLFGfg5JCvpOr/v6LPCHiD7A0BWy8+ZOnGTmOjBMn80U9jSzYhKbHDbQHaNYTo9sRyQA31JtHHiIseQeMfTDpcaAXqfs8hdIXq4XZaJYqDFqosfbvh56VPh5QgmeHTltTc7eOZBUwnt/177eOTLTt2yB0ItMV3NAYuE1Tdxya1lLYZQUIMxETTVcRAZkDIu8TbRZC9a00q2RQVjXhDaU3k+tL+kk85syW/2ryjjkDYoUb+dyRGkqMy4aKA22UpfidOtdAZ/GGtXaXSKBqazZTEUuSEzt0duLtFntQiYJanU05gtDig==",
  "SigningCertURL" : "https://sns.us-west-2.amazonaws.com/SimpleNotificationService-11111111111111111111111111111111.pem",
  "UnsubscribeURL" : "https://sns.us-west-2.amazonaws.com/?Action=Unsubscribe&SubscriptionArn=arn:aws:sns:us-west-2:000000000000:connector-svc-test:22222222-aaaa-bbbb-cccc-333333333333",
  "MessageAttributes" : {
    "InitialContactId" : {"Type":"String","Value":"33333333-abc5-46db-9ad5-d772559ab556"},
    "MessageVisibility" : {"Type":"String","Value":"ALL"},
    "Type" : {"Type":"String","Value":"MESSAGE"},
    "AccountId" : {"Type":"String","Value":"999999999999"},
    "ContentType" : {"Type":"String","Value":"text/plain"},
    "InstanceId" : {"Type":"String","Value":"dddddddd-b64e-40c5-921b-109fd92499ae"},
    "ContactId" : {"Type":"String","Value":"33333333-abc5-46db-9ad5-d772559ab556"},
    "ParticipantRole" : {"Type":"String","Value":"CUSTOMER"}
  }
}
```

# Résolution des problèmes liés au streaming des messages dans Amazon Connect
<a name="troubleshoot-message-streaming"></a>

## Les messages ne sont pas publiés dans SNS
<a name="message-not-published-to-sns"></a>

Dans ce cas, nous vous recommandons de vérifier les informations de l'[Étape 1 : créer une rubrique SNS standard](chat-message-streaming.md#step1-chat-streaming) :
+ Assurez-vous d'utiliser une rubrique SNS standard et non [FIFO Amazon SNS](https://docs.aws.amazon.com/sns/latest/dg/sns-fifo-topics.html). Actuellement, le streaming de messages ne APIs prend en charge que le SNS standard pour le streaming en temps réel des messages.
+ Assurez-vous qu'une autorisation basée sur les ressources SNS est correctement appliquée à votre compte.
  + Si le chiffrement côté serveur est activé, vous devez accorder la même autorisation de principal de service Amazon Connect pour le chiffrement et le déchiffrement.

## Le flux ne démarre pas
<a name="contact-flow-not-starting"></a>

Si vous utilisez le streaming de messages APIs à la place de websockets, envoyez un accusé de réception de connexion ; voir. [Étape 4 : créer la connexion du participant](chat-message-streaming.md#step4-chat-streaming) Cela revient à se connecter à un websocket. Le flux ne commence qu'après l'événement d'accusé de réception de connexion.

Appelez [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)après [StartContactStreaming](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartContactStreaming.html)pour marquer `Customer` comme connecté ; voir[Étape 3 : activer le streaming de messages sur le contact](chat-message-streaming.md#step3-chat-streaming). Cela garantit que les messages sont envoyés une fois que vous avez confirmé que le client est prêt à les recevoir.

## Le problème n'est pas résolu ?
<a name="other-issues-message-streaming"></a>

Si, après avoir essayé les solutions précédentes, vous rencontrez toujours des problèmes avec le streaming des messages, contactez Support pour obtenir de l'aide. 

Les administrateurs Amazon Connect peuvent choisir l'une des options suivantes pour contacter le service de support :
+ Si vous avez un compte AWS Support, rendez-vous dans le [Centre d'assistance](https://console.aws.amazon.com/support/home) et envoyez un ticket.
+ Sinon, ouvrez la [AWS Management Console](https://console.aws.amazon.com/) et choisissez **Amazon Connect**, **Support**, **Créer un cas**.

Il est utile de fournir les informations suivantes :
+ L'ID/ARN de votre instance de centre de contact. Pour trouver l'ARN de votre instance, consultez [Localisation de l’ID ou de l’ARN de votre instance Amazon Connect](find-instance-arn.md). 
+ Votre région. 
+ Description détaillée du problème.

# Personnalisation des expériences de flux de chat dans Amazon Connect en intégrant des participants personnalisés
<a name="chat-customize-flow"></a>

Vous pouvez intégrer d'autres solutions, telles que des robots, au chat Amazon Connect pour créer des expériences de flux de chat personnalisées.

Vous trouverez ci-dessous un aperçu de la manière dont vous pouvez personnaliser votre expérience de flux de chat. Exécutez ces étapes pour chaque segment de chat après le démarrage de la conversation par chat. Nous vous recommandons d'ajouter un [Fonction AWS Lambda ](invoke-lambda-function-block.md) bloc pour les appeler APIs dans votre flux de discussion. 

**Important**  
Ajoutez un bloc [Lire l'invite](play.md) avant un bloc [Fonction AWS Lambda ](invoke-lambda-function-block.md). Cela n'est nécessaire que lorsqu'un bloc **Invoke AWS Lambda** est le premier bloc de votre flux de discussion entrant.

1.  [Activez le streaming en temps réel des messages de chat](chat-message-streaming.md). 

1. Appelez l'[CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)API Amazon Connect pour ajouter un participant personnalisé (`ParticipantRole`=`CUSTOM_BOT`) au contact de chat.

   1. Pour plus d'informations sur la création du client SDK permettant d'appeler Amazon Connect APIs, consultez les rubriques suivantes :
      + [Classe AmazonConnectClientBuilder](https://docs.aws.amazon.com/AWSJavaSDK/latest/javadoc/com/amazonaws/services/connect/AmazonConnectClientBuilder.html)
      + [Création de clients de service](https://docs.aws.amazon.com/sdk-for-java/v1/developer-guide/creating-clients.html)

   1. Conservez `ParticipantToken` le résultat obtenu [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)à partir de pour appeler [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html). `CreateParticipantConnection`renvoie un`ConnectionToken`, que vous pouvez utiliser pour appeler un autre participant Amazon Connect APIs. 

      Lorsque vous appelez [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)pour créer une connexion pour un participant personnalisé :
      + Définissez `ConnectParticipant` sur `True` pour marquer le participant personnalisé comme étant connecté pour le streaming des messages.
      + `Type`Faites-nous passer `CONNECTION_CREDENTIALS` pour appeler le service Amazon Connect Participant suivant APIs.
      + `CreateParticipantConnection` doit être appelé dans les 15 secondes suivant l'appel de `CreateParticipant`.

1. Une fois le participant ajouté au contact, il peut échanger des messages avec le client en utilisant Amazon Connect Participant Service APIs.

1. Pour déconnecter le participant, appelez l'[ DisconnectParticipant](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_DisconnectParticipant.html)API. 

**Note**  
Un participant personnalisé ne peut pas être ajouté à un chat lorsqu'un agent ou un robot Amazon Lex est déjà présent sur le contact. 
Un participant personnalisé est déconnecté lorsqu'un agent ou un robot Amazon Lex rejoint un contact.
Un seul participant personnalisé peut être présent sur un contact.
Un participant personnalisé n’est pas autorisé à accéder aux pièces jointes qu’un client pourrait charger.

Nous vous recommandons de configurer la durée pendant laquelle un participant personnalisé peut discuter avec un contact :
+ Définissez la propriété **Délai d'expiration** sur le bloc [Attente](wait.md) pour le paramètre `ParticipantRole` = `CUSTOM_BOT`.
+ Si le participant au robot personnalisé n'est pas déconnecté avant l'expiration du délai imparti, le contact est acheminé vers la branche **Temps dépassé**. Cela vous permet de décider quel bloc exécuter ensuite pour résoudre la requête du client.

**Note**  
Si un contact est acheminé vers la branche **Temps dépassé**, le participant n'est pas déconnecté du contact. Vous devez appeler l'[ DisconnectParticipant](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_DisconnectParticipant.html)API pour déconnecter le participant.

## Activation de minuteurs pour les clients associés à un participant personnalisé
<a name="integrate-bot-extension-client"></a>

Vous pouvez activer des minuteurs pour les clients associés à des participants personnalisés, tels que des robots personnalisés. Cette fonctionnalité vous permet de détecter le moment où un client cesse de répondre afin de mettre fin à cette conversation avec le robot et de passer à l’étape suivante du flux. En mettant fin aux sessions de ces participants inactifs, vous pouvez réduire le nombre de discussions ouvertes où un client n’interagit plus avec un participant personnalisé.

Procédez comme suit pour intégrer une extension de bot personnalisé de type « Participant inactif » et définissez des valeurs de minuteur personnalisées, si vous le souhaitez. Ces étapes supposent que vous utilisiez déjà la fonctionnalité de participant personnalisé pour le chat. 

1. Avant que le participant personnalisé ne rejoigne le chat, appelez l'[UpdateParticipantRoleConfig](https://docs.aws.amazon.com/connect/latest/APIReference/API_UpdateParticipantRoleConfig.html)API pour le client.

   1. Les minuteurs ne s’activent que pour le client. Les participants personnalisés ne disposent pas de minuteurs d’inactivité ni de déconnexion automatique. 

   1. Vous pouvez choisir la méthode d’invocation de l’API. 

   1. Les valeurs du minuteur configurées à cette étape sont conservées pendant toute la durée du chat. Si vous souhaitez des valeurs de minuteur différentes pour l’**interaction entre le client et l’agent**, reportez-vous à l’étape 2. 

   1. Si votre client est déjà configuré de cette façon, vous n’avez aucune autre action à effectuer pour intégrer le participant personnalisé. 

1. (Facultatif) Pour configurer des minuteurs et des valeurs de minuteur différentes lors de l’**interaction entre le client et l’agent** et lors de l’**interaction entre le client et le participant personnalisé** :
   + Avant que l'agent ne rejoigne le chat, appelez à nouveau l'[UpdateParticipantRoleConfig](https://docs.aws.amazon.com/connect/latest/APIReference/API_UpdateParticipantRoleConfig.html)API avec les configurations souhaitées.

Pour en savoir plus sur les minuteurs de chat, consultez [Configuration des délais de chat pour les participants au chat](setup-chat-timeouts.md).

### Démarrage des minuteurs
<a name="starting-timers"></a>

Un compte à rebours commence pour le client une fois que le participant personnalisé a établi une connexion avec lui à l'aide de l'[CreateParticipantConnection](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html)API.

### Que se passe-t-il lorsque des participants non compatibles rejoignent une session de chat avec un participant personnalisé ?
<a name="non-compatible-participants"></a>

Voici ce qui se passe lorsqu’un agent ou un participant robotisé Lex rejoint une discussion avec un participant personnalisé et qu’il ne s’agit pas de participants compatibles : 

1. Le participant personnalisé est automatiquement déconnecté du chat. 

1. Tous les minuteurs précédemment actifs sont arrêtés, et d’autres sont créés pour les participants connectés (si les minuteurs sont configurés).

1. Chaque nouveau minuteur est également mis à jour avec la dernière configuration (si nécessaire). Cela établit une nouvelle « session inactive » effective pour le nouvel ensemble de participants actifs dans la session de chat.

### Interaction avec le minuteur du bloc Patienter
<a name="interaction-wait-block-timer"></a>

Le délai d’inactivité n’a aucune incidence sur le fonctionnement du bloc [Attente](wait.md). 

Le minuteur du bloc **Patienter** qui démarre lorsque le contact par chat entre dans un bloc **Patienter** continue de fonctionner. Si le minuteur du bloc **Patienter** expire, le contact relance le flux et est redirigé vers la branche **Temps dépassé**, que les minuteurs des participants inactifs soient actifs ou non.

## Conseils pour le dépannage
<a name="ts-chat-custom-bot"></a>
+ `ResourceNotFoundException`: 

  Si vous obtenez un paramètre `ResourceNotFoundException` pour le participant personnalisé lors de l'appel de l'API `CreateParticipantConnection`, vérifiez si l'API `CreateParticipantConnection` a été appelée 15 secondes après l'API `CreateParticipant`.
+ `AccessDeniedException`: 

  Si vous recevez une erreur `AccessDeniedException` et que le rôle du participant est CUSTOM\$1BOT, cela indique que le robot essaie d’accéder aux pièces jointes. Le rôle de participant CUSTOM\$1BOT n’est pas autorisé à accéder aux pièces jointes chargées par les clients.

# Configuration de l’authentification des clients dans Amazon Connect pour les contacts par chat
<a name="customer-auth"></a>

Vous pouvez inviter vos clients à se connecter et à s’authentifier lors d’une session de chat. Par exemple, les clients non authentifiés qui interagissent avec un chatbot peuvent être invités à se connecter avant d’être redirigés vers un agent. 

Cette fonctionnalité intégrée s’appuie sur Profils des clients Amazon Connect et sur [Amazon Cognito](https://aws.amazon.com/cognito/). L’utilisation de Profils des clients n’entraîne aucun coût supplémentaire. Cette fonctionnalité est déjà [activée](enable-customer-profiles.md) dans votre instance Amazon Connect si vous avez choisi les paramètres par défaut lors de la configuration. Pour en savoir plus sur la tarification d’Amazon Cognito, consultez [Tarification Amazon Cognito](https://aws.amazon.com/cognito/pricing/).

Pour configurer l’authentification des clients pour le chat :

1. [Activez l’authentification des clients](enable-connect-managed-auth.md#enable-customer-auth) pour votre instance Amazon Connect.

1. [Activation du message d’authentification](enable-connect-managed-auth.md#enable-auth-message).

1. Ajoutez un bloc [Authentifier le client](authenticate-customer.md) à votre flux.

Si votre centre de contact utilise une solution d’authentification existante externe à Amazon Connect, consultez [Authentification préalable au chat](pre-chat-auth.md).

# Activation de l’authentification des clients pour les widgets de communication hébergés
<a name="enable-connect-managed-auth"></a>

Cette rubrique explique comment configurer l’authentification si vous utilisez le widget de communication hébergé Amazon Connect pour le chat. Activez l’authentification des clients pour votre instance Amazon Connect, puis activez un message d’authentification affichant un lien qui ouvre une fenêtre contextuelle vers l’interface utilisateur hébergée par Amazon Cognito. 

## Politiques IAM requises
<a name="auth-page-iam-policies"></a>

Si vous utilisez des politiques IAM personnalisées pour gérer l’accès à la console Amazon Connect, consultez [Autorisations requises pour les politiques IAM personnalisées](security-iam-amazon-connect-permissions.md) pour voir la liste des autorisations requises pour l’accès à la page **Authentification du client**.

## Activation de l’authentification des clients dans votre instance Amazon Connect
<a name="enable-customer-auth"></a>

1. Ouvrez la console Amazon Connect à l'adresse [https://console.aws.amazon.com/connect/](https://console.aws.amazon.com/connect/).

1. Dans la page Instances, choisissez l’alias d’instance. L’alias d’instance est également le **nom de votre instance**, qui apparaît dans votre URL Amazon Connect. L’image suivante présente la page **Instances du centre de contact virtuel Amazon Connect** avec un encadré autour de l’alias d’instance.  
![\[Page Instances du centre de contact virtuel Amazon Connect, Alias d’instance.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/instance.png)

1. Dans le menu de navigation de gauche, choisissez **Applications**, **Authentification du client**. Si cette option ne s'affiche pas, il se peut qu'elle ne soit pas disponible dans votre AWS région. Pour découvrir où l’authentification des clients est disponible, consultez [Disponibilité de l’authentification des clients par région](regions.md#customerauthentication_region). 

1. Sur la page **Authentification du client**, choisissez **Créer un groupe d’utilisateurs dans Amazon Cognito**. Cela ouvre la console Amazon Cognito.

1. Créez un groupe d’utilisateurs avec votre fournisseur d’identité. Pour obtenir des instructions, consultez [Premiers pas avec les groupes d’utilisateurs](https://docs.aws.amazon.com/cognito/latest/developerguide/getting-started-user-pools.html) dans le *Guide du développeur Amazon Cognito*. 
**Note**  
Vous devez sélectionner **Ne pas générer de secret client** lorsque vous configurez le client de votre application Amazon Cognito. Seuls les clients de l’application Amazon Cognito sans secret client sont pris en charge. Pour plus d’informations, consultez [Paramètres spécifiques à l’application avec des clients d’application](https://docs.aws.amazon.com/cognito/latest/developerguide/user-pool-settings-client-apps.html) dans le *Guide du développeur Amazon Cognito*.

1. Après avoir créé un groupe d’utilisateurs Amazon Cognito, revenez sur la page **Authentification du client** et sélectionnez **Groupe d’utilisateurs associé**.

1. Dans la section **Groupe d’utilisateurs**, choisissez le groupe d’utilisateurs que vous avez créé dans le menu déroulant, puis choisissez **Confirmer**.

   Cette action associe le groupe d’utilisateurs à votre instance Amazon Connect. Elle permet au bloc de flux [Authentifier le client](authenticate-customer.md) d’accéder au groupe d’utilisateurs.

1. Passez à l'étape suivante : [Activation du message d’authentification](#enable-auth-message)

## Activation du message d’authentification
<a name="enable-auth-message"></a>

Pour activer le message d’authentification, ajoutez la variable d’extrait des paramètres d’authentification à la fin de votre extrait de code. Pour plus d’informations sur l’ajout de variables d’extrait, consultez [Champs d’extrait de widget pris en charge et personnalisables dans Amazon Connect](supported-snippet-fields.md). Le code suivant est un exemple d’extrait des paramètres d’authentification que vous devez ajouter.

```
amazon_connect('authenticationParameters', { 
    redirectUri: 'your_redirect_url', // https://example.com 
    identityProvider: 'your_identity_provider_name' //optional
 });
```

Où :
+ `redirectUri` est l’URI de redirection que vous avez configuré dans votre fournisseur d’identité et Amazon Cognito. C’est là que votre client est automatiquement redirigé après s’être connecté. Sur cette page, vous pouvez vérifier les paramètres de l'URL et s'il existe un code et un état, vous pouvez appeler l'[UpdateParticipantAuthentication](https://docs.aws.amazon.com/connect/latest/APIReference/API_UpdateParticipantAuthentication.html)API avec ces valeurs. Une fois l’appel d’API terminé, fermez la fenêtre contextuelle. Le client est renvoyé à l’expérience de chat.
+ `identityProvider` est le nom du fournisseur d’identité que vous avez configuré dans Amazon Cognito. Ce champ est facultatif. Si une valeur est fournie, le lien de connexion dirige automatiquement le client vers la page de connexion du fournisseur d’identité plutôt que vers la page de connexion gérée par Amazon Cognito où il devra sélectionner un fournisseur d’identité à utiliser pour se connecter.

 Lorsque le flux atteint le bloc [Authentifier le client](authenticate-customer.md), vous pouvez enregistrer un rappel et stocker l’état localement pour le valider dans l’URI de redirection, comme illustré dans l’exemple d’extrait de code suivant :

```
amazon_connect('registerCallback', {
       'AUTHENTICATION_INITIATED' : (eventName, data) => {
            console.log(data.state)
        },
      });
```

Après avoir activé l’authentification des clients, ajoutez un bloc [Authentifier le client](authenticate-customer.md) à votre flux. Ce bloc authentifie les contacts du chat pendant le flux et les achemine vers des chemins spécifiques en fonction du résultat de l’authentification.

# Authentification préalable au chat à l'aide de l'API Amazon Connect StartChatContact
<a name="pre-chat-auth"></a>

Les clients qui s’authentifient sur votre site Web ou votre application mobile avant de démarrer une session de chat peuvent être reconnus comme authentifiés lorsqu’une session de chat est lancée. Vous pouvez le faire à l'aide de l'[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API.

Une fois qu'un client authentifié a entamé une discussion, définissez son statut à l'aide des paramètres de l'[StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html)API, comme indiqué dans l'extrait de code suivant :

```
"SegmentAttributes": {
    "connect:CustomerAuthentication" : { 
        "ValueMap": {
            "Status": {
                "ValueString": "AUTHENTICATED"
            }
        }
    },
    "CustomerId": "12345"
```

`CustomerId` est un champ facultatif permettant d’identifier le client. Il peut s’agir d’un identifiant de la fonctionnalité Profils des clients Amazon Connect ou d’un identifiant personnalisé provenant d’un système externe, tel qu’un CRM.

# Activer le streaming de messages pour le chat alimenté par l'IA
<a name="message-streaming-ai-chat"></a>

Amazon Connect prend en charge le streaming de messages pour les interactions par chat basées sur l'IA. Les réponses des agents d'intelligence artificielle apparaissent progressivement au fur et à mesure qu'elles sont générées, ce qui améliore l'expérience client lors des conversations.

Voici les options d'intégration, ainsi que les caractéristiques de chaque option :
+ Agents Amazon Connect
  + Élimine les limites de délai d'Amazon Lex
  + Fournit des messages d'expédition pendant le traitement (tels que « Un moment pendant que je passe en revue votre compte »)
  + Affiche les réponses partielles avec du texte progressif (bulle de texte croissante)
+ Bots tiers via Amazon Lex ou Lambda
  + Élimine les limites de délai d'Amazon Lex
  + Comportement de réponse standard du bot

Les instances créées à partir de décembre 2025 sont automatiquement activées dans cette fonctionnalité. Pour les instances existantes, vous devez activer le streaming des messages manuellement à l'aide de l'API ou via la console.

## Activer le streaming des messages à l'aide de l'API
<a name="message-streaming-enable-api"></a>

Utilisez l'[UpdateInstanceAttribute](https://docs.aws.amazon.com/connect/latest/APIReference/API_UpdateInstanceAttribute.html)API pour activer le streaming des messages. Définissez l'attribut `MESSAGE_STREAMING` sur `true`.

```
aws connect update-instance-attribute \
  --instance-id your-instance-id \
  --attribute-type MESSAGE_STREAMING \
  --value true
```

Pour vous désinscrire, définissez l'attribut sur`false`.

## Activer le streaming de messages à l'aide de la console
<a name="message-streaming-enable-console"></a>

Pour les instances nouvellement créées, le streaming des messages est activé par défaut.

Pour les instances existantes :

1. Ouvrez la console Amazon Connect et choisissez votre instance.

1. Dans le volet de navigation, choisissez **Flows** > **Amazon Lex bots**.

1. Sous **Configuration des robots Lex**, sélectionnez **Activer le streaming des messages dans Amazon Connect**.

**Note**  
Lorsque vous activez le streaming de messages à l'aide de la console, l'`lex:RecognizeMessageAsync`autorisation requise est automatiquement ajoutée à la politique basée sur les ressources de l'alias du bot. Lorsque vous utilisez l'API, vous devez ajouter cette autorisation manuellement.

![\[Activez l'option de diffusion des messages dans la console Amazon Connect.\]](http://docs.aws.amazon.com/fr_fr/connect/latest/adminguide/images/message-streaming-ai-chat-enablement.png)


## Mettre à jour les autorisations du robot Lex
<a name="message-streaming-lex-permissions"></a>

Une fois le streaming des messages activé, Amazon Connect a besoin d'une autorisation pour appeler l'API Amazon Lex :

```
lex:RecognizeMessageAsync
```

Vous devez mettre à jour la politique basée sur les ressources pour chaque alias de bot Amazon Lex utilisé par l'instance Amazon Connect.

### Quand mettre à jour la politique basée sur les ressources du bot
<a name="message-streaming-when-to-update"></a>
+ **Nouvelles instances** — Tout alias de bot Amazon Lex nouvellement associé aura `lex:RecognizeMessageAsync` sa politique d'alias par défaut.
+ **Instances existantes avec robots existants** — Si l'instance utilisait auparavant Amazon Lex et que vous activez maintenant le streaming de messages, vous devez mettre à jour la politique basée sur les ressources pour tous les alias de bot Amazon Lex associés afin d'inclure la nouvelle autorisation.

### Exemple d'extrait de code pour la politique basée sur les ressources de l'alias du robot Lex
<a name="message-streaming-rbp-example"></a>

```
{
  "Version": "2012-10-17",		 	 	 
  "Statement": [
    {
      "Sid": "connect-us-west-2-MYINSTANCEID",
      "Effect": "Allow",
      "Principal": {
        "Service": "connect.amazonaws.com"
      },
      "Action": [
        "lex:RecognizeMessageAsync",
        "lex:RecognizeText",
        "lex:StartConversation
      ],
      "Resource": "arn:aws:lex:us-west-2:123456789012:bot-alias/MYBOT/MYBOTALIAS",
      "Condition": {
        "StringEquals": {
          "AWS:SourceAccount": "123456789012"
        },
        "ArnEquals": {
          "AWS:SourceArn": "arn:aws:connect:us-west-2:123456789012:instance/MYINSTANCEID"
        }
      }
    }
  ]
}
```

Vous pouvez ajouter cette autorisation en appelant l'[UpdateResourcePolicy](https://docs.aws.amazon.com/lexv2/latest/APIReference/API_UpdateResourcePolicy.html)API Amazon Lex pour mettre à jour la politique basée sur les ressources d'alias de bot Amazon Lex afin d'inclure l'`lex:RecognizeMessageAsync`action relative à la ressource ARN de l'instance Amazon Connect.

**Important**  
Cette fonctionnalité ne permet actuellement pas de revenir au même bloc de [Bloc de flux dans Amazon Connect : Obtenir les données client](get-customer-input.md) flux ou de réutiliser un bot Amazon Lex portant le même alias dans un autre bloc de **saisie client Get**. Créez plutôt un nouveau bloc de **saisie Get customer** en utilisant un autre alias de bot Amazon Lex.

## Limites de délai
<a name="message-streaming-timeout-limits"></a>

Les délais d'expiration suivants s'appliquent aux expériences de chat :
+ **Expérience de chat standard : délai d'**expiration de 10 secondes
+ **Streaming de chat** — délai d'expiration de 60 secondes

# Permettre la rédaction de données sensibles et le traitement des messages en vol
<a name="redaction-message-processing"></a>

Amazon Connect prend en charge le traitement des messages qui intercepte et modifie les messages de chat avant qu'ils ne parviennent aux participants. Cette fonctionnalité permet la rédaction automatique des données sensibles et le traitement personnalisé des messages, aidant ainsi les entreprises à respecter les normes de conformité et de sécurité.

Voici les options de traitement, ainsi que les caractéristiques de chaque option :
+ Rédaction de données sensibles intégrée
  + Détecte et supprime automatiquement les numéros de carte de crédit, les numéros de sécurité sociale et autres informations personnelles
  + Supporte plusieurs langues, y compris les variantes anglaise, française, portugaise, allemande, italienne et espagnole. Pour obtenir une liste des langues prises en charge par la fonctionnalité d'expurgation de Contact Lens, consultez [Langues prises en charge par les fonctionnalités Amazon Connect](supported-languages.md).
  + Choisissez de supprimer les entités de données sensibles sélectionnées ou toutes
  + Remplacez par des espaces réservés génériques ([PII]) ou des espaces réservés spécifiques à l'entité ([NAME], [CREDIT\$1CARD])
+ Processeurs de messages personnalisés (via Lambda). Pour plus d'informations, consultez [Qu'est-ce que Lambda ?](https://docs.aws.amazon.com/lambda/latest/dg/welcome.html) dans le guide du *développeur AWS Lambda.*
  + Intégrez des services tiers pour la traduction linguistique
  + Appliquer le filtrage des grossièretés
  + Transformez les messages à l'aide AI/LLM de services
  + Implémenter des modifications de messages spécifiques à l'entreprise

Pour configurer le traitement des messages, définissez les règles de rédaction dans le bloc **Définir le comportement d'enregistrement et d'analyse**. Pour de plus amples informations, veuillez consulter [Activation de l’expurgation de données sensibles](enable-analytics.md#enable-redaction). Vous pouvez également spécifier une fonction Lambda pour un traitement personnalisé.

Votre processeur Lambda personnalisé prendra en compte un JSON d'entrée au format suivant :

```
{
  "version": "1.0",
  "instanceId": "string",
  "associatedResourceArn": "string",
  "chatContent": {
    "absoluteTime": "string",
    "content": "string",
    "contentType": "string",
    "id": "string",
    "participantId": "string",
    "displayName": "string",
    "participantRole": "string",
    "initialContactId": "string",
    "contactId": "string"
  }
}
```

Et produisez un JSON au format suivant :

```
{
  "status": "string", // "PROCESSED"|"APPROVED"|"FAILED"|"REJECTED"
  "result": {
    "processedChatContent": {
      "content": "string",
      "contentType": "string" // "text/plain"|"text/markdown"|"application/json"
    }
  }
}
```

Le contenu du chat traité remplacera le message original lorsqu'il sera publié pour les participants au chat.