Integrando o WhatsApp com a Shopify

Como desenvolvedor da Shopify para empresas de médio ou grande porte, você sabe da importância de ter uma boa comunicação com os seus clientes. Para alcançar esse objetivo, você pode usar a Plataforma do WhatsApp Business, que ajuda a enviar mensagens automatizadas a milhares de pessoas e a dimensionar o processo com eficiência à medida que a sua base de clientes cresce.

Este tutorial explica o processo de conexão do WhatsApp com a Shopify e de envio de mensagens de notificação do WhatsApp aos clientes com base nos eventos disparados na loja, como adicionar um produto ao carrinho ou fazer um pedido. Para isso, usaremos a API de Nuvem, hospedada pela Meta.

Pré-requisitos

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

• Instalar o Node.js e o npm
• Ter uma loja na Shopify com produtos e um sistema de processamento de pagamentos configurado
• Criar uma conta de desenvolvedor na Meta for Developers, configurar um app de empresa e selecionar uma conta do WhatsApp Business

Depois de concluir a última etapa, você receberá um token de acesso temporário. Guarde esse token porque ele será usado ao longo do tutorial.

Quando os requisitos mencionados forem atendidos, estará tudo pronto para você seguir as próximas etapas deste guia.

Criar um modelo de mensagem no WhatsApp

Com os modelos de mensagem do WhatsApp, você pode criar notificações em diferentes formatos para usar mais de uma vez ao se comunicar com os clientes depois que eles concederem ao seu app a permissão relacionada.

Siga estas etapas para criar um modelo de mensagem de notificação do pedido:

• Faça login no Gerenciador de Negócios e escolha a sua conta comercial.
• Clique no ícone de três linhas no canto superior esquerdo da página e depois selecione o Gerenciador do WhatsApp.
• Usando a navegação lateral, passe o cursor do mouse sobre o ícone Ferramentas da conta e clique em Modelos de mensagem.
• Clique em Criar modelo no canto superior direito da página.
• Na próxima página, escolha a opção Transacional como categoria. Depois, dê um nome ao modelo (neste caso, "order_confirmation") e selecione o idioma.

• Clique em Continuar para avançar para o editor de modelos.

Agora que o modelo "order_confirmation" está configurado, é hora de definir os detalhes. A mensagem deve aparecer assim para o cliente:

• Recebemos o seu pedido!

• Olá, [nome do cliente].

• Agradecemos por comprar conosco.

• Seu pedido (23190) está sendo processado. Enviaremos o seu pacote dentro de 2 a 3 dias úteis (excluindo feriados e fins de semana).

• Quando isso acontecer, você receberá outro email da nossa equipe.

No editor de modelos, escolha Texto para a seção Título. O parágrafo "Recebemos…" representa o Título. O restante da mensagem será copiado na seção Corpo.

O próximo passo é clicar duas vezes em Adicionar variável abaixo da caixa de texto Corpo para incluir duas variáveis. Copie e cole a primeira variável "{{1}}" no lugar do nome do cliente. Depois, copie e cole a segunda variável "{{2}}" no lugar do número do pedido entre parênteses.

Quando terminar, a sua mensagem deve se parecer com esta exibida abaixo. É possível ver uma prévia na mesma página.

Clique em Enviar para salvar o modelo de mensagem.

Agora que o modelo está pronto, você pode usar a Plataforma do WhatsApp Business para criar um webhook no seu administrador da Shopify e mapear um aplicativo que envia automaticamente a mensagem a um cliente quando ele faz o pedido.

Usando webhooks para enviar notificações a um servidor express

Vamos supor que você queira enviar uma mensagem automática aos clientes sempre que eles fizerem um pedido na sua loja da Shopify. É possível conferir se há novos pedidos na loja a cada cinco minutos ou mais. No entanto, não recomendamos enviar sucessivas solicitações de API à sua loja, principalmente quando não há novos pedidos de clientes.

É muito mais fácil para um webhook detectar o evento de "criação de pedido" na sua loja e notificar você sempre que um cliente fizer um pedido.

Confira as etapas básicas para criar um webhook de "criação de pedidos" e mapeá-lo para um servidor express.

Configurar um projeto Node.js

Primeiro, crie uma pasta chamada "whatsapp-demo" para o seu projeto.

Depois, inicie o comando cd no terminal em "whatsapp-demo" e execute o seguinte comando para inicializar um projeto Node.js:

npm init -y

Instale o express, a biblioteca usada para criar um servidor web no Node.js, executando o seguinte comando:

npm i express

Agora que o seu ambiente de desenvolvimento foi definido, é hora de criar o servidor express.

Criar um servidor express

Crie um arquivo chamado "test.js" dentro da pasta "whatsapp-demo". Abra-o com o editor de código-fonte da sua preferência e copie e cole o seguinte código nele:

const express = require('express')
const app = express()

app.post('/webhooks/orders/create', (req, res) => {
 console.log('Yes, We got an order!')
 res.sendStatus(200)
})

app.listen(3000, () => console.log('Now running on port 3000!'))

Com o código acima, você configurou um servidor express básico que exibe uma mensagem no terminal quando o webhook envia uma notificação de "criação de pedido".

Antes de mapeá-lo para o webhook da Shopify, configure um túnel primeiro.

Configurar um túnel de tráfego HTTPS

Ao configurar um webhook, a Shopify exige que você forneça uma URL pública para a qual será enviada a notificação.

Se estiver seguindo este tutorial em um servidor público, use a URL correspondente. Caso esteja usando a sua máquina local, crie um túnel com uma URL HTTPS que fica acessível publicamente.

