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

Date de la dernière mise à jour : 17/01/2020

Lorsque mes clients appellent mon centre de contact Amazon Connect, je souhaite que leurs attributs de contact soient visibles par mes agents. Comment puis-je procéder ?

Brève description

Utilisez une fenêtre contextuelle qui affiche à vos agents les attributs de contact de l'appelant dans le panneau de configuration des contacts (CCP) Amazon Connect. Les fenêtres contextuelles ne sont pas directement disponibles dans le CCP de l'instance Amazon Connect. En revanche, vous pouvez utiliser l'API Amazon Connect Streams pour intégrer le CCP dans une application web personnalisée. Pour plus d'informations, consultez le référentiel Amazon Connect Streams sur GitHub.

Suivez ces instructions pour concevoir un flux de contacts qui définit les attributs de contact pendant l’acheminement des appels. Créez ensuite un exemple d'application web à l'aide de l'exemple de code fourni. Pour cet exemple de configuration, vous pouvez coder en dur les valeurs d'attribut de contact aux fins de test. Pour une configuration plus avancée, vous pouvez récupérer les valeurs des attributs de contact en utilisant AWS Lambda pour rechercher des données correspondantes dans une base de données Amazon DynamoDB d’informations client.

Pour plus d'informations, consultez Utilisation d’attributs de contact dans le CCP et Concepts des attributs de contact. Pour un autre exemple de configuration, consultez Afficher une fenêtre contextuelle externe avec Amazon Connect sur le blog du centre de contact AWS.

Solution

Créer ou mettre à jour un flux de contacts

  1. Dans la console Amazon Connect, sous Access URL (URL d'accès), sélectionnez l'URL d'accès de l'instance.
  2. Connectez-vous à votre instance à l'aide du compte d'administrateur.
  3. Dans la barre de navigation de gauche, maintenez le curseur sur Routing (Routage), puis sélectionnez Contact flows (Flux de contacts).
  4. Sous Contact flows (Flux de contacts), choisissez un modèle ou un flux de contacts existant que vous souhaitez mettre à jour ou choisissez Create contact flow (Créer un flux de contacts) pour créer un flux de contacts de toutes pièces. Pour plus d'informations, consultez Création d'un flux de contacts.
    Remarque : vous pouvez utiliser le modèle exemple de note pour fenêtre contextuelle, mais il n'est pas indispensable pour configurer une fenêtre contextuelle.
  5. Dans le concepteur de flux de contacts, pour Enter a name, saisissez un nom pour le flux de contacts. (Par exemple, Attributs de contact pour la fenêtre contextuelle.)
  6. Choisissez Save (Enregistrer).

Pour plus d'informations, consultez Créer des flux de contacts Amazon Connect.

Ajouter un bloc Set contact attributes (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.

  1. Dans le concepteur de flux de contacts, choisissez Set (Définir), puis faites glisser un bloc Set contact attributes (Définir des attributs de contact) sur le canevas.
  2. Sélectionnez le titre du bloc Set contact attributes (Définir des attributs de contact). Le menu de configuration du bloc s'ouvre.
  3. Sous Attribute to save, (Attribut à enregistrer), choisissez Use text, (Utiliser le texte), puis effectuez les opérations suivantes :
    Pour Destination key (Clé de destination), saisissez un nom pour l'attribut du prénom, par exemple Prenom.
    Pour Value (Valeur), saisissez un exemple de prénom pour les tests. Par exemple, Alex.
  4. Choisissez Add another attribute (Ajouter un autre attribut).
  5. Dans le nouvel attribut, choisissez Use text (Utiliser le texte), puis effectuez les opérations suivantes :
    Pour Destination key (Clé de destination), saisissez un nom pour l'attribut du numéro de téléphone, par exemple numTel.
    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 le texte), puis effectuez les opérations suivantes :
    Pour Destination key (Clé de destination), saisissez un nom pour l'attribut du compte, par exemple numCompte.
    Pour Value (Valeur), saisissez un exemple de numéro de compte pour les tests. Par exemple, 9876543210.
  8. Choisissez Save (Enregistrer).

Configurer des transferts de contacts

Ajoutez un bloc Set working queue (Définir une file d'attente active) et un bloc Transfer to queue (Transférer vers la file d'attente). Pour plus d'informations, consultez Configurer des transferts de contacts.

Connecter les blocs

Dans le concepteur de flux de contacts, faites glisser les flèches de chaque bloc vers le bloc qui doit effectuer l'action suivante. Tous les connecteurs doivent être connectés à un bloc pour pouvoir publier le flux de contacts.

  • Pour chaque bloc, connectez Start (Début) ou Success (Succès) au bloc suivant dans l'ordre indiqué ci-dessous :
    Point d'entrée > Définir les attributs de contact > Définir une file d'attente opérationnelle > Transférer vers la file d'attente
  • Pour chaque bloc, connectez Error (Erreur) et At capacity (À la capacité) au bloc Disconnect / hang up (Déconnecter/Raccrocher).

Enregistrer et publier le flux de contacts

  1. Choisissez Save (Enregistrer).
  2. Dans la boîte de dialogue Save flow (Enregistrer le flux), choisissez Save (Enregistrer).
  3. Choisissez « Publish » (Publier).
  4. Dans la boîte de dialogue Publish (Publier), choisissez Publish (Publier).

Configurer le CCP dans une application web personnalisée

Intégrez le CCP Amazon Connect dans une application web personnalisée à l'aide de l'API Streams. Pour plus d'informations sur la configuration de l'API Streams avec une page web, consultez la documentation Amazon Connect Streams sur GitHub.

Cet exemple de code intègre le CCP dans un fichier HTML de base hébergé en tant que site web statique sur Amazon Simple Storage Service (Amazon S3). Il affiche une fenêtre contextuelle lorsqu'un agent se connecte à un appelant. Vous pouvez également faire en sorte que la fenêtre contextuelle s’affiche lorsqu'un appel est accepté ou quand il est acheminé vers un agent.

Remarque : modifiez ce code en fonction des besoins pour faire référence aux attributs de contact tels que vous les avez définis dans le bloc Set contact attributes (Définir les attributs de contact) du flux de contacts. 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 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["name"]["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>

Résolution des problèmes

Pour résoudre les problèmes liés à l'API Streams, utilisez des instructions console.log() dans le script. Lorsque vous êtes sur votre page web, affichez la sortie de journalisation dans la console des outils de développement de votre navigateur web.