Category: n8n

Objetivo

O objetivo deste artigo é apresentar como construir, do zero, uma landing page funcional de captura de leads utilizando apenas o n8n — sem precisar de servidor, hospedagem própria ou ferramentas pagas de landing page. A página é servida diretamente por um Webhook do n8n, e os dados preenchidos pelo visitante (nome, e-mail e WhatsApp) são validados e salvos automaticamente em uma planilha do Google Sheets, prontos para serem usados por times de vendas, marketing ou em campanhas de captação para eventos, mentorias e materiais gratuitos.

Pré-requisitos

Para seguir este roteiro você vai precisar de:

1. Uma conta no n8n (Post da ValueHub explicando como criar sua conta, caso ainda não tenha).
2. Uma conta Google com acesso ao Google Sheets e credencial OAuth2 configurada no n8n (nó Google Sheets).
3. Noções básicas de HTML/JavaScript são úteis, mas não obrigatórias — o código já vem pronto neste artigo.

Como o fluxo funciona

O workflow é dividido em dois blocos independentes, conectados pelo próprio formulário da página:

• Bloco 1 — Exibir a página: um Webhook (GET) responde com o HTML da landing page sempre que alguém acessa a URL.
• Bloco 2 — Capturar o lead: um segundo Webhook (POST) recebe os dados enviados pelo formulário, valida as informações e grava uma nova linha no Google Sheets.

Essa separação em dois webhooks é o que permite servir uma página completa (HTML, CSS e JavaScript) e, ao mesmo tempo, processar o envio do formulário sem sair do n8n.

Figura 1: visão geral do workflow no n8n, com os dois blocos lado a lado

Configurando o Bloco 1 — Exibição da Landing Page

Passo 1: Webhook de entrada (Abrir Landing Page)

• Adicione um nó Webhook.
• HTTP Method: GET.
• Path: landing-page (esse será o endereço público da sua página).
• Response Mode: Using Response Node (a resposta será controlada por outro nó mais à frente no fluxo).

Figura 2: nó Webhook configurado com HTTP Method GET e path landing-page

Passo 2: Gerando o HTML (nó Code)

• Adicione um nó Code logo após o Webhook.
• Nele, é montada uma string HTML completa contendo:
  • Um formulário com os campos Nome, E-mail e WhatsApp;
  • Estilização própria (cores, tipografia e responsividade) direto em uma tag <style>;
  • Um script que intercepta o envio do formulário (submit), monta o payload em JSON e faz um fetch para o segundo Webhook (/webhook/capturar-lead), exibindo mensagens de sucesso ou erro para o usuário sem recarregar a página.

Trecho essencial da lógica de envio no JavaScript da página:

---

const html = `<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <title>Cadastre-se</title>
</head>
<body>
  <h1>Receba nossas novidades</h1>
  <form id="leadForm">
    <div>
      <label for="nome">Nome</label>
      <input id="nome" name="nome" required>
    </div>
    <div>
      <label for="email">E-mail</label>
      <input id="email" name="email" type="email" required>
    </div>
    <div>
      <label for="whatsapp">WhatsApp</label>
      <input id="whatsapp" name="whatsapp" type="tel" required>
    </div>
    <button id="btn" type="submit">Quero me cadastrar</button>
    <div id="msg"></div>
  </form>

  <script>
    const form = document.getElementById('leadForm'), 
          btn = document.getElementById('btn'), 
          msg = document.getElementById('msg');

    form.addEventListener('submit', async (e) => {
      e.preventDefault();
      btn.disabled = true;
      msg.textContent = 'Enviando...';
      
      try {
        const payload = Object.fromEntries(new FormData(form));
        const res = await fetch('/webhook/capturar-lead', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload)
        });
        
        if (!res.ok) throw new Error('Erro');
        
        msg.textContent = 'Cadastro realizado com sucesso!';
        form.reset();
      } catch (err) {
        msg.textContent = 'Erro ao enviar. Tente novamente.';
      } finally {
        btn.disabled = false;
      }
    });
  </script>
</body>
</html>`;

return [{ json: { html } }];

---

