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 com o Salesforce, você precisa de acesso aos seguintes recursos:

  • Node.js

    Siga as instruções de instalação recomendadas para seu sistema operacional.

  • CLI do Salesforce

    Siga as instruções de instalação recomendadas para seu sistema operacional.

  • Google Cloud CLI

    Instale o comando gcloud conforme as instruções e faça a autenticação usando gcloud auth login.

  • Salesforce

    Faça login no URL da sua instância ou na página de login do Salesforce e observe o seguinte:

    • O URL do Meu domínio do Salesforce. Siga estas etapas para encontrar o URL do meu domínio:
      1. Navegue até a barra de menus > menu Configuração.
      2. Clique em Configurar.
      3. Na caixa Pesquisa rápida, digite Meu domínio. O nome de domínio está no seguinte formato: MY-DOMAIN-NAME.develop.my.salesforce.com.
    • Seu ID da organização do Salesforce. Siga estas etapas para encontrar o ID da organização:
      1. Navegue até a barra de menus > menu Configuração.
      2. Clique em Configurar.
      3. Na caixa Pesquisa rápida, digite Informações da empresa. Observação: essas etapas de integração foram testadas apenas com a Salesforce Developer Edition. Se você usar outra edição, poderá haver diferenças nas licenças de recursos e na interface do Salesforce.

  • Back-end de integração do Agent Assist

    1. Siga as instruções para configurar a integração.
    2. Antes de executar o script de implantação, configure as seguintes variáveis de ambiente com deploy.sh ou em um arquivo .env na raiz do projeto:
      • AUTH_OPTION: defina como SalesforceLWC.
      • SALESFORCE_DOMAIN: um nome de domínio semelhante a YOUR_SUBDOMAIN.develop.lightning.force.com. Você anotou esse valor no pré-requisito do Salesforce. Não inclua https://.
      • SALESFORCE_ORGANIZATION_ID: você anotou esse valor no pré-requisito do Salesforce.
      • APP_AUTH_OPTION: defina como Twilio.
      • TWILIO_ACCOUNT_SID: defina como seu SID da conta do Twilio.

Etapa 1: configurar o Twilio Flex

O Twilio Flex serve como o softphone nessa integração. Faça 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

Com o complemento do conector SIPREC, sua conta do Twilio Flex pode fazer forks 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 > Catálogo > Twilio > Conector Siprec.
  2. Clique em Instalar > marque a caixa de seleção Confirmação dos termos e condições > Instalar.
  3. Na guia Configurar, configure o plug-in com os seguintes detalhes:
    • Nome exclusivo: SipRec1
    • Servidor de gravação de sessão: 
      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. Ignore as etapas de configuração e validação do SBC, porque elas estão concluídas para o conector Twilio Siprec.
  4. Acesse Página inicial do Twilio > Funções e recursos.
    • Se Funções e recursos não estiver visível na barra lateral, fixe-o em Explorar produtos.
  5. Clique em Criar serviço.
  6. Nomeie o novo serviço como ui-connector-auth.
  7. No editor que aparece, clique em Adicionar + > Adicionar função.
  8. Nomeie a função como conversation-name.
  9. Clique em e mude a visibilidade da função para Pública.
  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 o fork 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 da Twilio.
  2. Clique em Desenvolver > Números de telefone > Gerenciar > Números ativos. Deve haver uma linha na tabela com o número padrão do Twilio provisionado para sua conta do Flex.
  3. Na seção Voz – fluxo de trabalho do Studio, clique em Resposta de voz interativa.
  4. Arraste um widget Fazer solicitação HTTP para o fluxo.
  5. Desconecte Incoming Call da entrada do widget SendCallToAgent.
  6. Conecte Chamada recebida à entrada do widget Fazer solicitação HTTP.
  7. Configure o widget Fazer solicitação HTTP com os seguintes detalhes:
    • Nome do widget: register_twilio
    • Método de solicitação: POST
    • URL da solicitação: <your-ui-connector-cloud-run-url>.run.app/register-app
    • Tipo de conteúdo: application/json
    • Corpo da solicitação: 
      {
"accountSid": "<yourTwilioAccountSid>",
"authToken": "<yourTwilioAccountAuthToken>"
}
  8. Arraste um widget Executar função para o fluxo.
  9. Conecte as saídas Sucesso e Falha do widget register_twilio à entrada do widget Executar função.
  10. Crie um widget com os seguintes detalhes:
    • Nome do widget: conversation_name
    • Serviço: ui-connector-auth
    • Ambiente: ui
    • Função: conversation-name
    • Parâmetros da função:
      • 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 da barra lateral para o fluxo.
  12. Conecte as saídas Sucesso e falha do widget Fazer solicitação HTTP à entrada do widget Bifurcar fluxo.
  13. Conecte o nó Próximo do widget Fork Stream ao widget SendCallToAgent.

  14. Configure o widget Fork Stream da seguinte maneira:

    • Ação de stream: iniciar
    • Tipo de stream: Siprec
    • Nome do conector: Siprec1
    • Opções: ambas as opções

    • Parâmetros de evento:

      • Chave: conversation

      • Valor:

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

  15. Clique em Salvar > Publicar.

Detalhes da conta

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

  1. Acesse Twilio Home > Painel da conta 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 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 módulos da interface do Agent Assist em um ambiente específico, como produção ou desenvolvimento. O Salesforce chama esses ambientes de organizações (orgs).

