Voltar para Notícias para desenvolvedores

Integrando a Plataforma do WhatsApp Business com a HubSpot

13 de março de 2023PorRashed Talukder

Na HubSpot, uma plataforma de gestão do relacionamento com o cliente (CRM, pelas iniciais em inglês), as organizações podem comercializar, vender e oferecer suporte para produtos ou serviços com mais eficiência.

A Plataforma do WhatsApp Business permite que as empresas usem a API de Nuvem, hospedada pela Meta, para promover a comunicação direta com os clientes cadastrados na ferramenta de CRM por meio de integrações do WhatsApp. Isso simplifica o acesso aos recursos de mensagens e possibilita a integração rápida com a maioria das pilhas de tecnologia atuais.

Neste artigo, descreveremos como configurar esse tipo de integração com a plataforma da HubSpot. Também veremos como criar um fluxo de trabalho no sistema de CRM para responder automaticamente a mensagens com base em eventos e regras personalizadas na plataforma HubSpot usando o WhatsApp.

Pré-requisitos

Para concluir este tutorial, você precisará do seguinte:

Para acompanhar o conteúdo deste artigo, você precisa conhecer a Plataforma do WhatsApp Business, a Meta for Developers e a plataforma da HubSpot.

Enviar mensagens

O primeiro passo é configurar as contas. Para isso, siga estas etapas:

  1. Crie uma conta de desenvolvedor do Facebook ou faça login, caso você já tenha uma.

  2. Conclua a etapa Configurar ativos de desenvolvedor e acesso à plataforma no guia de introdução oficial e envie uma mensagem de teste.

  3. Adicione o seu número de telefone à configuração do app da API de Nuvem.

Receber mensagens com um exemplo de app

É preciso configurar um webhook e uma URL de assinante com um ponto de extremidade para testar os seus webhooks. Para isso, usaremos o exemplo de app mencionado acima.

Clique no botão Remix to Edit no canto superior direito da tela para editar os detalhes da configuração.

Abra o arquivo .env e cole o seu token de acesso à API de Nuvem no campo WHATSAPP_TOKEN. É possível inserir qualquer string em VERIFY_TOKEN, mas deixe essa informação separada porque a usaremos mais tarde.

Configurar o webhook da API de Nuvem

O próximo passo é configurar o webhook da API para permitir assinaturas de atualizações ou respostas a alterações de eventos. Para isso, abra o Painel de Apps da Meta for Developers do seu app. Clique na barra de navegação para encontrar o WhatsApp. Em Começar, clique em Configuração e depois em Editar.

Preencha os campos URL de retorno de chamada e Token de verificação no diálogo Editar URL de retorno de chamada do webhook. Esta será a URL de retorno de chamada: https://<<PROJECT NAME>>.glitch.me. Substitua "PROJECT NAME" pelo nome do seu projeto (por exemplo, https://defiant-standing-mirror.glitch.me). Depois, confira se a URL é igual à de cima.

Clique em Verificar e salvar. Consulte o guia do desenvolvedor para obter mais informações sobre como configurar o webhook do WhatsApp.

Tela para editar a URL de retorno de chamada do webhook

Agora você pode enviar notificações de teste ao ponto de extremidade.

Na mesma página, no botão Editar, clique em Campos do webhook. Depois, clique em Gerenciar e assine os eventos que você quer detectar por meio do ponto de extremidade. Agora clique em Testar para enviar uma mensagem de notificação ao número de telefone do destinatário configurado na etapa anterior.

Tela de campos do webhook

Para confirmar que o app está em execução e pode detectar eventos, acesse o Glitch, clique em Logs e veja os registros do evento selecionado.

Tela para visualizar registros no Glitch

Configurar o CRM da HubSpot

Chegou a hora de configurar o CRM da HubSpot para enviar automaticamente mensagens do WhatsApp a clientes que têm um número de telefone como informação de contato.

Acesse a plataforma da HubSpot e faça login na sua conta de desenvolvedor ou crie uma. A conta de desenvolvedor inclui um período de avaliação gratuita de 90 dias para todos os recursos corporativos da HubSpot (como marketing, vendas, serviços e CMS) para você testar a API e as ferramentas.

Depois de configurar a sua conta de desenvolvedor, clique em Manage test accounts.

Login com a conta de desenvolvedor do CRM da HubSpot

Depois, selecione Create app test account, escolha um nome para ela, como demo_whatsapp_integration (ou outra opção definida por você), e clique em Create.

Tela para criar uma conta de teste do app

Clique na conta de teste do app recém-criada e navegue até o painel relacionado. Depois, clique em Contacts no canto superior esquerdo da barra de navegação. Serão exibidos dois contatos para fins de demonstração. Fique à vontade para removê-los e adicionar um novo contato que tenha um número de telefone para usar no teste do WhatsApp.

Painel da nova conta de teste do app

Conectar o WhatsApp com o CRM da HubSpot

