Intégration vocale Salesforce avec Twilio Flex

Architecture pour l'intégration d'Agent Assist et de Twilio Flex à Salesforce

Cette intégration vocale utilise l' intégration Twilio Open CTI pour intégrer un centre d'appels Twilio Flex à votre instance Salesforce.

Agent Assist utilise le flux multimédia de l'appel Twilio Flex pour fournir des suggestions à vos agents dans la console de service Salesforce Lightning.

Avant de commencer

Pour intégrer les modules d'interface utilisateur Agent Assist à Salesforce, vous devez avoir accès aux ressources suivantes :

  • Node.js

    Suivez les instructions d'installation recommandées pour votre système d'exploitation.

  • CLI Salesforce

    Suivez les instructions d'installation recommandées pour votre système d'exploitation.

  • Google Cloud CLI

    Installez la commande gcloud comme indiqué et authentifiez-vous à l'aide de gcloud auth login.

  • Salesforce

    Connectez-vous à l'URL de votre instance ou à la page de connexion Salesforce et notez les éléments suivants :

    • Votre URL Mon domaine Salesforce. Pour trouver l'URL Mon domaine , procédez comme suit :
      1. Accédez à la barre de menu > menu Configuration.
      2. Cliquez sur Configuration.
      3. Dans la zone Quick Find (Recherche rapide), saisissez My Domain (Mon domaine). Le nom de domaine est au format suivant : MY-DOMAIN-NAME.develop.my.salesforce.com.
    • L'ID de votre organisation Salesforce. Pour trouver l'ID de l'organisation, procédez comme suit :
      1. Accédez à la barre de menu > menu Configuration.
      2. Cliquez sur Configuration.
      3. Dans la zone Quick Find (Recherche rapide), saisissez Company Information (Informations sur l'entreprise). Remarque : Ces étapes d'intégration n'ont été testées qu'avec Salesforce Developer Edition. Des différences peuvent apparaître dans les licences de fonctionnalités et l'interface Salesforce si vous utilisez une autre édition.

  • Backend d'intégration Agent Assist

    1. Suivez les instructions pour configurer l'intégration.
    2. Avant d'exécuter le script de déploiement, configurez les variables d'environnement suivantes avec deploy.sh ou dans un fichier .env à la racine du projet :
      • AUTH_OPTION : définissez cette valeur sur SalesforceLWC.
      • SALESFORCE_DOMAIN: nom de domaine semblable à YOUR_SUBDOMAIN.develop.lightning.force.com. Vous avez noté cette valeur dans les prérequis Salesforce. Notez que vous ne devez pas inclure https://.
      • SALESFORCE_ORGANIZATION_ID: vous avez noté cette valeur dans les prérequis Salesforce.
      • APP_AUTH_OPTION : définissez cette valeur sur Twilio.
      • TWILIO_ACCOUNT_SID : définissez cette valeur sur votre SID de compte Twilio.

Étape 1 : Configurer Twilio Flex

Twilio Flex sert de softphone dans cette intégration. Vous pouvez vous connecter à la console Twilio pour configurer un compte Flex. Consultez la page de configuration de Twilio pour obtenir des instructions détaillées sur la création d'un compte Flex.

Installer le module complémentaire du connecteur SIPREC

Le module complémentaire du connecteur SIPREC permet à votre compte Twilio Flex de créer des forks SIPREC des flux multimédias d'appels vocaux vers Agent Assist. Pour installer le module complémentaire du connecteur SIPREC, procédez comme suit.

  1. Accédez à Twilio Home > Marketplace > Catalog > Twilio > Siprec Connector.
  2. Cliquez sur Install (Installer) > cochez la case Terms and conditions acknowledgment (Accusé de réception des conditions générales) > Install (Installer).
  3. Dans l'onglet Configure (Configurer), configurez le plug-in avec les informations suivantes :
    • Unique Name (Nom unique) : SipRec1
    • Session Recording Server (Serveur d'enregistrement de session) : 
      sip:+<GTP-provisioned-phone-number>@216.239.36.145:5672;transport=tls;secure=true;edge=umatilla
    • Pour en savoir plus sur le provisionnement d'un numéro GTP, consultez la documentation sur l'intégration de la téléphonie. Vous pouvez ignorer les étapes de configuration et de validation du SBC, car elles sont terminées pour le connecteur Twilio Siprec.
  4. Accédez à Twilio Home > Functions and Assets (Fonctions et éléments).
    • Si Functions and Assets (Fonctions et éléments) n'est pas visible dans la barre latérale, épinglez-le depuis Explore Products (Explorer les produits).
  5. Cliquez sur Create Service (Créer un service).
  6. Nommez le nouveau service ui-connector-auth.
  7. Dans l'éditeur qui s'affiche, cliquez sur Add + (Ajouter +) > Add Function (Ajouter une fonction).
  8. Nommez la fonction conversation-name.
  9. Cliquez sur et définissez la visibilité de la fonction sur Public.
  10. Copiez et collez l'intégralité du contenu de ui-connector-auth.js du dépôt GitHub dans l'éditeur.
  11. Cliquez sur Save (Enregistrer).
  12. Cliquez sur Deploy All (Tout déployer).

Configurer l'IVR avec Flex Studio

L'IVR consiste à configurer un flux d'appels programmatique avec Twilio Studio pour créer le fork SIPREC du flux multimédia vers Agent Assist. Il effectue également une requête HTTP POST pour partager le numéro de téléphone et l'ID de conversation avec Agent Assist. Pour configurer l'IVR avec Flex Studio, procédez comme suit.

  1. Accédez à la console Twilio.
  2. Cliquez sur Develop (Développer) > Phone Numbers (Numéros de téléphone) > Manage (Gérer) > Active Numbers (Numéros actifs). Le tableau doit comporter une ligne avec le numéro Twilio par défaut provisionné pour votre compte Flex.
  3. Dans la section Voice - Studio Workflow (Voix – Workflow Studio), cliquez sur Voice IVR (IVR vocal).
  4. Faites glisser un widget Make HTTP Request (Effectuer une requête HTTP) dans le flux.
  5. Déconnectez Incoming Call (Appel entrant) de l'entrée du widget SendCallToAgent.
  6. Connectez Incoming Call (Appel entrant) à l'entrée du widget Make HTTP Request (Effectuer une requête HTTP).
  7. Configurez le widget Make HTTP Request (Effectuer une requête HTTP) avec les informations suivantes :
    • Widget Name (Nom du widget) : register_twilio
    • Request Method (Méthode de requête) : POST
    • Request URL (URL de la requête) : <your-ui-connector-cloud-run-url>.run.app/register-app
    • Content type (Type de contenu) : Application/JSON
    • Request body (Corps de la requête) : 
      {
"accountSid": "<yourTwilioAccountSid>",
"authToken": "<yourTwilioAccountAuthToken>"
}
  8. Faites glisser un widget Run Function (Exécuter une fonction) dans le flux.
  9. Connectez les sorties Success (Réussite) et Fail (Échec) du widget register_twilio à l'entrée du widget Run Function (Exécuter une fonction).
  10. Créez un widget avec les informations suivantes :
    • Widget Name (Nom du widget) : conversation_name
    • Service: ui-connector-auth
    • Environment (Environnement) : ui
    • Function (Fonction) : conversation-name
    • Function Parameters (Paramètres de la fonction) :
      • token: 
        {{ widgets.register_twilio.parsed.token }}
      • endpoint (Point de terminaison) <your-ui-connector-cloud-run-url>.run.app/conversation-name
      • phone (Téléphone) : 
        {{ trigger.call.From | replace_first:'+','' }}
      • conversationName (Nom de la conversation) : 
        projects/<project>/locations/<location>/conversations/TW-{{ trigger.call.From | replace_first:'+','' }}-{{ trigger.call.CallSid }}
  11. Faites glisser un widget Fork Stream (Fork de flux) de la barre latérale vers le flux.
  12. Connectez les sorties Success (Réussite) et Fail (Échec) du widget Make HTTP Request (Effectuer une requête HTTP) à l'entrée du widget Fork Stream (Fork de flux).
  13. Connectez le nœud Next (Suivant) du widget Fork Stream (Fork de flux) au widget SendCallToAgent.

  14. Configurez le widget Fork Stream (Fork de flux) comme suit :

    • Stream Action (Action de flux) : Start (Démarrer)
    • Stream Type (Type de flux) : Siprec
    • Connector Name (Nom du connecteur) : Siprec1
    • Tracks (Pistes) : Both Tracks (Les deux pistes)

    • Stream Parameters (Paramètres de flux) :

      • Clé : conversation

      • Value (Valeur) :

        projects/<gcp-project-id>/conversations/TW-{{trigger.call.From | replace_first:'+','' }}-{{trigger.call.CallSid}}

  15. Cliquez sur Save (Enregistrer) > Publish (Publier).

Détails du compte

Suivez cette étape pour collecter les informations de votre compte Twilio Flex. Vous en aurez besoin pour configurer le CTI Flex dans Salesforce ultérieurement.

  1. Accédez à Twilio Home > Tableau de bord du compte, puis notez les informations suivantes :
    • SID de compte
    • Mon numéro de téléphone Twilio

Étape 2 : Configurer votre projet de développement Salesforce

Pour commencer à intégrer les modules d'interface utilisateur Agent Assist, procédez comme suit.

  1. Exécutez le code suivant pour cloner le dépôt d'intégration Agent Assist et ouvrir votre projet :

    git clone https://github.com/GoogleCloudPlatform/agent-assist-integrations
cd salesforce/aa-lwc

  2. Exécutez les commandes suivantes pour télécharger les fichiers JavaScript des modules d'interface utilisateur que vous déployez ultérieurement en tant que ressources statiques. Salesforce nécessite des ressources statiques pour charger JavaScript tiers.

    npm run generate-static-resources
npm install

Étape 3 : Configurer votre environnement Salesforce

Vous pouvez intégrer les modules d'interface utilisateur Agent Assist dans un environnement spécifique, tel que la production ou le développement. Salesforce appelle ces environnements des organisations.

Configurer votre organisation avec la CLI Salesforce

Pour configurer votre organisation pour l'intégration Agent Assist à l'aide de la CLI Salesforce, procédez comme suit.

  1. Exécutez le code suivant et authentifiez la CLI à l'aide des identifiants de connexion Salesforce que vous utilisez habituellement. 
    npm run login
  2. Exécutez le code suivant pour déployer le LWC dans l'organisation. 
    npm run deploy

Étape 4 : Créer une application cliente externe

Le LWC Salesforce utilise le flux OAuth 2.0 des identifiants client pour vous authentifier. Une application cliente externe active le flux des identifiants client. Utilisez la clé client et le code secret client de l'application pour configurer le LWC Salesforce afin d'authentifier les utilisateurs avec Salesforce.

  1. Accédez à la barre de menu > menu Configuration, puis cliquez sur Configuration. Dans la zone Quick Find (Recherche rapide), saisissez External Client App Manager (Gestionnaire d'applications clientes externes).
    1. Cliquez sur External Client App Manager (Gestionnaire d'applications clientes externes) > New External Client App (Nouvelle application cliente externe) > Create (Créer), puis saisissez les informations suivantes.
      • External Client App Name (Nom de l'application cliente externe) : lwc auth
      • API Name (Nom de l'API) : lwc_auth
      • Contact Email (Adresse e-mail du contact) : your_email@example.com
      • API (Enable OAuth Settings) (API (Activer les paramètres OAuth)) > Enable OAuth (Activer OAuth) : sélectionné
      • API (Enable OAuth Settings) (API (Activer les paramètres OAuth)) > Callback URL (URL de rappel) : https://login.salesforce.com/services/oauth2/callback
      • API (Enable OAuth Settings) > Selected OAuth Scopes (API (Activer les paramètres OAuth) > Champs d'application OAuth sélectionnés) : accéder au service d'URL d'identité
      • API (Enable OAuth Settings) > Enable Client Credentials Flow (API (Activer les paramètres OAuth) > Activer le flux des identifiants client) : sélectionné
    2. Cliquez sur Create (Créer).
  2. Accédez à la barre de menu > menu Configuration, puis cliquez sur Configuration. Dans la zone Quick Find (Recherche rapide), saisissez External Client App Manager (Gestionnaire d'applications clientes externes).
    1. Cliquez sur le nom de votre application cliente externe > Edit (Modifier).
    2. Accédez à OAuth Policies (Règles OAuth) > OAuth Flows and External Client App Enhancements (Flux OAuth et améliorations des applications clientes externes).
    3. Assurez-vous que l'option Enable Client Credentials Flow (Activer le flux des identifiants client) est sélectionnée.
    4. Dans le champ Run As (Exécuter en tant que), saisissez votre nom d'utilisateur de connexion.
    5. Cliquez sur Save (Enregistrer).
  3. Accédez à la barre de menu > menu Configuration, puis cliquez sur Configuration. Dans la zone Quick Find (Recherche rapide), saisissez External Client App Manager (Gestionnaire d'applications clientes externes).
    1. Cliquez sur le nom de votre application cliente externe > Edit (Modifier).
    2. Accédez à OAuth Settings (Paramètres OAuth) > App Settings (Paramètres de l'application) > Consumer Key and Secret (Clé client et code secret client).
    3. Saisissez le code de validation envoyé à votre adresse e-mail.
    4. Copiez la clé client et le code secret client dans un emplacement sécurisé. Vous en aurez besoin lors d'une étape ultérieure.

Établir des règles CORS et de sécurité du contenu

  1. Accédez à la barre de menu > menu Configuration, puis cliquez sur Configuration.
  2. Dans la zone Quick Find (Recherche rapide), saisissez CORS, puis cliquez sur Edit (Modifier).
    1. Sélectionnez Enable CORS for OAuth endpoints (Activer CORS pour les points de terminaison OAuth).
    2. Cliquez sur Save (Enregistrer).
  3. Accédez à la barre de menu > menu Configuration, puis cliquez sur Configuration.
  4. Dans la zone Quick Find (Recherche rapide), saisissez Trusted URLs (URL de confiance), puis cliquez sur New Trusted URL (Nouvelle URL de confiance).
  5. Saisissez les informations suivantes :
    • API Name (Nom de l'API) : ui_connector
    • URL : saisissez l'URL du point de terminaison du service Cloud Run du connecteur d'interface utilisateur que vous avez déployé avec votre backend d'intégration Agent Assist. Vous trouverez cette URL dans la console Cloud Run. Exemple : https://UI_CONNECTOR_SUBDOMAIN.GCP_REGION.run.app.
    • CSP Directives (Directives CSP) : sélectionnez toutes les cases à cocher.
    • Cliquez sur Save &New (Enregistrer et nouveau).
  6. Saisissez les informations suivantes :
    • API Name (Nom de l'API) : ui_connector_wss
    • URL : saisissez l'URL du point de terminaison du service Cloud Run du connecteur d'interface utilisateur que vous avez déployé avec votre backend d'intégration Agent Assist. Vous trouverez cette URL dans la console Cloud Run. Remplacez le protocole par wss pour le trafic WebSockets. Exemple : wss://UI_CONNECTOR_SUBDOMAIN.GCP_REGION.run.app.
    • CSP Directives (Directives CSP) : sélectionnez toutes les cases à cocher.
    • Cliquez sur Save &New (Enregistrer et nouveau).
  7. Saisissez les informations suivantes :
    • API Name (Nom de l'API) : salesforce_domain
    • URL : saisissez l'URL de votre domaine Salesforce au format suivant : https://YOUR_SUBDOMAIN.my.salesforce.com.
    • CSP Directives (Directives CSP) : sélectionnez toutes les cases à cocher.
    • Cliquez sur Save &New (Enregistrer et nouveau).
  8. Saisissez les informations suivantes :
    • API Name (Nom de l'API) : twilio_flex
    • URL: https://flex.twilio.com
    • CSP Directives (Directives CSP) : sélectionnez toutes les cases à cocher.
    • Cliquez sur Save (Enregistrer).

Étape 5 : Installer le plug-in CTI Twilio Flex

Salesforce fournit Salesforce Open CTI pour permettre l'intégration de softphones tiers à votre instance Salesforce.

Twilio Flex CTI utilise Salesforce Open CTI pour vous permettre d'utiliser Flex directement dans votre instance Salesforce. Suivez les instructions de Twilio pour configurer Twilio Flex CTI dans votre instance Salesforce.

Étape 6 : Installer le composant Web Lightning Salesforce

Pour ajouter le composant Web Lightning Salesforce à la page de contact où votre CTI Twilio Flex s’ouvre lorsqu’un nouvel appel arrive, procédez comme suit à l’aide de l’ éditeur Lightning Experience.

  1. Accédez à la console de service, puis sélectionnez Contacts.
  2. Sélectionnez un enregistrement de contact.
  3. Cliquez sur le menu "Configuration" > Edit Page (Modifier la page).
  4. Cliquez sur Template (Modèle) > Change (Modifier).
    1. Sélectionnez Header (En-tête) et Two Equal Regions (Deux régions égales).
    2. Cliquez sur Next (Suivant).
    3. Mappez chaque région à une nouvelle région.
    4. Cliquez sur Done (OK).
  5. Dans la barre latérale Components (Composants), déplacez agentAssistContainerModule vers la barre latérale. Remarque : Ce composant a été fourni par la commande npm deploy.
  6. Cliquez sur le composant que vous avez placé à l'étape précédente et remplissez les champs du formulaire comme suit pour ajouter les détails de configuration.
    • endpoint (Point de terminaison) : URL de votre connecteur d'interface utilisateur du backend d'intégration de l'agent, par exemple une URL de la console Cloud Run, comme https://UI_CONNECTOR_ENDPOINT.GCP_REGION.run.app :
    • channel (Canal) : indiquez que l'intégration concerne voice.
    • platform (Plate-forme) : indiquez que la plate-forme est twilio.
    • conversationProfile (Profil de conversation) : nom de ressource de votre profil de conversation Agent Assist (exemple : projects/GCP_PROJECT_ID/locations/GCP_REGION/conversationProfiles/CONVERSATION_PROFILE_ID)
    • consumerKey (Clé client) : clé client de l'application cliente externe à partir d'une étape précédente.
    • consumerSecret (Code secret client) : code secret client de l'application cliente externe à partir d'une étape précédente.
    • containerHeight (Hauteur du conteneur) : hauteur du conteneur Agent Assist.

Étape 7 : Tester l'intégration

Vous pouvez tester l'intégration vocale avec un appel test au centre d'appels Salesforce.

  1. Connectez-vous à Twilio Flex depuis votre console de service.
  2. Appelez votre numéro Twilio Flex. Vous l'avez noté à l'étape 1.
  3. Dans votre console de service, acceptez l'appel. L'écran doit ouvrir une page de contact nouvelle ou existante pour le numéro qui a appelé.
  4. S'il s'agit d'une nouvelle page de contact, enregistrez le contact. Lorsque la page de contact se charge, le composant Web Lightning Salesforce doit se charger dans la barre latérale.
  5. Testez les deux côtés de la conversation en vous assurant que les fonctionnalités d'Agent Assist fonctionnent comme vous les avez configurées.