Como transferir chats de WhatsApp para o Twilio Flex

Tempo de leitura: 3 minutos

December 03, 2021
Escrito por
Felipe Mora
Twilion
Rosario Corres
Twilion
Clara Hernandez
Twilion

Um dos casos de usos mais comuns na nossa solução de Twilio Flex é habilitar o canal de WhatsApp, e geralmente o que se faz é iniciar uma conversa desde um fluxo do Twilio Studio que permitirá fazer o transbordo para um agente no Twilio Flex utilizando apenas o Widget de Send to Flex no Studio, porém esse Widget geralmente requer uma configuração extra para funcionar.

Nesse tutorial, vamos detalhar o passo a passo para configurar o Widget corretamente para transferir chats do WhatsApp para o Flex a partir de um fluxo do Twilio Studio, complementando os passos descritos em API para WhatsApp da Twilio com o Twilio Flex em Apenas Alguns Minutos para casos de uso nos quais precise implementar um chatbot antes de realizar o transbordo para um atendente no Twilio Flex.

Adicionalmente, esse tutorial resolve a possível mensagem de erro SendToFlexWidget is not supported for this channel/trigger combination que pode aparecer quando você tentar fazer o transbordo de um chat de WhatsApp para o Twilio Flex.

Vamos começar

Pre requisitos:

  1. Uma conta na Twilio
  2. Um ambiente do Flex
  3. Número de WhatsApp sender aprovado
  4. Um fluxo no Twilio Studio, desde o qual fazer transferências para o Flex

Passos:

1. Começar com o Twilio Flex

Se você já configurou a instância do Flex, pode pular para o seguinte passo.

Se você for novo no Flex, crie uma nova conta de Flex. Siga as instruções para começar a configuração do Flex. Durante o processo, serão criados vários serviços da Twilio para você.

Acesse a interface de usuário do Flex no seu browser (Flex -> Overview -> Launch Flex), você observará uma interface similar à seguinte:  

 

Twilio Flex UI

 

2. Criar o Handler de Mensagens

O formato do URL do handler de mensagens deve ter o seguinte formato:

https://webhooks.twilio.com/v1/Accounts/ACxx/Proxy/KSxx/Webhooks/Message

Substitua ACxx com seu SID de conta (encontra-se no painel de controle da sua conta) e KSxx com seu SID de serviço de proxy Flex (encontra-se no site Services). Este será o endereço URL do handler de mensagens.

3. Obter o SID de Programmable Chat

  • Dentro do chat programável, escreva seu SID de instância de serviço de chat, aquele que começa com ISxx:

Chat service SID

4. Obter o Token e SID da Conta

Anote seu token de autenticação para poder realizar uma solicitação de API à Twilio. O token de autenticação é um valor oculto que se encontra no painel de controle da sua conta Flex.

Twilio Flex and WhatsApp Dashboard

5. Vincule o número de WhatsApp com um fluxo do Studio

Inicie uma sessão de shell comandos e execute o seguinte comando curl:

curl -X POST "https://flex-api.twilio.com/v1/FlexFlows" \ --data-urlencode "ChannelType=whatsapp" \ --data-urlencode "Enabled=true" \ --data-urlencode "IntegrationType=studio" \ --data-urlencode "ContactIdentity=whatsapp:+xxxx" \ --data-urlencode "FriendlyName=Flex WhatsApp FlexFlow" \ --data-urlencode "Integration.FlowSid=FWxx" \ --data-urlencode "ChatServiceSid=ISxx" \ -u ACxx:yourAuthToken

Este curl vai criar um fluxo do Flex que se encontra dentro de Flex > Manage > Messaging:  

Manage Flex Flows

Nota: Caso tenha mais de um número de WABA, o curl deve ser executado uma vez para cada número.

6. Configurar o Fluxo do Studio dentro do Fluxo do Flex

No fluxo do Flex, configurar o fluxo do Studio a executar, assim:

Update Flex Flow

7. Vincular o número de WhatsApp com o Fluxo do Flex

Ir para Messaging > Senders > WhatsApp senders e configurar o URL do passo 2 (Criar um endereço URL de controlador de mensagens) no campo de "Weboook URL for incoming messages":

WhatsApp Sender Settings
 

8. Criar o Fluxo do Studio

Assim que tivermos toda a configuração prévia, podemos começar com a construção do Fluxo do Studio. Para isso, ir para Studio > Flows e clicar no botão +. Ali, o sistema solicitará o nome do fluxo e depois brindará algumas opções para obter fluxos pré-definidos; neste caso, vamos trabalhar com um fluxo em branco selecionando Start from scratch.

Create Twilio Studio Flow

Se você ainda não estiver familiarizado com o Twilio Studio, você pode consultar a seguinte documentação: https://www.twilio.com/docs/studio 

9. Configurar o widget "Send to Flex"  

No Studio, configurar o widget Send to Flex, assim:

  • Workflow: fluxo desejado
  • Channel: Programmable Chat
  • Atributos: veja abaixo

{
    "name": "{{trigger.message.ChannelAttributes.from}}", 
    "channelType": "{{trigger.message.ChannelAttributes.channel_type}}", 
    "channelSid": "{{trigger.message.ChannelSid}}"
}

Widget Setup

Após configurar o widget, no momento que o número de Whatsapp previamente configurado receber uma mensagem, uma nova interação no Flex será iniciada:

Final Result

Idealmente, sugere-se configurar um chatbot antes de transferir o usuário para o agente do Flex, para isso você pode consultar a seguinte documentação do Twilio Studio: https://www.twilio.com/docs/studio/tutorials/how-to-build-a-chatbot

Conclusão

Agora, você pode construir chatbots com Twilio Studio e garantir que, se precisar, seu usuário conseguirá conversar com um atendente humano através do Twilio Flex.

Publicações relacionadas

Recursos relacionados

A newspaper article

Twilio Docs

De APIs a SDKs e aplicativos de amostra

Documentação de referência de API, SDKs, bibliotecas auxiliares, guias de início rápido e tutoriais para sua linguagem e plataforma.
An Open book

Centro de Recursos

Os mais recentes e-books, relatórios do setor e webinars

Aprenda com especialistas em engajamento do cliente para melhorar sua própria comunicação.
User group reactions

Ahoy

Centro da comunidade de desenvolvedores da Twilio

Melhores práticas, exemplos de código e inspiração para criar comunicações e experiências de engajamento digital.