Dica: como o HTML inteiro está dentro do nó Code, você pode personalizar cores, textos e campos do formulário sem precisar de nenhuma ferramenta externa — basta editar a string.

Figura 3: nó Code com a string HTML da landing page

Passo 3: Respondendo com a página (Exibir Landing Page)

• Adicione um nó Respond to Webhook.
• Respond With: Text.
• Response Body: {{ $json.html }} (o HTML gerado no passo anterior).
• Em Response Headers, adicione Content-Type: text/html; charset=utf-8 para o navegador renderizar a página corretamente.

Com esses três nós, ao acessar a URL pública do Webhook (.../webhook/landing-page) o visitante já vê a landing page completa.

Figura 4: landing page aberta no navegador pela URL do webhook

Configurando o Bloco 2 — Captura e validação do lead

Passo 4: Webhook de recebimento (Receber Lead)

• Adicione um segundo nó Webhook.
• HTTP Method: POST.
• Path: capturar-lead (é este endereço que o JavaScript da página chama no envio do formulário).
• Response Mode: Using Response Node.

Figura 5: nó Webhook POST com o path capturar-lead

Passo 5: Validando os dados (nó Code)

Antes de gravar qualquer informação na planilha, o fluxo valida e normaliza os dados recebidos:

---

const body = $json.body ?? $json;
const nome = String(body.nome ?? '').trim();
const email = String(body.email ?? '').trim().toLowerCase();
const whatsappOriginal = String(body.whatsapp ?? '').trim();
const whatsapp = whatsappOriginal.replace(/\D/g, '');

if (nome.length < 2) throw new Error('Informe um nome válido.');
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) throw new Error('Informe um e-mail válido.');
if (whatsapp.length < 10 || whatsapp.length > 15) throw new Error('Informe um WhatsApp válido com DDD.');

return [{ json: {
  nome,
  email,
  whatsapp,
  data_cadastro: new Date().toISOString(),
  origem: 'landing-page'
} }];

---

Esse passo garante que:

• Nome tenha pelo menos 2 caracteres;
• E-mail siga um formato válido;
• WhatsApp contenha apenas números e tenha um tamanho compatível com DDD + número;
• Cada lead receba automaticamente uma data de cadastro e a origem do contato — útil quando você tiver mais de uma landing page alimentando a mesma planilha.

Se qualquer validação falhar, o nó lança um erro que pode ser tratado para retornar uma mensagem amigável ao visitante.

Figura 6: nó Code de validação com o script de normalização dos campos

Passo 6: Salvando no Google Sheets

• Adicione o nó Google Sheets.
• Credential: sua credencial OAuth2 do Google já conectada ao n8n.
• Operation: Append.
• Document: selecione a planilha de destino (ex: “Dados da Lead”).
• Sheet: selecione a aba correspondente (ex: “Lead”).
• Em Columns, mapeie:
  • Nome → {{ $json.nome }}
  • Email → {{ $json.email }}
  • WhatsApp → {{ $json.whatsapp }}
  • Data Cadastro → {{ $json.data_cadastro }}
  • Origem → {{ $json.origem }}

Cada novo envio do formulário vira, automaticamente, uma nova linha na planilha.

Figura 7: nó Google Sheets em modo Append com as cinco colunas mapeadas

Passo 7: Confirmando o cadastro

• Adicione um nó Respond to Webhook.
• Respond With: JSON.
• Response Body: {"success": true, "message": "Lead cadastrado com sucesso"}.
• Response Code: 201.

Esse é o retorno que o fetch da landing page recebe para exibir a mensagem de sucesso ao visitante.

Figura 8: nó Respond to Webhook devolvendo o JSON de sucesso com código 201

Testando o fluxo

1. Ative o workflow no n8n.
2. Acesse a URL pública do Webhook landing-page no navegador — a página deve carregar normalmente.
3. Preencha o formulário com nome, e-mail e WhatsApp e envie.
4. Confira se a mensagem de sucesso aparece na tela e se uma nova linha foi criada na planilha do Google Sheets.
5. Teste também os cenários de erro (e-mail inválido, campo vazio) para confirmar que as validações estão funcionando.

Figura 9: planilha do Google Sheets com o lead gravado após o teste

