Como conectar o n8n ao Workflow Webhooks

Visão geral dos casos de uso

Essa configuração conecta seu fluxo de trabalho de e-mails pós-compra no n8n ao Workflow Webhooks, para que o senhor possa coletar os dados dos clientes para uma auditoria mensal de SEO e enviá-los para Shopify Flow.

Neste exemplo, o cliente recebe um e-mail com um formulário de pesquisa (estamos utilizando o Google Form, que insere os dados em uma planilha do Google) solicitando:

• Qual é a URL da sua loja no Shopify?
• Qual é o seu maior desafio de SEO no momento? Com as seguintes opções: slow traffic growth, poor product rankings, thin content, technical errors
• Há quanto tempo o senhor administra sua loja? Com estas opções: less than 6 months, 6–12 months, 1–3 years, 3+ years
• O e-mail utilizado para o pedido na loja?

Quando o cliente envia o formulário, o n8n envia as respostas para o seu endpoint Workflow Webhooks. O Shopify Flow pode, então, marcar o cliente e adicionar uma nota para que sua equipe de SEO veja o contexto imediatamente no Shopify admin.

O que este fluxo de trabalho faz

Depois que o cliente enviar o formulário em seu Shopify Flow, os dados são adicionados à planilha e, a partir daí, o n8n envia os dados para o webhook Workflow Webhooks, e o webhook encaminha essa carga útil para Shopify Flow:

{
  "name": "Saad",
  "email": "customer@example.com",
  "store_url": "mystore.myshopify.com",
  "seo_challenge": "poor product rankings",
  "store_age": "1-3 years"
}

Seu fluxo de trabalho do Shopify Flow seria, então:

• adiciona una tag de cliente seo-audit-pending
• adiciona uma nota do cliente com a URL da loja e o desafio de SEO

Isso facilita para que sua equipe abra o registro do cliente no painel de administração Shopify e verifique o que precisa de atenção antes do início da auditoria.

Guia em vídeo

Aqui você pode assistir ao vídeo de toda a montagem; o vídeo não tem som. Você pode aumentar ou diminuir a velocidade do vídeo conforme necessário.

Antes de começar

• Instale e ative o “Workflow Webhooks” em sua loja do Shopify.
• Tenha um fluxo de trabalho do Shopify Flow pronto ou crie um novo em Shopify Flow.
• Crie seu formulário de cadastro na ferramenta que alimenta seu fluxo de trabalho do n8n. Estou usando o Google Form; assim que o formulário é enviado, uma entrada é criada nas planilhas do Google. dados recebidos do Google Form em uma planilha
• Certifique-se de coletar o endereço de e-mail do cliente exatamente como consta em Shopify, para que Shopify Flow possa identificar o cliente correto.

Configure a conexão

No site Workflow Webhooks, crie o webhook.

Insira o nome e gere um token estático (você pode criar o token estático instantaneamente pressionando o botão mágico no número 3 da imagem a seguir) e salve.

Nas Configurações avançadas, nomeie as variáveis que deseja receber:

• name
• email
• store_url
• seo_challenge
• store_age

Nas configurações, temos quatro variáveis, que mapeamos para nome, e-mail, store_url e seo_challenge; além disso, também marcamos a opção “Permitir corpo de solicitação personalizado” para receber outras informações, como store_age.

No gatilho do Google Sheets, selecione a planilha correta que deseja monitorar e crie uma entrada de teste no formulário para visualizar os dados.

Em seguida, selecione a ação “Solicitação HTTP” para enviar os dados do formulário ao webhook que o(a) senhor(a) criou por meio do aplicativo Workflow Webhooks.

O senhor pode seguir as etapas mencionadas na parte inferior da página Workflow Webhooks, que contém os campos mapeados, o token da API e a URL do webhook.

Adicionei a URL, selecionei o método POST e inseri os cabeçalhos desta forma na ação “Solicitação HTTP” do n8n.

Em seguida, mapeei as variáveis criadas no webhook às perguntas propriamente ditas. No vídeo de demonstração, o(a) senhor(a) poderá ver como arrasto e solto a resposta nos campos. Também adicionei a variável store\_age, que estava na página rolável e não coube na captura de tela.

Em seguida, execute a etapa e visualize os dados enviados do n8n para o seu webhook no aplicativo Workflow Webhooks. Nas invocações, é possível verificar que o Sistema Externo invocou esse webhook e também visualizar o payload. Você pode utilizar o payload no seu Shopify Flow para realizar qualquer ação.

Como seu webhook recebeu os dados do n8n com sucesso, salve e publique o fluxo de trabalho.

No “Shopify Flow”, crie um fluxo de trabalho que seja iniciado quando os dados do seu webhook forem recebidos por meio de Workflow Webhooks. Em seguida, no gatilho do webhook, clique em “Registrar eventos”.

Agora, acesse a chamada do webhook anterior e reproduza o webhook para enviar essa carga útil ao seu gatilho de webhook no Shopify Flow.

Agora, nos dados, é possível ver a payload e também o ID do webhook.

O senhor pode visualizar o mesmo webhook no painel de webhooks, e ele pode ser utilizado para identificar o seu webhook.

Agora adicione a condição: se o ID do webhook recebido for igual ao ID do webhook que o(a) senhor(a) criou para o Shopify Flow, execute as ações relacionadas ao formulário. Isso porque todo gatilho de webhook recebe os dados enviados para qualquer URL de webhook no aplicativo Workflow Webhooks, e esse ID o(a) ajudará a selecionar os dados relevantes do webhook para uma finalidade específica.

Utilize o valor do e-mail recebido para localizar o cliente correspondente por meio da consulta avançada. Na consulta, é possível utilizar o e-mail, e esse e-mail é obtido a partir das variáveis de acionamento do webhook. No meu caso, o campo “fieldTwo” corresponde ao e-mail. Minha consulta tem o seguinte formato: email:"{{fieldTwo}}"

Agora, verifique se o cliente existe. Estou verificando se o ID do cliente existe.

Em seguida, adicione a tag seo-audit-pending. Para obter o cliente, na configuração, utilizei este código para inserir o ID do cliente; utilizei o controle de espaços em branco na sintaxe da tag {{-, -}}, {%- e -%} para remover os espaços em branco do lado esquerdo ou direito do ID do cliente. Caso haja algum espaço em branco, a consulta não funcionará.

{%- for getCustomerData_item in getCustomerData -%}
  {{-getCustomerData_item.id-}}
{%- endfor -%}

Adicione ou atualize a nota do cliente com a URL da loja e o desafio de SEO. Para obter o cliente, na configuração, utilizei este código para inserir o ID do cliente; utilizei o controle de espaços em branco na sintaxe da tag {{-, -}}, {%- e -%} para remover espaços em branco do lado esquerdo ou direito do ID do cliente. Caso haja algum espaço em branco, a consulta não funcionará.

{%- for getCustomerData_item in getCustomerData -%}
  {{-getCustomerData_item.id-}}
{%- endfor -%}

Ative o fluxo de trabalho, envie uma resposta de teste a partir do seu formulário e confirme se o registro correto do cliente no Shopify recebe a tag e a nota.

Isso funciona da seguinte maneira: o formulário é enviado -> o N8N recebe os dados -> o N8N envia os dados para o webhook Workflow Webhooks -> o webhook Workflow Webhooks aciona o Shopify Flow -> o senhor filtra o gatilho do fluxo com base no ID do webhook -> em seguida, busca o cliente com base no ID -> verifica se o cliente está presente -> adiciona a tag -> adiciona a nota

A tag e a nota aparecem conforme mostrado na imagem a seguir para o cliente.