Configurar sua organização com a CLI do Salesforce

Siga estas etapas para usar a CLI do Salesforce e configurar sua organização para a integração com o 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 segredo do consumidor do app para configurar o LWC do Salesforce e autenticar usuários com o Salesforce.

  1. Acesse a barra de menus > menu Configuração e clique em Configuração. Na caixa Pesquisa rápida, digite Gerenciador de apps de clientes externos.
    1. Clique em Gerenciador de apps clientes externos > Novo app cliente externo > Criar e insira as seguintes informações.
      • Nome do app cliente externo: lwc auth
      • Nome da API: lwc_auth
      • E-mail de contato: your_email@example.com
      • API (ativar configurações do OAuth) > Ativar OAuth: selecionado
      • API (ativar configurações do OAuth) > URL de retorno de chamada: https://login.salesforce.com/services/oauth2/callback
      • API (ativar configurações do OAuth) > Escopos do OAuth selecionados: acesse o serviço de URL de identidade.
      • API (ativar configurações do OAuth) > Ativar fluxo de credenciais do cliente: Selecionado
    2. Clique em Criar.
  2. Acesse a barra de menus > menu Configuração e clique em Configuração. Na caixa Pesquisa rápida, digite Gerenciador de apps de clientes externos.
    1. Clique no nome do app cliente externo > Editar.
    2. Acesse Políticas do OAuth > Fluxos do OAuth e melhorias no app cliente externo.
    3. Verifique se a opção Ativar o fluxo de credenciais do cliente está selecionada.
    4. Em Executar como, insira seu nome de usuário de login.
    5. Clique em Salvar.
  3. Acesse a barra de menus > menu Configuração e clique em Configuração. Na caixa Pesquisa rápida, digite Gerenciador de apps de clientes externos.
    1. Clique no nome do app cliente externo > Editar.
    2. Acesse Configurações do OAuth > Configurações do app > Chave e segredo do consumidor.
    3. Digite o código de verificação enviado para seu e-mail.
    4. Copie o token do cliente e o secret do consumidor em um lugar seguro. Você vai precisar delas em uma etapa posterior.

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

  1. Acesse a barra de menus > menu Configuração e clique em Configuração.
  2. Na caixa Pesquisa rápida, digite CORS e clique em Editar.
    1. Selecione Ativar o CORS para endpoints OAuth.
    2. Clique em Salvar.
  3. Acesse a barra de menus > menu Configuração e clique em Configuração.
  4. Na caixa Pesquisa rápida, digite URLs confiáveis e clique em Novo URL confiável.
  5. Digite as informações a seguir:
    • Nome da API: ui_connector
    • URL: insira o URL do endpoint do serviço do Cloud Run do conector de UI que você implantou com o back-end de integração do Agent Assist. O URL está no console do Cloud Run. Por exemplo, https://UI_CONNECTOR_SUBDOMAIN.GCP_REGION.run.app.
    • Diretivas de CSP: marque todas as caixas de seleção.
    • Clique em Salvar e novo.
  6. Digite as informações a seguir:
    • Nome da API: ui_connector_wss
    • URL: insira o URL do endpoint do serviço do Cloud Run do conector de UI implantado com o back-end de integração do Agent Assist. O URL está 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.
    • Diretivas de CSP: marque todas as caixas de seleção.
    • Clique em Salvar e novo.
  7. Digite as informações a seguir:
    • Nome da API: salesforce_domain
    • URL: insira o URL do seu domínio do Salesforce no seguinte formato: https://YOUR_SUBDOMAIN.my.salesforce.com.
    • Diretivas de CSP: marque todas as caixas de seleção.
    • Clique em Salvar e novo.
  8. Digite as informações a seguir:
    • Nome da API: twilio_flex
    • URL: https://flex.twilio.com
    • Diretivas de CSP: marque todas as caixas de seleção.
    • Clique em Salvar.

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

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

O Twilio Flex CTI usa o Open CTI do Salesforce para permitir que você use o Flex diretamente na sua instância do Salesforce. Siga as instruções da Twilio para configurar a CTI do Twilio Flex 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 e 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. Navegue até o Service Console e selecione Contatos.
  2. Selecione um registro de contato.
  3. Clique no menu "Configuração" > Editar página.
  4. Clique em Modelo > Mudar.
    1. Selecione Cabeçalho e Duas regiões iguais.
    2. Clique em Próxima.
    3. Mapeie cada região para uma nova.
    4. Clique em Concluído.
  5. Na barra lateral Componentes, mova o agentAssistContainerModule para a barra lateral. 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 como segue para adicionar detalhes de configuração.
    • endpoint: o URL do conector da interface do usuário do backend de integração do agente, como um URL do console do Cloud Run, por exemplo: https://UI_CONNECTOR_ENDPOINT.GCP_REGION.run.app
    • channel: indica que a integração é para voice.
    • platform: indique 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 externo do app de uma etapa anterior.
    • consumerSecret: a chave secreta 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 chamada de teste para o call center do Salesforce.

  1. Faça login no Twilio Flex pelo Service Console.
  2. Ligue para seu número do Twilio Flex. Você anotou isso na etapa 1.
  3. No Console de serviços, atenda 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 vai aparecer na barra lateral.
  5. Teste os dois lados da conversa para garantir que os recursos do Agent Assist estão funcionando conforme você os configurou.