Boas práticas e próximos passos

• Domínio próprio: use um proxy reverso ou o domínio customizado do n8n para que a URL da landing page não exponha /webhook/....
• Proteção contra spam: considere adicionar um reCAPTCHA ou um honeypot no formulário antes de liberar em produção.
• Automação pós-cadastro: aproveite o mesmo fluxo para, logo após salvar no Google Sheets, disparar uma mensagem automática de boas-vindas por WhatsApp ou e-mail, ou enviar o lead para um CRM.
• Múltiplas origens: reaproveite o Bloco 2 (captura e validação) para receber leads de várias landing pages diferentes, apenas variando o valor do campo origem.

Conclusão

Esse fluxo mostra como o n8n pode substituir, para casos simples e de baixo volume, ferramentas pagas de landing page e captura de leads. Ao unir dois Webhooks, um nó Code para gerar a interface e outro para validar os dados, e a integração nativa com Google Sheets, é possível colocar uma página de captação no ar em minutos — sem depender de infraestrutura própria e mantendo os dados centralizados em uma planilha simples de acompanhar. É uma base sólida para evoluir depois para automações mais completas, como notificações automáticas, integração com CRM ou disparo de campanhas de WhatsApp.

Referências

N8N. Webhook Node Documentation. In: n8n Documentation. Disponível em: https://docs.n8n.io/integrations/builtin/core-nodes/n8n-nodes-base.webhook/. Acesso em: 11 set. 2026.

N8N. Google Sheets Node Documentation. In: n8n Documentation. Disponível em: https://docs.n8n.io/integrations/builtin/app-nodes/n8n-nodes-base.googlesheets/. Acesso em: 11 set. 2026.

GOOGLE. Google Sheets API Overview. In: Google for Developers. Disponível em: https://developers.google.com/sheets/api. Acesso em: 11 set. 2026.

---

Autor: Daniel J. F. Nunes — https://www.linkedin.com/in/danieljfnunes

---

Conheça as formações de IA para negócios para aumentar performance dos negócios

---

Objetivo

O objetivo deste artigo é apresentar o desenvolvimento e a implementação de um agente inteligente de onboarding para Recursos Humanos, utilizando a técnica de RAG (Retrieval-Augmented Generation) para garantir respostas precisas e fundamentadas nos documentos internos da empresa. A solução proposta integra o Supabase como um banco de dados vetorial escalável para o armazenamento e recuperação de conhecimentos, e o n8n como a camada de orquestração de fluxo de trabalho (workflow), demonstrando como a união dessas tecnologias permite automatizar a integração de novos colaboradores de forma personalizada, eficiente e segura

Pré-requisitos:

Para que possamos seguir com esse roteiro de criação de um agente simples que utiliza o RAG para obter informações especifica da sua organização precisamos de uma conta no n8n e no supabase

1. Cria sua conta no n8n: Post da ValueHub explicando como criar uma conta, caso ainda não tenha criado.
2. Crie sua conta no supabase: Post da valuehub explicando como criar uma conta no supabase

Para que possa nivelar o seu conhecimento em relação a técnica de RAG, vou deixar um artigo para que você possa entender entender os fundamentos dessa técnica. Post da ValueHub

Configurando o Supabase

• Dentro do projeto em que iremos criar o banco vetorial, selecione a funcionalidade do “SQL Editor” na parte esqueda da tela, conforme imagem abaixo:

• Execute o script na tela do “SQL Editor”

---

-- Habilita  a extensao pgvector para trabalhar com embedding vectors
CREATE EXTENSION IF NOT EXISTS vector;

-- Cria a tabela para armazenar os documentos
-- Pode mudar o nome da tabla para sua necessidade, só lembrar de substituir todos os itens da função para o mesmo nome
create table if not exists documents(
  id bigserial primary key,
  content text, -- corresponds to Document.pageContent
  metadata jsonb, -- corresponds to Document.metadata
  embedding vector(1536) -- 1536 works for OpenAI embeddings, Altere se necessario
);

