Ajoutez une interface utilisateur de chat à votre site Web hébergé par Amazon Connect

1. Connectez-vous au site Web d' Amazon Connect administration à l'adresse https ://instance name.my.connect.aws/. Choisissez Personnalisation du widget de communication.

   

2. 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.

   

3. 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.

4. Dans la section Options de communication, choisissez la manière dont vos clients peuvent interagir avec votre widget, puis choisissez Enregistrer et continuer. L’image suivante montre les options autorisant le chat et permettant aux clients de recevoir des messages.

   

5. 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.

   

Styles de boutons

1. Choisissez les couleurs de l’arrière-plan des boutons en saisissant des valeurs hexadécimales (codes couleur HTML).

2. 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.

2. 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 dans le Guide de l'utilisateur Amazon Simple Storage Service.

   2. 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 politique de compartiment 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.

2. • 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_SYSTÈ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.

3. 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).

4. 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).

5. Choisissez Save and continue (Enregistrer et continuer).

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.

   

   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.

2. 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.

   

   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é.

3. Choisissez Save (Enregistrer).