Integração de voz do Salesforce com o Twilio Flex

Arquitetura para a integração do Agent Assist e do Twilio Flex com o Salesforce

Essa integração de voz usa a integração do Twilio Open CTI para trazer uma central de atendimento do Twilio Flex para sua instância do Salesforce.

O Agent Assist usa o fluxo de mídia da chamada do Twilio Flex para fornecer sugestões aos seus agentes no Salesforce Lightning Service Console.

Antes de começar

Para integrar os módulos da interface do Agent Assist ao Salesforce, primeiro configure os recursos necessários.

Antes de executar o script de implantação do back-end, configure as seguintes variáveis de ambiente específicas do Twilio no arquivo .env (além das variáveis comuns):

  • APP_AUTH_OPTION: defina como Twilio.
  • TWILIO_ACCOUNT_SID: defina como o SID da sua conta do Twilio.

Etapa 1: configurar o Twilio Flex

O Twilio Flex funciona como o softphone nessa integração. Você pode fazer login no console do Twilio para configurar uma conta do Flex. Acesse a página de configuração do Twilio para instruções detalhadas sobre como criar uma conta do Flex.

Instalar o complemento do conector SIPREC

O complemento do conector SIPREC permite que sua conta do Twilio Flex faça ramificações SIPREC de fluxos de mídia de ligações para o Agent Assist. Siga estas etapas para instalar o complemento do conector SIPREC.

  1. Acesse Twilio Home > Marketplace > Catalog > Twilio > Siprec Connector.
  2. Clique em Install > marque a caixa de seleção Terms and conditions acknowledgment > Install.
  3. Na guia Configure, configure o plug-in com os seguintes detalhes:
    • Unique Name: SipRec1
    • Session Recording Server: 
      sip:+<GTP-provisioned-phone-number>@216.239.36.145:5672;transport=tls;secure=true;edge=umatilla
    • Consulte a documentação de integração de telefonia para mais detalhes sobre o provisionamento de um número GTP. Você pode ignorar as etapas de configuração e validação do SBC, porque elas estão concluídas para o conector do Twilio Siprec.
  4. Acesse Twilio Home > Functions and Assets.
    • Se Functions and Assets não estiver visível, fixe-o em Explore Products.
  5. Clique em Criar serviço.
  6. Nomeie o novo serviço como ui-connector-auth.
  7. No editor que aparece, clique em Add + > Add Function.
  8. Nomeie a função como conversation-name.
  9. Clique , e mude a visibilidade da função para Public.
  10. Copie e cole todo o conteúdo de ui-connector-auth.js do repositório do GitHub no editor.
  11. Clique em Salvar.
  12. Clique em Implantar tudo.

Configurar a URA com o Flex Studio

A URA consiste em configurar um fluxo de chamadas programático com o Twilio Studio para fazer a ramificação SIPREC do fluxo de mídia para o Agent Assist. Ele também faz uma postagem HTTP para compartilhar o número de telefone e o ID da conversa com o Agent Assist. Siga estas etapas para configurar a URA com o Flex Studio.

  1. Acesse o console do Twilio.
  2. Clique em Develop > Phone Numbers > Manage > Active Numbers. Deve haver uma linha na tabela com o número padrão do Twilio provisionado para sua conta do Flex.
  3. Na seção Voice - Studio Workflow, clique em Voice IVR.
  4. Arraste um widget Make HTTP Request para o fluxo.
  5. Desconecte Incoming Call da entrada do widget SendCallToAgent.
  6. Conecte Incoming Call à entrada do widget Make HTTP Request.
  7. Configure o widget Make HTTP Request com os seguintes detalhes:
    • Widget Name: register_twilio
    • Request Method: POST
    • Request URL: <your-ui-connector-cloud-run-url>.run.app/register-app
    • Content type: Application/JSON
    • Request body: 
      {
"accountSid": "<yourTwilioAccountSid>",
"authToken": "<yourTwilioAccountAuthToken>"
}
  8. Arraste um widget Run Function para o fluxo.
  9. Conecte as saídas Success e Fail do widget register_twilio à entrada do widget Run Function.
  10. Crie um widget com os seguintes detalhes:
    • Widget Name: conversation_name
    • Service: ui-connector-auth
    • Environment: ui
    • Function: conversation-name
    • Function Parameters:
      • 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. Arraste um widget Fork Stream para o fluxo.
  12. Conecte as saídas Success and Fail do widget Make HTTP Request à entrada do widget Fork Stream.
  13. Conecte o nó Next do widget Fork Stream ao widget SendCallToAgent.

  14. Configure o widget Fork Stream da seguinte maneira:

    • Stream Action: Start
    • Stream Type: Siprec
    • Connector Name: Siprec1
    • Tracks: Both Tracks

    • Stream Parameters:

      • Key: conversation

      • Value:

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

  15. Clique em Save > Publish.

