Ajoutez le widget Amazon Connect à votre site Web pour accepter les contacts via le chat, les tâches, les e-mails et les appels Web

Les rubriques de cette section expliquent comment créer et personnaliser un widget de communication pour votre site Web. Vous allez créer un formulaire de contact qui détermine le comportement des contacts créés via votre widget, puis personnaliser l'apparence et les fonctionnalités du widget.

Étape 1 : créer un formulaire de contact pour votre widget

Au cours de cette étape, vous créez et personnalisez une vue qui détermine le comportement des contacts créés via votre widget.

1. Connectez-vous au site Web de l' Amazon Connect administrateur à l'adressehttps://instance name.my.connect.aws/. Dans l'onglet Routage, sélectionnez Flows.

2. En haut à gauche, cliquez sur Vues.

3. Sélectionnez Créer une vue.

4. Ici, vous pouvez configurer un formulaire de contact pour vos clients à l'aide du générateur sans code. Quelques conseils importants :

   • L'utilisation du composant Formulaire vous permettra de lier les entrées du formulaire à votre contact lors de la création. Les liens vers les formulaires vous permettront de recueillir les informations directement de toute personne interagissant avec votre widget et d'utiliser les informations incluses dans le formulaire lors de la création du contact.

   • Le composant Connect Action est l'élément le plus important du formulaire de création d'un contact. Ce composant doit être utilisé sans aucun autre composant de type bouton dans le formulaire.

   • Un seul composant Connect Action doit être présent pour utiliser le widget Afficher avec un formulaire de contact.

   • Trois options sont prises en charge ConnectActionType pour le composant Connect Action :

     • StartEmailContact

     • StartTaskContact

     • StartChatContact

     Email et Task peuvent tous deux être utilisés dans un formulaire de contact. Pour créer un formulaire préalable au chat pour les contacts du chat, voirAjoutez une interface utilisateur de chat à votre site Web hébergé par Amazon Connect.

   • Il existe de nombreuses options de style pour les composants View, ce qui vous permet de personnaliser le formulaire en fonction de votre environnement.

5. Une fois que vous avez ajouté un bouton Connect Action à votre formulaire, vous pouvez définir des valeurs pour les contacts créés par le formulaire en les liant aux options du bouton Connect Action. Les composants que vous souhaitez lier doivent avoir le même formulaire dans la vue que le bouton Connect Action.

   

   Les composants suivants sont pris en charge pour la liaison de formulaires :

   • Saisie du formulaire

   • Liste déroulante (désactivez la sélection multiple)

   • Sélecteur de date

   • Zone de texte

   • Sélecteur d'heure

6. Une fois que votre affichage est prêt, sélectionnez Publier.

Étape 2 : Personnalisez votre widget de communication

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

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

2. Sur la page des widgets de communication, choisissez Ajouter un widget de communication pour commencer à personnaliser l'expérience d'un nouveau widget de communication. Pour modifier, supprimer ou dupliquer un widget de communication existant, choisissez l'une des options de la colonne Actions.

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, sélectionnez Ajouter un formulaire de contact.

5. Sélectionnez la vue que vous avez configurée à l'étape précédente. Si aucun flux de contacts n'est défini pour le composant Connect Action de la vue, vous devez en définir un ici.

6. Cliquez sur Save and Continue.

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.

Note

L'aperçu n'affichera pas le formulaire de contact Afficher que vous avez créé. Seul le style de l'en-tête sera affiché.

Type d'affichage

Vous pouvez choisir entre deux types d'affichage pour les widgets du formulaire de contact :

• Le bouton d'action flottant vous permet d'épingler votre widget sous forme de bouton interactif dans le coin inférieur droit de la page Web

• L'intégration en ligne vous permet d'intégrer votre widget directement dans la page Web sans avoir à appuyer sur un bouton pour le charger

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.

Important

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.

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

• 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 Configuration des autorisations pour l'accès aux sites Web.

Étape 3 : Spécifiez les domaines du site Web sur lesquels vous souhaitez afficher le widget de communication

1. Entrez les domaines du site Web où vous souhaitez placer le widget de communication. Le widget se charge uniquement sur les sites Web que vous sélectionnez à cette étape.

   Choisissez Ajouter un domaine pour ajouter jusqu'à 50 domaines.

   

   Comportement de la liste des domaines autorisés :

   • Les sous-domaines sont automatiquement inclus. Par exemple, si vous autorisez exemple.com, tous ses sous-domaines (tels que sub.exemple.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 ou bloquer des sous-répertoires spécifiques.

   Important

   • Vérifiez que votre site Web URLs est valide et 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. Dans la section 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 contact. Cela vous permet de mieux contrôler l'établissement de nouveaux contacts, notamment de vérifier que les demandes 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 intégré du widget de communication qui vérifie la présence d'un jeton Web JSON (JWT) lorsqu'un contact est initié.

     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 contact initié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 Enregistrer.

Étape 4 : Confirmer et copier le code du widget de communication et les clés de sécurité

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 3, vous pouvez également copier les clés secrètes pour les créer.

Clé de sécurité

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.

Lorsque vos clients interagissent avec le widget de communication de votre site Web, celui-ci demande un JWT à votre serveur Web. Lorsque ce JWT est fourni, le widget l'inclut dans la demande de contact 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 contact vers les agents de votre centre de contact.

Spécificités du jeton Web JSON

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

  • iat : *pour Issued At Time (Émis à).

  • exp : *Expiration (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'une carte d'attributs. Pour plus d'informations SegmentAttributes , consultez l'StartChatContactAPI.

  • attributs (facultatif) : objet avec des paires string-to-string clé-valeur. Les attributs de contact doivent respecter les limites définies par l'StartChatContactAPI.

  • relatedContactId (facultatif) : chaîne avec un identifiant de contact valide. Ils relatedContactId doivent respecter les limites définies par l'StartChatContactAPI.

  • CustomerID (facultatif) : il peut s'agir d'un identifiant de profil client Amazon Connect ou d'un identifiant personnalisé provenant d'un système externe, tel qu'un CRM.

  * Pour plus d'informations sur le format de date, consultez le document Internet Engineering Task Force (IETF) : JSON Web Token (JWT), 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": "[e-mail]", "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

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

Note

Incluez le script du widget dans l'élément HTML qui doit afficher le widget lorsque vous utilisez le style intégré.

Lorsque votre site Web se charge, les clients voient d'abord l'icône du widget. Lorsqu'ils choisissent cette icône, le widget de communication s'ouvre et les clients peuvent entrer en contact avec 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.

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.