Integrazione vocale di Salesforce con Twilio Flex

Architettura per l'integrazione di Agent Assist e Twilio Flex con Salesforce

Questa integrazione vocale utilizza l' integrazione Twilio Open CTI per portare un call center Twilio Flex nella tua istanza Salesforce.

Agent Assist utilizza lo stream multimediale della chiamata Twilio Flex per fornire suggerimenti ai tuoi agenti nella console di servizio Salesforce Lightning.

Prima di iniziare

Per integrare i moduli dell'interfaccia utente di Agent Assist con Salesforce, devi avere accesso alle seguenti risorse:

  • Node.js

    Segui le istruzioni di installazione consigliate per il tuo sistema operativo.

  • Salesforce CLI

    Segui le istruzioni di installazione consigliate per il tuo sistema operativo.

  • Google Cloud CLI

    Installa il comando gcloud come indicato ed esegui l'autenticazione utilizzando gcloud auth login.

  • Salesforce

    Accedi all'URL dell'istanza o alla pagina di accesso di Salesforce e prendi nota di quanto segue:

    • L'URL del mio dominio di Salesforce. Per trovare l'URL del mio dominio:
        , segui questi passaggi:
      1. Vai alla barra dei menu > menu Configurazione.
      2. Fai clic su Configurazione.
      3. Nella casella Ricerca rapida, inserisci Il mio dominio. Il nome di dominio è nel seguente formato: MY-DOMAIN-NAME.develop.my.salesforce.com.
    • L'ID organizzazione Salesforce. Per trovare l'ID organizzazione, segui questi passaggi:
      1. Vai alla barra dei menu > menu Configurazione.
      2. Fai clic su Configurazione.
      3. Nella casella Ricerca rapida, inserisci Informazioni sull'azienda. Nota: questi passaggi di integrazione sono stati testati con Salesforce Developer Edition solo. Se utilizzi un'altra edizione, potrebbero verificarsi differenze nelle licenze delle funzionalità e nell'interfaccia di Salesforce.

  • Backend di integrazione di Agent Assist

    1. Segui le istruzioni per configurare l'integrazione.
    2. Prima di eseguire lo script di deployment, configura le seguenti variabili di ambiente con deploy.sh o in un file .env nella radice del progetto:
      • AUTH_OPTION: imposta questo valore su SalesforceLWC.
      • SALESFORCE_DOMAIN: un nome di dominio simile a YOUR_SUBDOMAIN.develop.lightning.force.com. Hai annotato questo valore nel prerequisito di Salesforce. Tieni presente che non devi includere https://.
      • SALESFORCE_ORGANIZATION_ID: hai annotato questo valore nel prerequisito di Salesforce.
      • APP_AUTH_OPTION: imposta questo valore su Twilio.
      • TWILIO_ACCOUNT_SID: imposta questo valore sul tuo SID account Twilio.

Passaggio 1: configura Twilio Flex

Twilio Flex funge da softphone in questa integrazione. Puoi accedere alla console Twilio per configurare un account Flex. Visita la pagina di configurazione di Twilio per istruzioni dettagliate su come creare un account Flex.

Installa il componente aggiuntivo del connettore SIPREC

Il componente aggiuntivo del connettore SIPREC consente al tuo account Twilio Flex di creare fork SIPREC degli stream multimediali delle chiamate vocali in Agent Assist. Segui questi passaggi per installare il componente aggiuntivo del connettore SIPREC.

  1. Vai a Twilio Home > Marketplace > Catalogo > Twilio > Connettore Siprec.
  2. Fai clic su Installa > la casella di controllo Accettazione dei Termini e condizioni > Installa.
  3. Nella scheda Configura, configura il plug-in con i seguenti dettagli:
    • Nome univoco: SipRec1
    • Server di registrazione delle sessioni: 
      sip:+<GTP-provisioned-phone-number>@216.239.36.145:5672;transport=tls;secure=true;edge=umatilla
    • Per ulteriori dettagli sul provisioning di un numero GTP, consulta la documentazione sull'integrazione della telefonia. Puoi ignorare i passaggi di configurazione e convalida SBC, perché sono completi per il connettore Twilio Siprec.
  4. Vai a Twilio Home > Funzioni e asset.
    • Se Funzioni e asset non è visibile nella barra laterale, aggiungilo da Esplora prodotti.
  5. Fai clic su Crea servizio.
  6. Assegna al nuovo servizio il nome ui-connector-auth.
  7. Nell'editor visualizzato, fai clic su Aggiungi + > Aggiungi funzione.
  8. Assegna alla funzione il nome conversation-name.
  9. Fai clic su , e imposta la visibilità della funzione su Pubblico.
  10. Copia e incolla l'intero contenuto di ui-connector-auth.js dal repository GitHub nell'editor.
  11. Fai clic su Salva.
  12. Fai clic su Esegui il deployment di tutto.