Detalhes da conta

Siga esta etapa para coletar os detalhes da sua conta do Twilio Flex. Você vai precisar dessas informações para configurar o Flex CTI no Salesforce mais tarde.

  1. Acesse Twilio Home > Account Dashboard e anote as seguintes informações:
    • SID da conta
    • Meu número de telefone do Twilio

Etapa 2: configurar seu projeto de desenvolvimento do Salesforce

Para começar a integrar os módulos da interface do Agent Assist, siga estas etapas.

  1. Execute o código a seguir para clonar o repositório de integração do Agent Assist e abrir seu projeto:

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

  2. Execute os comandos a seguir para fazer o download dos arquivos JavaScript dos módulos da interface que você vai implantar mais tarde como recursos estáticos. O Salesforce exige recursos estáticos para carregar JavaScript de terceiros.

    npm run generate-static-resources
npm install

Etapa 3: configurar seu ambiente do Salesforce

É possível integrar os módulos da interface do Agent Assist em um ambiente específico, como produção ou desenvolvimento. O Salesforce chama esses ambientes organizações (orgs).

Configurar sua organização com a CLI do Salesforce

Siga estas etapas para usar a CLI do Salesforce para configurar sua organização para integração do Agent Assist.

  1. Execute o código a seguir e autentique a CLI usando os detalhes de login do Salesforce que você usa normalmente. 
    npm run login
  2. Execute o código a seguir para implantar o LWC na organização. 
    npm run deploy

Etapa 4: criar um app cliente externo

O LWC do Salesforce usa o fluxo de credenciais do cliente OAuth 2.0 para autenticar você. Um app cliente externo ativa o fluxo de credenciais do cliente. Use o token do cliente e o secret do consumidor do app para configurar o LWC do Salesforce para autenticar usuários com o Salesforce.

  1. Clique em Setup > Setup. Na caixa Quick Find, digite External Client App Manager.
    1. Clique em External Client App Manager > New External Client App > Create e insira as seguintes informações.
      • External Client App Name: lwc auth
      • API Name: lwc_auth
      • Contact Email: your_email@example.com
      • API (Enable OAuth Settings) > Enable OAuth: selecionado
      • API (Enable OAuth Settings) > Callback URL: https://login.salesforce.com/services/oauth2/callback
      • API (Enable OAuth Settings) > Selected OAuth Scopes: Access the identity URL service
      • API (Enable OAuth Settings) > Enable Client Credentials Flow: selecionado
    2. Clique em Criar.
  2. Clique em Setup > Setup. Na caixa Quick Find, digite External Client App Manager.
    1. Clique no nome do app cliente externo > Edit.
    2. Acesse OAuth Policies > OAuth Flows and External Client App Enhancements.
    3. Verifique se a opção Enable Client Credentials Flow está selecionada.
    4. Em Run As, insira seu nome de usuário de login.
    5. Clique em Salvar.
  3. Clique em Setup > Setup. Na caixa Quick Find, digite External Client App Manager.
    1. Clique no nome do app cliente externo > Edit.
    2. Acesse OAuth Settings > App Settings > Consumer Key and Secret.
    3. Insira o código de verificação enviado para seu e-mail.
    4. Copie o token do cliente e o secret do consumidor para um local seguro. Você vai precisar deles para uma etapa posterior.