-- Create a function to search for documents
create function match_documents (
  query_embedding vector(1536),
  match_count int default null,
  filter jsonb DEFAULT '{}'
) returns table (
  id bigint,
  content text,
  metadata jsonb,
  similarity float
)
language plpgsql
as $$
#variable_conflict use_column
begin
  return query
  select
    id,
    content,
    metadata,
    1 - (documents.embedding <=> query_embedding) as similarity
  from documents
  where metadata @> filter
  order by documents.embedding <=> query_embedding
  limit match_count;
end;
$$;

---

Esse script cria todo setup necessário para funcionar a base vetorial no supabase

Criando o Agente “Meu Onboarding RH”

“Meu Onboarding RH” é um agente de inteligência artificial projetado para transformar a jornada de integração de novos talentos. Através da tecnologia RAG, ele atua como um assistente consultivo 24/7, capaz de sanar dúvidas sobre benefícios consultando instantaneamente os manuais da empresa para fornecer respostas precisas e contextualizadas.

Iremos separa a criação do agente em duas etapas. A primeira etapa será a parte de ingestão dos docuemntos e a segunda parte o agente consultando a base de conhecimento para dar as respostas corretas.

Criando a ingestão de documentos no supabase

1. Passo: Gatilho de Formulário (On form submission)
   • Adicione o nó n8n Form Trigger.
   • Configure o “Form Title” como “INGESTÃO DE DOCUMENTOS”.
   • Em Fields, adicione um campo:
     • Field Name: “Faça o upload dos seus dados para testar o RAG.”
     • Field Element Type: File.
     • Accept File Types: .pdf.
2. Passo: O Coração do Fluxo (Supabase Vector Store)
   • Adicione o nó Supabase Vector Store.
   • No campo Action, selecione Insert Documents.
   • Credential to connect with: Conecte sua API do Supabase.
   • Table Name: Digite o nome da tabela criada no Supabase .
   • Importante: Este nó possui duas “entradas” na parte inferior que precisam ser preenchidas pelos nós dos passos seguintes. “Embedding” e “Document”
3. Passo: Configurar Embeddings
   • Clique no conector circular de entrada chamado Embedding (embaixo do nó Supabase) e procure por Embeddings OpenAI.
   • Credentials: Insira sua OpenAI API Key.
   • O modelo padrão geralmente é o text-embedding-3-small ou text-embedding-ada-002.
4. Passo: Carregar o Arquivo (Default Data Loader)
   • Clique no conector circular de entrada chamado Document (embaixo do nó Supabase) e adicione o nó Default Data Loader.
   • Em Data Type, selecione Binary (pois o arquivo vem do formulário).

Figura: Ingestão de documentos no n8n

Figura: Supabase Base vetorial.

Criando o agente “Meu Onboarding RH”

1. Passo: Configuração do Trigger de Interface. O fluxo inicia com o nó “When chat message received”.
   • Tipo: chatTrigger.
   • Objetivo: Capturar a entrada do usuário através de uma interface de chat e iniciar a execução do workflow.
2. Passo: Conectar o nó de “Agent AI”
   • Adicine uma opção “Options” de “System Message”, para adicionar o prompt de sistemas.
   • Elementos sugeridos para o prompt de sistemas
     • MISSÃO
     • PERSONA & TOM
     • REGRAS & RESTRIÇÕES
     • CONTEXTO & FERRAMENTAS
     • FOMATO DA SAÍDA
3. Passo: Definição do Modelo de Linguagem (Cérebro)
   • Conecte o nó “OpenAI Chat Model” à entrada Chat Model do agente.
   • Configuração: Utiliza o modelo gpt-4.1-mini ou modelo de sua preferência para processar as solicitações.
   • Credenciais: Requer uma API Key da OpenAI configurada no n8n.