Primeiro, instale o ngrok executando o comando a seguir:

npm install -g ngrok

Depois, inicie uma janela de terminal diferente e execute o seguinte comando para obter a URL encapsulada para o seu servidor local:

ngrok http 3000
Forwarding                    https://xxxx-xxx-xxx-xxx-xxx.ngrok.io

Anote a URL porque você precisará dela na próxima etapa. É importante lembrar que, se você reiniciar esse cliente, obterá uma nova URL e precisará atualizar todas as referências a ela.

Criar um webhook na Shopify

Acesse o administrador da sua loja na Shopify e navegue até Configurações > Notificações. Nesta seção, role a tela para baixo até Webhooks e clique em Criar webhook.

Adicione um webhook para "criação de pedido" e especifique a URL encapsulada ou pública criada na seção anterior.

Execute o seu servidor local em um terminal diferente com o nó index.js e clique em Enviar notificação de teste.

Se tudo correr conforme o esperado, você receberá esta mensagem no terminal do seu servidor: "Recebemos um pedido".

Agora você tem uma conexão ativa entre a sua loja na Shopify e o servidor express. O próximo passo é enviar o modelo de mensagem do WhatsApp ao cliente depois que ele fizer um pedido.

Enviar uma mensagem personalizada com o modelo "order_notification"

Primeiro, instale o Axios executando o seguinte comando no seu terminal:

npm i axios

Você usará o Axios para tornar a solicitação POST responsável por enviar a mensagem do WhatsApp ao cliente.

Quando finalizar a instalação do Axios, crie outro arquivo na pasta do projeto chamado "customMessage.js". Depois, importe "axios" e "express" para o arquivo com o seguinte código:

const axios = require('axios').default
const express = require('express')
const app = express()

Agora crie uma rota para gerenciar a notificação de criação de pedido da Shopify executando o seguinte:

app.post('/webhooks/orders/create', async (req, res) => {
const body = await getRawBody(req);

const order = JSON.parse(body.toString());

console.log("Yes, We got an order!", order.customer.phone);
  
// Remaining code will go here

})

Quando a Shopify faz uma chamada para /webhooks/orders/create com um pedido, os detalhes da compra são enviados à rota dentro de "res", do segundo argumento da sua função de retorno de chamada assíncrona e de um objeto JavaScript.

Agora pegue o número de telefone, assim como o nome e a identificação do pedido do cliente, e use essas informações para construir os parâmetros da solicitação de API:

        const data = {
        "messaging_product": "whatsapp", 
         "to": `${order.customer.phone}`, 
        "type": "template", 
         "template": { 
        "name": "order_confirmation", 
        "language": { "code": "en_GB" },
        "components": [
        {
          "type": "body",
          "parameters": [
          {
            "type": "text",
            "text": `${order.customer.first_name}`
          },
          {
            "type": "text",
            "text": `${order.id}`
          }
        ]
      }
    ] 
  } 
} 

O objeto acima contém todos os parâmetros necessários para concluir a solicitação. O nome do modelo especificado no objeto precisa corresponder ao criado anteriormente no Gerenciador de Negócios do WhatsApp.

Depois, crie um objeto "config" com um objeto de "headers" aninhado. Dentro de "headers", defina o seu token de acesso do WhatsApp como o valor "Authorization" (substitua ACCESS_TOKEN pelo token) e "application/json" como "Content-Type":

 const config = {
 headers: { Authorization: `Bearer <ACCESS_TOKEN>`, 'Content-Type':   'application/json'}
};

O próximo passo é criar uma solicitação POST com o Axios e transmitir o objeto "config" e o objeto "data" como argumentos. Aninhe os métodos "then" e "catch" para mostrar o resultado (ou a mensagem de erro, caso ocorra uma falha na promessa):

  if (order.customer.phone) {
   return res.sendStatus(403);
  } else {
  axios
  .post(
    "https://graph.facebook.com/<API_VERSION>/<YOUR_WABA_ID>/messages",
  data,
  config
  )
  .then((result) => console.log(result))
  .catch((err) => console.log(err));

  return res.sendStatus(200);
}

Substitua YOUR_WABA_ID pela identificação do WhatsApp Business no painel do app WhatsApp e API_VERSION por uma versão compatível da API de Nuvem (o padrão é a v15.0).

O app foi configurado!

Para testá-lo, o túnel ngrok ainda deve estar em execução, e você precisará iniciar o servidor express em um terminal específico:

node customMessages.js

Outros eventos da Shopify

Além do envio de pedidos, a Shopify oferece mais de 50 webhooks para diferentes eventos. Você pode assinar webhooks de criação e atualizações de carrinho, criação e atualizações de coleção de produtos, tentativas de cobrança bem-sucedidas e com falha e muitos outros.

Se quiser usar qualquer um desses webhooks, siga um padrão semelhante ao descrito acima. Para isso, crie um novo webhook no seu administrador da Shopify e registre o tópico como uma rota no seu servidor express.

Como pudemos ver, a Plataforma do WhatsApp Business ajuda você a se comunicar com os seus clientes, seja manualmente ou de forma programática, com base em eventos na sua loja da Shopify.

A integração do WhatsApp e da Shopify permite que você envie mensagens em massa aos clientes em tempo real. As mensagens podem ser enviadas automaticamente (por exemplo, com base em um evento) ou de forma manual. E é dimensionável, além de ser fácil de configurar. O emparelhamento do WhatsApp e da Shopify torna a comunicação com o cliente consistente, eficaz e impactante.

Para saber mais sobre como você pode integrar o WhatsApp nos seus apps e projetos, consulte os nossos outros tutoriais para desenvolvedores.