Nesta etapa, instalaremos uma integração do WhatsApp com o CRM da HubSpot. Para isso, primeiro acesse Settings na plataforma da HubSpot. Em Account Setup, clique em Integrations e depois em Connected Apps.

Tela de apps conectados

Selecione Visit App Marketplace. Use o campo de pesquisa para encontrar o aplicativo WhatsApp. Clique em WhatHub: WhatsApp Integration.

Marketplace de apps

Selecione a conta demo_whatsapp_integration e clique em Choose Account. Você verá um ícone do WhatsApp na página Contacts ao lado das outras opções de contato. Clique nele para começar a enviar mensagens usando o CRM da HubSpot. É possível usar mensagens personalizadas ou modelos predefinidos.

Mensagem personalizada do WhatsApp

Você também verá uma lista de mensagens e os respectivos status na aba Activity.

Configurar um fluxo de trabalho automatizado

Agora faremos a incorporação em um fluxo de trabalho disparado por um evento no CRM. Para isso, configuraremos um fluxo personalizado no painel da plataforma da HubSpot. Clique em Automation na barra de navegação e em Workflows para abrir o painel Workflow.

Clique em Create workflow e selecione a opção From scratch. Agora clique em Contact-based e depois em Next.

Tela para voltar aos fluxos de trabalho

Clique em Set up triggers e selecione a opção de evento de integração WhatsApp message sent from HubSpot portal.

Tela para configurar disparadores

Selecione o tipo de filtro Message sent, defina o disparador do fluxo de trabalho como "is equal to any of" e especifique o valor Buy item. Por fim, clique em Apply filter e depois em Save.

Quando terminar, clique no ícone de adição (+) e inclua outra ação. Na lista Choose an action, clique em Create task.

Tela para escolher uma ação

Dê o nome de "Test Task" à tarefa e a atribua à sua conta de teste. Depois, clique em Save. Agora clique em Review and publish. Para ativar o fluxo de trabalho, clique em "Turn on" no canto superior direito da janela.

Tela para ativar o fluxo de trabalho

Selecione Test e escolha o contato de teste para testar o fluxo de trabalho. Isso disparará o fluxo de trabalho, conforme mostrado abaixo.

Tela para escolher o contato de teste

O próximo passo é criar uma integração que detecta o WhatsApp e atualiza automaticamente os dados no CRM da HubSpot quando uma notificação é recebida. Antes de configurar o fluxo de trabalho, precisamos adicionar o contato de teste a uma lista. Clique em Contacts e em Lists para criar uma nova lista.

Depois disso, navegue até a página Workflow, crie um novo fluxo de trabalho e o nomeie como "WhatsApp Automation".

Selecione listas baseadas em contatos, adicione o nome da lista e escolha a lista estática. Clique em Next e no botão + Add filter.

Agora escolha List membership na lista Add filter para adicionar essa opção como um filtro e clique em Save list.

Tela para adicionar filtro

Depois disso, você pode continuar a configuração do fluxo de trabalho. Selecione a opção Contact-based e adicione o disparador de registro do contato a List membership.

Tela para disparar o registro do contato

Configure a tarefa que será disparada quando o fluxo de trabalho for ativado. Verifique se a tarefa aparece na linha do tempo Actions e clique em Save.

Na lista Choose an action, clique em Send a webhook.

Opção de enviar um webhook

Agora crie uma ação para enviar a carga ao ponto de extremidade quando o fluxo de trabalho for disparado.

Tela para enviar um webhook

Use a URL que você configurou na etapa anterior. Clique em Save. Por fim, continue para testar o fluxo de trabalho como você fez antes: abra a lista Test, selecione o contato de teste na lista Preview for e clique em Test. Você concluiu o fluxo de trabalho.

Agora vamos verificar os seus registros e a linha do tempo Actions. Navegue de volta à linha do tempo Actions para revisar a tarefa criada.

Registros e linha do tempo Actions

Para verificar os registros, volte ao app Glitch em execução e visualize os registros para confirmar a entrega da mensagem.

Visualizar os registros no app Glitch

Conclusão

A integração da Plataforma WhatsApp Business com a HubSpot permite automatizar o envio e o recebimento de mensagens com base em regras criadas por você para eventos e ações realizadas pelos clientes.

Neste artigo, mostramos como conectar esses dois serviços em um tutorial passo a passo que explicou como enviar mensagens do WhatsApp a contatos com dados cadastrados na plataforma HubSpot. Você configurou fluxos de trabalho personalizados que disparam ações com base em eventos predefinidos. Além disso, criou um fluxo de trabalho que envia uma notificação a um ponto de extremidade configurado anteriormente e que inicia uma nova tarefa.

Para exibir atualizações oportunas e relevantes aos seus clientes, avalie a quantidade de mensagens enviadas. Evite enviar spam aos usuários para manter os clientes satisfeitos e engajados.

Para saber mais sobre como integrar o WhatsApp a apps e projetos, consulte os nossos outros tutoriais para desenvolvedores.