4. Passo: Implementação da Base de Conhecimento (Ferramenta de Busca)
   • Conector de Vetores: Utilize o nó “Supabase Vector Store ” conectado à entrada Tool do agente.
   • Parametros do “Supabase Vector Store”
     • Credential to connect with (Sua credencial do Supabase)
     • Operation Mode (Retrieve Documents (As Tool for AI Agent))
     • Description (Prompt para identificar o objetivo do Vector Store exemplo: “buscar informações na base de conhecimento de benefícios do RH”
     • Table Name (A tabela criada na etapa de configuração do Supa base vector) é aonde será recuperado as informações
   • Configurar Embeddings
     • clique no conector circular de entrada chamado Embedding (embaixo do nó Supabase) e procure por Embeddings OpenAI.
     • Credentials: Insira sua OpenAI API Key.
     • O modelo padrão geralmente é o text-embedding-3-small ou text-embedding-ada-002.

Figura: Supabase Base vetorial.

O Agente está pronto para Ser utilizado

Conclusão

A construção deste agente no n8n representa uma solução avançada de IA Generativa aplicada ao RH, integrando o processamento de linguagem natural do modelo GPT-4 com a precisão técnica da arquitetura RAG (Retrieval-Augmented Generation). Ao conectar o nó central do Agente a uma base de conhecimento vetorial no Supabase, o sistema deixa de ser um chat genérico para se tornar um especialista em benefícios capaz de fornecer respostas fidedignas, seguras e contextualizadas para novos colaboradores. Em utilização, o agente atua como um facilitador de onboarding, reduzindo a carga operacional do Departamento Pessoal e garantindo que o colaborador receba informações estruturadas em tópicos, com destaques em termos cruciais e orientações claras para adesão, tudo isso sob rígidas regras de privacidade e fidelidade aos dados da empresa.

Referências:

Autor: Daniel J. F. Nunes https://www.linkedin.com/in/danieljfnunes

SUPABASE. LangChain: Vector Search with Supabase. In: Supabase Documentation. Disponível em: https://supabase.com/docs/guides/ai/langchain?database-method=sql. Acesso em: 5 jan. 2026.

LANGCHAIN. Supabase: Vector Store Integration. In: LangChain Documentation. Disponível em: https://docs.langchain.com/oss/javascript/integrations/vectorstores/supabase. Acesso em: 5 jan. 2026.

COPPINGER, Greg. OpenAI Embeddings and Vector Search in PostgreSQL with pgvector. Supabase Blog, 2023. Disponível em: https://supabase.com/blog/openai-embeddings-postgres-vector. Acesso em: 5 jan. 2026.

ANTHROPIC. Contextual Retrieval. Anthropic Engineering Blog, 2024. Disponível em: https://www.anthropic.com/engineering/contextual-retrieval. Acesso em: 5 jan. 2026.

---

Conheça as formações de IA para negócios para aumentar performance dos negócios

---

---

Quer simplificar seu fluxo de trabalho e conectar seus aplicativos favoritos sem precisar de código? O n8n é a ferramenta de automação perfeita para você!

Neste post, você aprenderá o passo a passo completo para criar sua conta no n8n. Mostraremos como configurar tudo rapidamente.

1- Criando Conta no n8n (https://n8n.io/)

1.1 Inicie o cadastro da nova conta no “Get Started” na tela inicial (https://n8n.io/)

1.2 Preencha o cadastro do formulário de criação de conta e inicie o teste de 14 dias no botão “Start free 14-day trial“

• O campo “Account name” é o nome que você irá dar para o seu espaço do n8n. A url para chamar seu ambiente será {Account name}.app.n8n.cloud

1.3 Responda as 5 perguntas para finalizar o cadastro:

Tradução Literal

• “[1/5] Tamanho da sua empresa?”
• “[2/5] Qual time você apoia?”
• “[3/5] O que melhor descreve sua empresa?”
• “[4/5] Qual destas opções você se sente confortável em fazer?”
• “[5/5] Como você ficou sabendo do n8n?”

1.4 Responda a pergunta:

“Quais aplicativos você planeja usar?” Tentaremos ajudar você a começar com algumas sugestões de fluxo de trabalho.

Selecione os aplicativos que deseja ou aperte “Skip” para continuar”

1.5 Etapa: Convide membros da equipe para seu espaço de trabalho.

Convide alguém para o seu board ou ou aperte “Skip” para continuar”

1.6 Seu espaço de trabalho está pronto! Comece a automatizar. “Start automating”

1.7 Ambiente pronto para automatizar e criar os seus agentes de IA

Conclusão

Ambiente do n8n pronto para criar automações

---

Conheça as formações de IA para negócios para aumentar performance.

---

---