Estabelecer políticas de segurança de conteúdo e CORS

  1. Clique em Setup > Setup.
  2. Na caixa Quick Find, digite CORS e clique em Edit.
    1. Selecione Enable CORS for OAuth endpoints.
    2. Clique em Salvar.
  3. Clique em Setup > Setup.
  4. Na caixa Quick Find, digite Trusted URLs e clique em New Trusted URL.
  5. Insira as seguintes informações:
    • API Name: ui_connector
    • URL: insira o URL do endpoint do serviço do conector da interface do Cloud Run que você implantou com o back-end de integração do Agent Assist. Esse URL pode ser encontrado no console do Cloud Run. Por exemplo: https://UI_CONNECTOR_SUBDOMAIN.GCP_REGION.run.app.
    • CSP Directives: marque todas as caixas de seleção.
    • Clique em Save &New.
  6. Insira as seguintes informações:
    • API Name: ui_connector_wss
    • URL: insira o URL do endpoint do serviço do conector da interface do Cloud Run que você implantou com o back-end de integração do Agent Assist. Esse URL pode ser encontrado no console do Cloud Run. Mude o protocolo para wss, para tráfego de WebSockets. Por exemplo: wss://UI_CONNECTOR_SUBDOMAIN.GCP_REGION.run.app.
    • CSP Directives: marque todas as caixas de seleção.
    • Clique em Save &New.
  7. Insira as seguintes informações:
    • API Name: salesforce_domain
    • URL: insira o URL do seu domínio do Salesforce com o seguinte formato: https://YOUR_SUBDOMAIN.my.salesforce.com.
    • CSP Directives: marque todas as caixas de seleção.
    • Clique em Save &New.
  8. Insira as seguintes informações:
    • API Name: twilio_flex
    • URL: https://flex.twilio.com
    • CSP Directives: marque todas as caixas de seleção.
    • Clique em Salvar.

Etapa 5: instalar o plug-in do Twilio Flex CTI

O Salesforce fornece Salesforce Open CTI para permitir a integração de softphones de terceiros com sua instância do Salesforce.

O Twilio Flex CTI usa o Salesforce Open CTI para permitir que você use o Flex diretamente na sua instância do Salesforce. Siga as instruções do Twilio para configurar o Twilio Flex CTI na sua instância do Salesforce.

Etapa 6: instalar o componente da Web do Salesforce Lightning

Siga estas etapas para usar o editor do Lightning Experience para adicionar o componente da Web do Salesforce Lightning à página de contato em que o Twilio Flex CTI é aberto quando uma nova chamada é recebida.

  1. Acesse o Service Console e selecione Contacts.
  2. Selecione um registro de contato.
  3. Clique em Settings e selecione Edit Page.
  4. Clique em Template > Change.
    1. Selecione Header e Two Equal Regions.
    2. Clique em Próxima.
    3. Mapeie cada região para uma nova região.
    4. Clique em Concluído.
  5. Na lista Components, arraste agentAssistContainerModule para a página. Observação: o comando npm deploy forneceu esse componente.
  6. Clique no componente que você colocou na etapa anterior e preencha os campos do formulário da seguinte maneira para adicionar detalhes de configuração.
    • endpoint: o URL do conector da interface do back-UI de integração do agente, como um URL do console do Cloud Run, como: https://UI_CONNECTOR_ENDPOINT.GCP_REGION.run.app
    • channel: indica que a integração é para voice.
    • plataforma: indica que a plataforma é twilio.
    • conversationProfile: o nome do recurso do perfil de conversa do Agent Assist (exemplo: projects/GCP_PROJECT_ID/locations/GCP_REGION/conversationProfiles/CONVERSATION_PROFILE_ID)
    • consumerKey: o token do cliente do app cliente externo de uma etapa anterior.
    • consumerSecret: o secret do consumidor do app cliente externo de uma etapa anterior.
    • containerHeight: a altura do contêiner do Agent Assist.

Etapa 7: testar a integração

Você pode testar a integração de voz com uma ligação de teste para a central de atendimento do Salesforce.

  1. Faça login no Twilio Flex no Service Console.
  2. Ligue para seu número do Twilio Flex. Você anotou isso na etapa 1.
  3. No Service Console, aceite a chamada. A tela vai abrir uma página de contato nova ou existente para o número que ligou.
  4. Se for uma nova página de contato, salve o contato. Quando a página de contato for carregada, o componente da Web do Salesforce Lightning será carregado na página.
  5. Teste os dois lados da conversa, garantindo que os recursos do Agent Assist estejam funcionando conforme configurado.