API para WhatsApp da Twilio com o Flex em Apenas Alguns Minutos

Tempo de leitura: 3 minutos

November 12, 2020

Escrito por

Jennifer Aprahamian

Twilion

Maria Bermudez

Twilion

Revisado por

Sander Sōnajalg

Twilion

API para WhatsApp da Twilio com o Flex em Apenas Alguns Minutos

Com o anúncio recente da API para WhatsApp da Twilio e toda a empolgação constante em volta do Twilio Flex, eu achei que seria interessante trazer o WhatsApp para dentro do espaço do contact center. Com apenas alguns minutos de configuração, seus clientes podem entrar em contato com o seu negócio através de um canal totalmente diferente. Vamos dar uma olhada em como as novidades mais recentes da Twilio funcionam perfeitamente juntas!

Requisitos

Se você quer deseja acompanhar esse post e trazer o WhatsApp para o Flex, você vai precisar de:

Uma conta da Twilio (cadastre-se agora para obter uma conta gratuita)
Um projeto com Twilio Flex (saiba mais aqui)
O Canal do Sandbox do WhatsApp. Siga essas instruções para instalar o Sandbox do Whatsapp na sua conta e vincular seu número WhatsApp.

Vamos começar!

Começando com o Flex

Se você já configurou sua instância do Flex, você pode pular para a próxima etapa

Se você ainda não configurou o Flex, crie um novo projeto e selecione o template do Flex. Siga as instruções para dar início ao Quickstart do Flex. Durante esse processo, vários serviços da Twilio serão criados para você.

Abra o Flex UI no seu navegador. Você vai visualizar uma janela parecida com essa:

Obtendo o Handler de Mensagens

Navegue para a sua página de Números de Telefone no Console da Twilio e localize a URL do "Messaging Handler" que é usado pelo número padrão que a Twilio obteve para você. Copie a URL completa desse handler.

Dica: clique três vezes na URL; A maioria dos navegadores vai selecionar a URL inteira, mesmo que parte dela esteja oculta.

Handler de mensagem dos números da Twilio

O formato dessa url deve ser:

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

Sendo que você substituiria o ACxx pelo seu Account SID (que pode ser encontrado aqui) e o KSxx pelo o SID do Serviço do Proxy usado pelo Flex (que pode ser encontrado aqui).

Configurando o seu Sandbox do WhatsApp

Navegue para a página do Sandbox do WhatsApp (Se você ainda não configurou o seu sandbox, configure-o agora!). Vá para a seção de Configuração do Sandbox e cole a URL do Handler de mensagens para o campo "When a Message Comes In". Salve as suas alterações.

Colete alguns detalhes da sua conta

Ainda no Sandbox do Whatsapp, salve o seu Número do WhatsApp para mais tarde.

Número do Sandbox da API para WhatsApp da Twilio

No Studio, encontre o Flow com o nome de "Messaging Flow". Salve o SID desse Flow, começando com FWxx.

No dashboard do Programmable Chat, pegue o SID da sua instância do Chat Service, começando com ISxx.

Por último, copie o seu Auth Token para poder fazem uma requisição na API da Twilio. O Auth Token é um valor oculto que pode ser encontrado no Dashboard da Twilio.

Conectando o seu WhatsApp em um Flow do Studio

Por fim, abra o seu prompt de comando ou um o seu terminal e execute o seguinte comando:

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

Substitua os valores acima pelo seu:

Número do WhatsApp (no parâmetro ContactIdentity)
SID do Flow do Studio (no Integration.FlowSid)
SID do Chat Service (no ChatServiceSid)
Account Sid (substitua no ACxx)
Auth Token (substitua no yourAuthToken)

Você pode gerenciar suas mensagens com outros produtos além do Studio. Saiba mais na nossa documentação, em inglês, de Mensagens no Flex.

Comece a conversar

Você está pronto para testar sua integração com o WhatsApp! Envie uma mensagem via WhatsApp para o número do sandbox e veja ela ser recebida como uma nova Task no Flex!

Aceite a Task e comece a conversar. Seu contact center agora pode receber mensagens do WhatsApp e respondê-las como se fosse mensagens SMS, do Twilio Chat, do Facebook Messenger e do LINE.

Siga em frente com o Flex

Agora que você adicionou esse canal de integração com o Flex, você pode tentar adicionar algum outro da lista de canais da Twilio. Você também pode customizar o seu Flex estilizando a interface para refletir a marca do seu negócio ou criando os seus próprios componentes para estender as funcionalidades do Twilio Flex.

Você está pronto para construir mais funcionalidades utilizando a API para WhatsApp da Twilio? Experimente o nosso app de tradução de emoji ou o nosso bot de busca de pacotes no npm, ou crie o seu próprio hack do WhatsApp!

Nós mal podemos esperar para ver o que você vai construir!

Esse post foi traduzido do original por Lucas Frezarini. Qualquer dúvida, você pode entrar em contato pelo e-mail lfrezarini@twilio.com.