Essa integração permite que, sempre que um visitante preencher um formulário em sua loja Shopify, as informações enviadas sejam capturadas automaticamente pelo n8n e, posteriormente, enviadas como uma mensagem para o Whaticket, agilizando o suporte de vendas e automatizando o processo de geração de leads.

🔵 O que você pretende alcançar com essa integração?

▪️ Receba automaticamente os dados enviados pelos formulários do Shopify.
▪️ Automatize o envio de mensagens para o Whaticket
▪️ Melhore o tempo de resposta da sua equipe de vendas
▪️ Centralize a geração de leads em sua plataforma de atendimento ao cliente.

🔵 Pré-requisitos

Antes de começar, certifique-se de ter o seguinte:

▪️ Uma loja ativa na Shopify
▪️ Acesso administrativo ao editor de temas da Shopify
▪️ Uma conta ativa no n8n
▪️ Um fluxo criado no n8n com um nó Webhook
▪️ Token de API ativo no Whaticket
▪️ ID de conexão configurado no Whaticket

🔵 Passo 1: Acesse o código do seu tema no Shopify

Dentro do Shopify, você precisará acessar as configurações do tema para editar o código-fonte da sua loja.

Rota de navegação:

▪️ Acesse os Canais de Vendas
▪️ Selecione a loja virtual
▪️ Insira os tópicos
▪️ Clique nos três pontos do tópico desejado.
▪️ Selecione Editar código

🔵 Passo 2: Localize o arquivo do formulário de contato

Uma vez dentro do editor de código, você precisará encontrar o arquivo correspondente ao formulário que será usado para capturar as informações enviadas pelo cliente.

Normalmente, esse arquivo está localizado na seguinte pasta:

▪️ Blocos

E o arquivo normalmente utilizado é:

▪️ contact-form.liquid

Legenda: Arquivo do formulário de contato onde o script de integração será inserido.

🔵 Passo 3: Insira o script do Webhook n8n no formulário

No arquivo do formulário, você deve adicionar o código JavaScript responsável por capturar os dados inseridos e enviá-los automaticamente para o Webhook gerado pelo n8n.

Este script será responsável por:

▪️ Nome da captura
▪️ Capturar e-mail
▪️ Capturar telefone
▪️ Capturar mensagem do formulário
▪️ Envie todas as informações para o Webhook usando o método POST.

Importante:

▪️ Você deve substituir o URL do Webhook pelo URL gerado em seu próprio fluxo n8n.

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

🔵 Etapa 4: Configure o nó Webhook no n8n

Agora será necessário criar um nó Webhook no n8n para receber as informações enviadas pelo Shopify.

Configure o Webhook da seguinte forma:

▪️ Método HTTP: POST
▪️ Autenticação: Nenhuma
▪️ Responder: Imediatamente

Após a configuração:

▪️ Copie o URL de teste ou de produção do Webhook
▪️ Utilize-o dentro do script inserido no Shopify

🔵 Etapa 5: Validar a recepção de dados no n8n

Após configurar o Webhook, você precisará ativar a opção "Ouvir eventos de teste" e enviar um formulário de teste do Shopify.

Se tudo estiver correto:

▪️ O Webhook capturará automaticamente a solicitação.
▪️ Ele exibirá cabeçalhos, parâmetros e o corpo recebido.

🔵 Etapa 6: Crie o nó de solicitação HTTP para enviar informações ao Whaticket

Após o Webhook, você precisará adicionar um nó de Requisição HTTP para enviar as informações capturadas para a API do Whaticket.

Configuração recomendada:

▪️ Método: POST
▪️ URL: https://api.whaticket.com/api/v1/messages
▪️ Tipo de conteúdo do corpo: JSON

🔵 Etapa 7: Configurar a autenticação da API Whaticket

No nó de solicitação HTTP, você precisará adicionar seu token de autorização da API.

Nos cabeçalhos:

▪️ aceitar: /
▪️ Autorização: Portador TU_TOKEN_DE_API

Importante:

▪️ Substitua o token de exemplo pelo seu token real gerado no Whaticket.

🔵 Etapa 8: Estruture o JSON de envio do Whaticket

Agora você deve montar o corpo JSON com a estrutura que será enviada para a Whaticket.

Este JSON deve conter:

▪️ ID de conexão
▪️ Número do cliente
▪️ Mensagem personalizada
▪️ Variáveis dinâmicas capturadas do Shopify

Exemplo de informação enviada:

▪️ Nome do cliente
▪️ Número de telefone do cliente
▪️ E-mail
▪️ Mensagem enviada a partir do formulário

 {
  "connectionId": "TU_CONNECTIONID",
  "messages": [
    {
      "number": "{{$json.body.telefone}}",
      "name": "Whaticket",
      "body": "{{ $json.body.mensagem }}"
    }
  ]
 }

🔵 Etapa 9: Valide o envio bem-sucedido para o Whaticket

Após a execução bem-sucedida do nó de solicitação HTTP, o n8n exibirá a confirmação do envio.

Resposta esperada:

▪️ mensagens agendadas

Isso significa que a mensagem foi agendada corretamente para ser enviada à Whaticket.

🔵 Informações importantes

▪️ Recomendamos que você teste primeiro usando a URL de teste do Webhook antes de passar para a produção.
▪️ Sempre verifique se o número recebido da Shopify está no formato internacional correto.
▪️ Certifique-se de que sua conexão Whaticket esteja ativa antes de testar o fluxo.
▪️ O token da API utilizado deve ter permissões para envio de mensagens.

🔵 Resumo final

Com essa integração, você terá se conectado com sucesso:

▪️ Shopify como plataforma de captura de formulários
▪️ n8n como um sistema de automação de fluxo
▪️ Whaticket como plataforma para receber e gerenciar mensagens

Graças a esse processo, sempre que um cliente preencher um formulário no Shopify, as informações serão enviadas automaticamente para o Whaticket, sem a necessidade de intervenção manual, permitindo um atendimento mais rápido, organizado e profissional.

Tem mais alguma dúvida? Não se preocupe, estamos aqui para ajudar. Entre em contato com nossa equipe clicando no botão "Suporte" localizado no menu à esquerda da nossa plataforma.