Comment afficher les attributs de contact de l'appelant dans une fenêtre contextuelle Amazon Connect ?

Dernière mise à jour : 17/08/2021

Je souhaite que les agents de mon centre de contact Amazon Connect puissent voir les attributs de contact des appels clients entrants. Comment puis-je procéder ?

Brève description

Utilisez une fenêtre contextuelle afin d'afficher à vos agents les attributs de contact de l'appelant dans le panneau de configuration des contacts (CCP) Amazon Connect.

Pour utiliser une fenêtre contextuelle dans Amazon Connect, vous devez utiliser l'API Amazon Connect Streams pour intégrer le CCP dans une application personnalisée. Les fenêtres contextuelles ne sont pas directement disponibles dans le CCP.

L'exemple de procédure de cet article montre comment afficher les attributs de contact de l'appelant dans le CCP en procédant comme suit :

Pour plus d'informations, consultez la section Utiliser les attributs de contact dans le CCP. Pour un autre exemple de configuration, consultez la section Afficher une fenêtre contextuelle externe avec Amazon Connect sur le blog du centre de contact AWS.

Résolution

Remarque : pour cet exemple de configuration, vous pouvez coder en dur les valeurs d'attributs de contact en tant que test. Pour une configuration plus avancée, vous pouvez récupérer les valeurs des attributs de contact en utilisant AWS Lambda pour extraire des informations client d'une base de données Amazon DynamoDB. Pour accéder à un exemple similaire, consultez la section Comment configurer des extensions pour les appels d'agent à agent dans mon centre de contact Amazon Connect ?

Créer ou mettre à jour un flux de contact pour définir des attributs de contact pendant le routage des appels

Créer un nouveau flux de contact ou ouvrir un flux de contacts existant dans le concepteur de flux de contact

1.    Ouvrez la console Amazon Connect.