Configura l'IVR con Flex Studio

L'IVR consiste nella configurazione di un flusso di chiamate programmatico con Twilio Studio per creare il fork SIPREC dello stream multimediale in Agent Assist. Inoltre, esegue un post HTTP per condividere il numero di telefono e l'ID conversazione con Agent Assist. Segui questi passaggi per configurare l'IVR con Flex Studio.

  1. Vai alla console Twilio.
  2. Fai clic su Sviluppa > Numeri di telefono > Gestisci > Numeri attivi. Nella tabella dovrebbe essere presente una riga con il numero Twilio predefinito di cui è stato eseguito il provisioning per il tuo account Flex.
  3. Nella sezione Flusso di lavoro vocale - Studio, fai clic su IVR vocale.
  4. Trascina un widget Esegui richiesta HTTP nel flusso.
  5. Scollega Chiamata in arrivo dall'input del widget SendCallToAgent.
  6. Collega Chiamata in arrivo all'input del widget Esegui richiesta HTTP.
  7. Configura il widget Esegui richiesta HTTP con i seguenti dettagli:
    • Nome widget: register_twilio
    • Metodo richiesta: POST
    • URL richiesta: <your-ui-connector-cloud-run-url>.run.app/register-app
    • Tipo di contenuti: Application/JSON
    • Corpo della richiesta: 
      {
"accountSid": "<yourTwilioAccountSid>",
"authToken": "<yourTwilioAccountAuthToken>"
}
  8. Trascina un widget Esegui funzione nel flusso.
  9. Collega gli output Riuscito e Non riuscito del widget register_twilio all'input del widget Esegui funzione.
  10. Crea un widget con i seguenti dettagli:
    • Nome widget: conversation_name
    • Servizio: ui-connector-auth
    • Ambiente: ui
    • Funzione: conversation-name
    • Parametri funzione:
      • token: 
        {{ widgets.register_twilio.parsed.token }}
      • endpoint: <your-ui-connector-cloud-run-url>.run.app/conversation-name
      • phone: 
        {{ trigger.call.From | replace_first:'+','' }}
      • conversationName: 
        projects/<project>/locations/<location>/conversations/TW-{{ trigger.call.From | replace_first:'+','' }}-{{ trigger.call.CallSid }}
  11. Trascina un widget Fork Stream dalla barra laterale nel flusso.
  12. Collega gli output Riuscito e Non riuscito del widget Esegui richiesta HTTP all'input del widget Fork Stream.
  13. Collega il nodo Avanti del widget Fork Stream al widget SendCallToAgent.

  14. Configura il widget Fork Stream come segue:

    • Azione stream: Avvia
    • Tipo di stream: Siprec
    • Nome connettore: Siprec1
    • Tracce: entrambe le tracce

    • Parametri stream:

      • Chiave: conversation

      • Valore:

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

  15. Fai clic su Salva > Pubblica.

Dettagli account

Segui questo passaggio per raccogliere i dettagli del tuo account Twilio Flex. Queste informazioni ti serviranno per configurare Flex CTI in Salesforce in un secondo momento.

  1. Vai a Twilio Home > Dashboard account e annota le seguenti informazioni:
    • SID account
    • Il mio numero di telefono Twilio

Passaggio 2: configura il progetto di sviluppo Salesforce

Per iniziare a integrare i moduli dell'interfaccia utente di Agent Assist, segui questi passaggi.

  1. Esegui il seguente codice per clonare il repository di integrazione di Agent Assist e aprire il progetto:

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

  2. Esegui i seguenti comandi per scaricare i file JavaScript dei moduli dell'interfaccia utente che eseguirai il deployment in un secondo momento come Risorse statiche. Salesforce richiede risorse statiche per caricare JavaScript di terze parti.

    npm run generate-static-resources
