Como integrar o Shopify com o Whaticket usando o n8n

Com esta integração, cada vez que um visitante preenche o formulário de contato da sua loja Shopify, o n8n captura os dados e envia uma mensagem de WhatsApp pelo Whaticket. Assim sua equipe comercial atende o lead muito mais rápido.

O que muda para sua operação

Os dados do formulário do Shopify chegam sozinhos ao Whaticket.
O lead recebe uma mensagem no WhatsApp logo depois de enviar o formulário.
A captação de leads fica centralizada na sua plataforma de atendimento.

Antes de começar

Tenha uma loja ativa no Shopify e acesso de administrador ao editor de temas.
Tenha uma conta no n8n.
No Whaticket, seu perfil precisa da permissão Criar do grupo Tokens de API para gerar o token.
O perfil escolhido para o token precisa das permissões Criar e Iniciar do grupo Campanhas, que a API Send usa para enviar mensagens.
A conexão de WhatsApp usada no envio precisa estar conectada.
Cada mensagem enviada pela API Send consome créditos de mensagem.

Passo a passo:

Abra o código do tema no Shopify

No Shopify, acesse Canais de vendas e selecione Loja virtual.
Abra Temas.
No tema que você usa, clique nos três pontos e selecione Editar código.

Localize o arquivo do formulário de contato

No editor de código, abra a pasta Blocks.
Abra o arquivo do formulário de contato, normalmente contact-form.liquid.

Insira o script do Webhook no formulário

No arquivo do formulário, adicione o script abaixo. Ele captura nome, e-mail, telefone e mensagem do formulário e envia tudo para o Webhook do n8n pelo método POST.

<script>
(function() {
  var N8N_WEBHOOK_URL = 'WEBHOOK_URL';
  document.addEventListener('DOMContentLoaded', function() {
    var forms = document.querySelectorAll('.contact-form__form');
    forms.forEach(function(form) {
      form.addEventListener('submit', function() {
        var nome     = (form.querySelector('[name="contact[name]"]') || {}).value || '';
        var email    = (form.querySelector('[name="contact[email]"]') || {}).value || '';
        var telefone = (form.querySelector('[name="contact[phone]"]') || {}).value || '';
        var mensagem = (form.querySelector('[name="contact[body]"]') || {}).value || '';
        fetch(N8N_WEBHOOK_URL, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            nome: nome,
            email: email,
            telefone: telefone,
            mensagem: mensagem
          })
        })
        .then(function(res) { console.log('[n8n] Webhook enviado, status:', res.status); })
        .catch(function(err) { console.error('[n8n] Erro:', err); });
      });
    });
  });
})();
</script>

Substitua WEBHOOK_URL pela URL do Webhook do seu fluxo no n8n, que você copia na próxima etapa.
Salve o arquivo.

Configure o nó Webhook no n8n

No n8n, crie um workflow e adicione um nó Webhook.
Em HTTP Method, selecione POST.
Em Authentication, deixe None.
Em Respond, selecione Immediately.
Copie a URL de teste ou de produção do Webhook e cole no script do Shopify.

Teste o recebimento dos dados

No nó Webhook, clique em Listen for test event.
Envie um formulário de teste pela sua loja Shopify.
Confira se o Webhook mostra os cabeçalhos, os parâmetros e o corpo recebido.

Gere o token no Whaticket

No menu à esquerda do Whaticket, clique em Integrações e abra a aba Tokens.
Clique em Novo token, escreva um Nome e, em Perfil, escolha um perfil com as permissões Criar e Iniciar do grupo Campanhas.
Clique em Salvar.
Na janela Copie a chave do token, copie a chave. Ela não aparece de novo depois que você fecha a janela.

Copie o ID da conexão

No Whaticket, clique em Conexões.
No card da conexão que vai enviar as mensagens, abra o menu de ações e clique em Editar.
Na janela Editar Conexão, clique no ícone de copiar ao lado do título.

Crie o nó HTTP Request para o Whaticket

Depois do Webhook, adicione um nó HTTP Request.
Em Method, selecione POST.
Em URL, informe https://api.whaticket.com/api/v1/messages.
Ative Send Headers e adicione dois parâmetros: accept com o valor */* e Authorization com o valor Bearer, um espaço e a chave do token.

Monte o JSON da mensagem

Ative Send Body, selecione JSON em Body Content Type e Using JSON em Specify Body.
Cole o modelo abaixo e troque ID_DA_SUA_CONEXAO pelo ID que você copiou.

{
  "connectionId": "ID_DA_SUA_CONEXAO",
  "messages": [
    {
      "number": "TELEFONE_DO_FORMULARIO",
      "name": "NOME_DO_FORMULARIO",
      "body": "MENSAGEM_DO_FORMULARIO"
    }
  ]
}

Nos dados do Webhook, arraste o campo telefone para o lugar de TELEFONE_DO_FORMULARIO, o campo nome para NOME_DO_FORMULARIO e o campo mensagem para MENSAGEM_DO_FORMULARIO. O n8n cria a referência ao dado automaticamente.
Se quiser, escreva um texto fixo em body junto com os dados, como uma saudação.

O campo name é usado para criar o contato no Whaticket quando o número ainda não existe. Sem ele, o contato fica com o número como nome.

Confirme o envio

Clique em Execute Step no nó HTTP Request.
Confira se a resposta é messages scheduled. Ela indica que o Whaticket recebeu e agendou o envio.
Teste com a URL de teste do Webhook antes de ativar o workflow com a URL de produção.

Perguntas frequentes

Em que formato o telefone precisa chegar?
Em formato internacional, com código do país e DDD, só com dígitos (por exemplo, 5511999999999). Confira se o campo de telefone do seu formulário está coletando o número assim.

Posso usar uma conexão da API do WhatsApp (Cloud API)?
Sim, mas nas conexões da API do WhatsApp a API Send só envia modelos de mensagem aprovados. Inclua o campo templateId com o ID do modelo no JSON.

A resposta começou com You have ... credits. O que significa?
A empresa não tem créditos para todas as mensagens. As que não forem para chats com conversa aberta deixam de ser enviadas quando os créditos acabam.

O script não envia nada. O que verifico?
Confira se o formulário do seu tema usa a classe contact-form__form e os campos contact[name], contact[email], contact[phone] e contact[body]. Temas diferentes podem usar nomes diferentes; nesse caso, ajuste o script ou peça ajuda a uma pessoa desenvolvedora.