2.    Sous Access URL(URL d'accès), choisissez l'URL d'accès de votre instance Amazon Connect.

3.    Connectez-vous à votre instance en utilisant le compte administrateur.

4.    Dans le panneau de navigation de gauche, maintenez le curseur sur Routing. (Routage) Ensuite, cliquez sur Contact flows(Flux de contact).

5.    Sous Contact flows (Flux de contact), choisissez un modèle ou un flux de contact existant que vous souhaitez mettre à jour.
Remarque : vous pouvez utiliser le modèle exemple de note pour fenêtre contextuelle, mais ce n'est pas indispensable pour configurer une fenêtre contextuelle dans Amazon Connect.

-ou-

Pour concevoir un flux de contact personnalisé, choisissez Create contact flow (Créer un flux de contact).

6.    Dans le concepteur de flux de contact, saisissez un nom pour le flux de contact dans le champ Saisir un nom. Par exemple, Attributs de contact pour fenêtre contextuelle.

7.    Cliquez sur Save (Enregistrer).

Pour plus d'informations, consultez la section Créer un flux de contact.

Ajouter un bloc Définir des attributs de contact

Important : les attributs de contact que vous définissez dans ce bloc doivent être référencés dans le fichier HTML que vous utilisez pour votre application web personnalisée.

Pour stocker des paires clé-valeur en tant qu'attributs de contact, utilisez un bloc Définir des attributs de contact.

1.    Dans le concepteur de flux de contact, cliquez sur Set (Définir). Puis, faites glisser un bloc Définir des attributs de contact et déposez-le sur le canevas.

2.    Choisissez le titre du bloc (Définir des attributs de contact). Le menu des paramètres du bloc s'ouvre.

3.    Sous Attribute to save (Attribut à enregistrer), choisissez Use text (Utiliser du texte). Puis, procédez comme suit :
Pour Destination key (Clé de destination), saisissez un nom pour l'attribut du prénom, par exemple Prénom.
Pour Value (Valeur), saisissez un exemple de prénom pour les tests. Par exemple, Alexa.

4.    Choisissez Add another attribute (Ajouter un autre attribut).

5.    Dans le nouvel attribut, choisissez Use text (Utiliser du texte). Puis, procédez comme suit :
Pour Destination key (Clé de destination), saisissez un nom pour l'attribut du numéro de téléphone. Par exemple : phoneNumber.
Pour Value (Valeur), saisissez un exemple de numéro de téléphone pour les tests. Par exemple : 123-456-7890.

6.    Choisissez Add another attribute (Ajouter un autre attribut).

7.    Dans le nouvel attribut, choisissez Use text (Utiliser du texte). Puis, procédez comme suit :
Pour Destination key (Clé de destination), saisissez un nom pour l'attribut du numéro de compte. Par exemple : numéroCompte.
Pour Value (Valeur), saisissez un exemple de numéro de compte pour les tests. Par exemple : 9876543210.

8.    Cliquez sur Save (Enregistrer).

Ajouter un bloc Transférer vers la file d'attente

Pour mettre fin au flux de contact actuel et placer le client dans une file d'attente, ajoutez un bloc Transférer vers la file d'attente.

Pour plus d'informations, consultez la section Configuration des transferts de contact.

Ajouter un bloc Définir une file d'attente opérationnelle

Pour spécifier la file d'attente à utiliser lorsque le bloc Transférer vers la file d'attente est appelé, ajoutez un bloc Définir une file d'attente opérationnelle.

Pour plus d'informations, consultez la section Configuration des transferts de contact.

Connecter les blocs

Important : tous les connecteurs doivent être connectés à un bloc avant de pouvoir publier le flux de contact.

Dans le concepteur de flux de contact, faites glisser les flèches de chaque bloc vers le bloc dans lequel vous souhaitez effectuer l'action suivante, en procédant comme suit :

1.    Pour chaque bloc, connectez Start(Démarrer) ou Success (Succès) au bloc suivant dans cet ordre :
Entry point (Point d'entrée) > Set contact attributes (Définir des attributs de contact) > Set working queue (Définir une file d'attente opérationnelle) > Transfer to queue (Transférer vers la file d'attente)

2.    Pour chaque bloc, connectez Error(Erreur) et À capacité au bloc Déconnecter/Raccrocher.

Enregistrer et publier le flux de contact

1.    Cliquez sur Save (Enregistrer).

2.    Dans la boîte de dialogue Save flow (Enregistrer le flux), cliquez sur Save (Enregistrer).

3.    Cliquez sur Publish (Publier).

4.    Dans la boîte de dialogue Publish (Publier), cliquez sur Publish (Publier).

Configuration du CCP de votre instance Amazon Connect dans une application web personnalisée

Pour intégrer le CCP de votre instance dans une application web personnalisée, suivez les instructions de la documentation Amazon Connect Streams sur GitHub.

Exemple de code API Amazon Connect Streams affichant une fenêtre contextuelle lorsqu'un agent se connecte à un appelant

L'exemple de code suivant intègre le CCP dans un fichier HTML de base hébergé en tant que site web statique sur Amazon Simple Notification Service (Amazon S3).

Important : modifiez ce code d'exemple en fonction des besoins pour faire référence aux attributs de contact nécessaires tels que vous les avez définis dans le bloc Définir des attributs de contact dans le flux de contact. Veillez également à remplacer bucketName par le nom de votre compartiment S3 et connectInstanceName par le nom de votre instance Amazon Connect. Pour plus d'informations, consultez les sections Accès à un compartiment et Lancement du CCP.

<!--Copyright 2019 Amazon.com, Inc. or its affiliates. All Rights Reserved.-->
<!--SPDX-License-Identifier: MIT-0-->

<html>
<head>
 <script src="http://bucketName.s3-website-us-east-1.amazonaws.com/amazon-connect-v1.1.1-2-g0b8509c.js"></script>
</head>
<body>
<h1> Amazon Connect </h1>
<h2> Screenpop Example </h1>
<div id="containerDiv" ></div>
<script>
connect.core.initCCP(containerDiv, {
   ccpUrl:        'https://connectInstanceName.awsapps.com/connect/ccp#/',        /*REQUIRED (*** has been replaced) */
   loginPopup:    true,          /*optional, default TRUE*/
   softphone:     {              /*optional*/
      allowFramedSoftphone: true
   }
});
connect.contact(function(contact) {

        contact.onIncoming(function(contact) {
        });

        contact.onRefresh(function(contact) {
        });

        contact.onAccepted(function(contact) {
        });

        contact.onEnded(function() {
        });

        contact.onConnected(function() {
                console.log(`onConnected(${contact.getContactId()})`);
                var attributeMap = contact.getAttributes();
                var name = JSON.stringify(attributeMap["firstName"]["value"]);
                var phone = JSON.stringify(attributeMap["phoneNumber"]["value"]);
                var account = JSON.stringify(attributeMap["accountNumber"]["value"]);
                console.log(name);
                console.log(phone);
                console.log(account);
                window.alert("Customer's name: " + name + "\nCustomer's phone #: " + phone + "\nCustomer's account #: " + account);

        });
});
</script>
</body>
</html>

Remarque : vous pouvez également configurer la fenêtre contextuelle afin qu'elle s’affiche lorsqu'un appel est accepté ou quand il est acheminé vers un agent.

Pour résoudre les problèmes liés à l'API Amazon Connect Streams

Utilisez les instructions console.log () dans le script. Lorsque vous êtes sur votre page web, affichez la sortie de journalisation dans la console des outils pour développeur de votre navigateur web.

Pour plus d'informations, consultez la section console.log () sur la page MDN Web Docs.