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

Como transferir chats de WhatsApp para o Twilio Flex

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:

Uma conta na Twilio
Um ambiente do Flex
Número de WhatsApp sender aprovado
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:

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:

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.

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:

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:

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":

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.

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

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}}"
}

		

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:

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.