npm install

Passaggio 3: configura l'ambiente Salesforce

Puoi integrare i moduli dell'interfaccia utente di Agent Assist in un ambiente specifico, ad esempio di produzione o di sviluppo. Salesforce chiama questi ambienti organizzazioni (org).

Configura l'organizzazione con Salesforce CLI

Segui questi passaggi per utilizzare Salesforce CLI per configurare la tua organizzazione per l'integrazione di Agent Assist.

  1. Esegui il seguente codice ed esegui l'autenticazione di CLI utilizzando i dettagli di accesso a Salesforce che utilizzi normalmente. 
    npm run login
  2. Esegui il seguente codice per eseguire il deployment di LWC nell'organizzazione. 
    npm run deploy

Passaggio 4: crea un'app client esterna

Salesforce LWC utilizza il flusso OAuth 2.0 delle credenziali client per eseguire l'autenticazione. Un' app client esterna abilita il flusso delle credenziali client. Utilizza la chiave utente e il secret utente dell'app per configurare Salesforce LWC in modo da autenticare gli utenti con Salesforce.

  1. Vai alla barra dei menu > menu Configurazione, quindi fai clic su Configurazione. Nella casella Ricerca rapida, inserisci Gestione app client esterna.
    1. Fai clic su Gestione app client esterna > Nuova app client esterna > Crea, quindi inserisci le seguenti informazioni.
      • Nome app client esterna: lwc auth
      • Nome API: lwc_auth
      • Email di contatto: your_email@example.com
      • API (Abilita impostazioni OAuth) > Abilita OAuth: selezionato
      • API (Abilita impostazioni OAuth) > URL di callback: https://login.salesforce.com/services/oauth2/callback
      • API (Abilita impostazioni OAuth) > Ambiti OAuth selezionati: accedi al servizio URL identità
      • API (Abilita impostazioni OAuth) > Abilita flusso credenziali client: selezionato
    2. Fai clic su Crea.
  2. Vai alla barra dei menu > menu Configurazione, quindi fai clic su Configurazione. Nella casella Ricerca rapida, inserisci Gestione app client esterna.
    1. Fai clic sul nome dell'app client esterna > Modifica.
    2. Vai a Policy OAuth > Flussi OAuth e miglioramenti dell'app client esterna.
    3. Assicurati che l'opzione Abilita flusso credenziali client sia selezionata.
    4. In Esegui come, inserisci il tuo nome utente di accesso.
    5. Fai clic su Salva.
  3. Vai alla barra dei menu > menu Configurazione, quindi fai clic su Configurazione. Nella casella Ricerca rapida, inserisci Gestione app client esterna.
    1. Fai clic sul nome dell'app client esterna > Modifica.
    2. Vai a Impostazioni OAuth > Impostazioni app > Chiave utente e secret.
    3. Inserisci il codice di verifica inviato al tuo indirizzo email.
    4. Copia la chiave utente e il secret utente in un luogo sicuro. Ti serviranno in un passaggio successivo.

Stabilisci policy CORS e di sicurezza dei contenuti

  1. Vai alla barra dei menu > menu Configurazione, quindi fai clic su Configurazione.
  2. Nella casella Ricerca rapida, inserisci CORS, quindi fai clic su Modifica.
    1. Seleziona Abilita CORS per gli endpoint OAuth.
    2. Fai clic su Salva.
  3. Vai alla barra dei menu > menu Configurazione, quindi fai clic su Configurazione.
  4. Nella casella Ricerca rapida, inserisci URL attendibili, quindi fai clic su Nuovo URL attendibile.
  5. Inserisci le seguenti informazioni:
    • Nome API: ui_connector
    • URL: inserisci l'URL dell'endpoint del servizio Cloud Run del connettore dell'interfaccia utente di cui hai eseguito il deployment con il backend di integrazione di Agent Assist. Puoi trovare questo URL nella console Cloud Run. Ad esempio: https://UI_CONNECTOR_SUBDOMAIN.GCP_REGION.run.app.
    • Direttive CSP: seleziona tutte le caselle di controllo.
    • Fai clic su Salva e nuovo.
  6. Inserisci le seguenti informazioni:
    • Nome API: ui_connector_wss
    • URL: inserisci l'URL dell'endpoint del servizio Cloud Run del connettore dell'interfaccia utente di cui hai eseguito il deployment con il backend di integrazione di Agent Assist. Puoi trovare questo URL nella console Cloud Run. Modifica il protocollo in wss per il traffico WebSocket. Ad esempio: wss://UI_CONNECTOR_SUBDOMAIN.GCP_REGION.run.app.
    • Direttive CSP: seleziona tutte le caselle di controllo.
    • Fai clic su Salva e nuovo.
  7. Inserisci le seguenti informazioni:
    • Nome API: salesforce_domain
    • URL: inserisci l'URL del tuo dominio Salesforce nel seguente formato: https://YOUR_SUBDOMAIN.my.salesforce.com.
    • Direttive CSP: seleziona tutte le caselle di controllo.
    • Fai clic su Salva e nuovo.
  8. Inserisci le seguenti informazioni:
    • Nome API: twilio_flex
    • URL: https://flex.twilio.com
    • Direttive CSP: seleziona tutte le caselle di controllo.
    • Fai clic su Salva.

Passaggio 5: installa il plug-in Twilio Flex CTI

Salesforce fornisce Salesforce Open CTI per consentire l'integrazione di softphone di terze parti con la tua istanza Salesforce.

Twilio Flex CTI utilizza Salesforce Open CTI per consentirti di utilizzare Flex direttamente all'interno della tua istanza Salesforce. Segui le istruzioni di Twilio per configurare Twilio Flex CTI nella tua istanza Salesforce.

Passaggio 6: installa il componente web Lightning di Salesforce

Segui questi passaggi per utilizzare l' editor di Lightning Experience per aggiungere il componente web Lightning di Salesforce alla pagina dei contatti in cui si apre Twilio Flex CTI quando arriva una nuova chiamata.

  1. Vai alla Console di servizio e seleziona Contatti.
  2. Seleziona un record di contatto.
  3. Fai clic sul menu Configurazione > Modifica pagina.
  4. Fai clic su Modello > Modifica.
    1. Seleziona Intestazione e Due regioni uguali.
    2. Fai clic su Avanti.
    3. Mappa ogni regione a una nuova regione.
    4. Fai clic su Fine.
  5. Dalla barra laterale Componenti, sposta agentAssistContainerModule nella barra laterale. Nota: questo componente è stato fornito dal comando npm deploy.
  6. Fai clic sul componente che hai inserito nel passaggio precedente e compila i campi del modulo come segue per aggiungere i dettagli di configurazione.
    • endpoint: l'URL del connettore dell'interfaccia utente del backend di integrazione dell'agente, ad esempio un URL della console Cloud Run, come: https://UI_CONNECTOR_ENDPOINT.GCP_REGION.run.app
    • channel: indica che l'integrazione è per voice.
    • platform: indica che la piattaforma è twilio.
    • conversationProfile: il nome della risorsa del profilo di conversazione di Agent Assist (ad esempio: projects/GCP_PROJECT_ID/locations/GCP_REGION/conversationProfiles/CONVERSATION_PROFILE_ID)
    • consumerKey: la chiave utente dell'app client esterna di un passaggio precedente.
    • consumerSecret: il secret utente dell'app client esterna di un passaggio precedente.
    • containerHeight: l'altezza del container di Agent Assist.

Passaggio 7: prova l'integrazione

Puoi testare l'integrazione vocale con una chiamata di prova al call center Salesforce.

  1. Accedi a Twilio Flex dalla Console di servizio.
  2. Chiama il tuo numero Twilio Flex. Lo hai annotato nel passaggio 1.
  3. Nella Console di servizio, accetta la chiamata. Lo schermo dovrebbe aprire una pagina dei contatti nuova o esistente per il numero che ha chiamato.
  4. Se si tratta di una nuova pagina dei contatti, salva il contatto. Quando la pagina dei contatti viene caricata, il componente web Lightning di Salesforce dovrebbe essere caricato nella barra laterale.
  5. Prova entrambi i lati della conversazione, assicurandoti che le funzionalità di Agent Assist funzionino come le hai configurate.