V4 Ames · Sistema de Clientes

Configuração

Guia completo de deploy e integração N8N + GitHub Pages

URLs dos Webhooks (cole aqui após criar no N8N)

Webhook 1 — Receber Cadastro & Health Score POST

Recebe cadastros de novos clientes e snapshots mensais de Health Score

Webhook 2 — Buscar Base de Clientes GET

Retorna o JSON com todos os clientes para popular a aba Base de Clientes

Webhook 3 — Atualização em Tempo Real POST

Usado para salvar edições de campos, equipe e mudanças de status/fase diretamente da Base de Clientes

Passo a Passo — Deploy Completo

Publicar no GitHub Pages

Coloque o sistema no ar em menos de 5 minutos — gratuito

1.1

Crie um repositório no GitHub

Acesse github.com → New repository. Dê um nome (ex: v4-ames-dashboard), marque Public e clique em Create repository.

1.2

Faça upload do arquivo HTML

Na página do repositório clique em Add file → Upload files. Arraste o arquivo v4-client-system.html e clique em Commit changes.

⚠️ Importante: renomeie o arquivo para index.html antes de subir — assim o GitHub Pages vai servir ele na raiz.

1.3

Ative o GitHub Pages

Vá em Settings → Pages (menu lateral esquerdo). Em Source selecione Deploy from a branch, escolha a branch main e a pasta / (root). Clique em Save.

Aguarde ~1 minuto e o sistema estará acessível em:
https://SEU-USUARIO.github.io/v4-ames-dashboard/

1.4

Para atualizar o sistema no futuro

Basta fazer upload do novo index.html pelo mesmo caminho Add file → Upload files. O GitHub Pages atualiza automaticamente em até 1 minuto após o commit.

Configurar o N8N (instância cloud ou self-hosted)

Crie os 3 workflows que servirão de backend para o sistema

2.1

Acesse seu N8N e crie um novo Workflow

Se ainda não tem N8N, crie uma conta gratuita em app.n8n.cloud (plano Free inclui até 5 workflows ativos). Clique em + New Workflow.

2.2

Habilite o CORS no N8N (obrigatório para GitHub Pages)

Como o sistema roda no domínio github.io, o N8N precisa aceitar requisições de origens externas.

N8N Cloud: Vá em Settings → n8n Settings → Allow all CORS origins e ative.
Self-hosted: Adicione ao seu .env ou variáveis de ambiente:

N8N_CORS_ORIGIN=https://SEU-USUARIO.github.io
N8N_CORS_METHODS=GET,POST,OPTIONS

Workflow 1 — Receber Cadastro & Health Score

Salva novos clientes e atualizações mensais no Google Sheets

3.1

Adicione o node Webhook (POST)

No workflow vazio clique em + e busque Webhook. Configure:

Method: POST
Path: cadastro-cliente
Response Mode: Last Node

Clique em Listen for Test Event e copie a URL gerada. Cole no campo Webhook 1 no topo desta página.

3.2

Adicione um node IF para separar tipos

Conecte ao Webhook. Configure a condição:

Value 1: {{ $json.tipo }}
Operation: Equal
Value 2: monthly_snapshot

O branch true vai para o Health Score, o branch false vai para o Cadastro.

3.3

Branch FALSE — Salvar cadastro no Google Sheets

Adicione o node Google Sheets → Append Row. Conecte sua conta Google e selecione a planilha "Clientes". Mapeie as colunas:

razao_social     → {{ $json.razao_social }}
nome_fantasia    → {{ $json.nome_fantasia }}
cnpj             → {{ $json.cnpj }}
squad            → {{ $json.squad }}
status           → Ativo
fase             → {{ $json.fase || "Saber" }}
coordenador      → {{ $json.coordenador }}
gestor_projetos  → {{ $json.gestor_projetos }}
gestor_trafego   → {{ $json.gestor_trafego }}
designer         → {{ $json.designer }}
segmento         → {{ $json.segmento }}
responsavel      → {{ $json.responsavel }}
email            → {{ $json.email }}
whatsapp         → {{ $json.whatsapp }}
data_inicio      → {{ $json.data_inicio }}
valor_mensal     → {{ $json.valor_mensal }}
margem_contribuicao → {{ $json.margem_contribuicao }}
tier             → {{ $json.tier }}
objetivo         → {{ $json.objetivo }}

3.4

Branch TRUE — Salvar Health Score no Sheets

Adicione outro Google Sheets → Append Row apontando para a aba "Health Score" da mesma planilha:

cnpj         → {{ $json.cnpj }}
cliente      → {{ $json.cliente }}
mes          → {{ $json.mes }}
score_final  → {{ $json.score_final }}
inv_projetado → {{ $json.inv_projetado }}
inv_realizado → {{ $json.inv_realizado }}
faturamento  → {{ $json.faturamento_mes }}
roi          → {{ $json.roi }}
mmf          → {{ $json.mmf }}

3.5

Resposta ao Webhook

Junte os dois branches com o node Merge (mode: Pass-through) e adicione um node Respond to Webhook configurado como:

Response Code: 200
Response Body: {"status":"ok","timestamp":"{{ $now }}"}

Ative o workflow clicando em Save e depois no toggle Active.

Workflow 2 — Retornar Base de Clientes

Lê o Google Sheets e devolve o JSON para a aba Base de Clientes

4.1

Adicione o node Webhook (GET)

Crie um novo workflow. Adicione Webhook e configure:

Method: GET
Path: get-clientes
Response Mode: Last Node

Copie a URL e cole no campo Webhook 2 no topo desta página.

4.2

Adicione Google Sheets → Get All Rows

Conecte ao Webhook. Use Google Sheets → Get Rows apontando para a aba "Clientes". Marque Return All para trazer todos os registros.

4.3

Adicione um Code node para formatar o retorno

Conecte ao Google Sheets e adicione um node Code. Cole o código abaixo — ele garante que o sistema receba um array válido mesmo que o Sheets retorne linhas vazias:

// Formatar array de clientes para o dashboard
const rows = $input.all();
const clientes = rows
  .map(r => r.json)
  .filter(c => c.razao_social && c.razao_social.trim() !== '')
  .map(c => ({
    ...c,
    score_final:      parseFloat(c.score_final) || 0,
    valor_mensal:     parseFloat(c.valor_mensal) || 0,
    inv_realizado:    parseFloat(c.inv_realizado) || 0,
    faturamento_mes:  parseFloat(c.faturamento_mes) || 0,
    roi:              parseFloat(c.roi) || 0,
    mmf:              parseFloat(c.mmf) || 0,
    margem_contribuicao: parseFloat(c.margem_contribuicao) || 0,
  }));

return [{ json: { clientes } }];

4.4

Respond to Webhook com o array

Adicione Respond to Webhook:

Response Code: 200
Response Body: {{ JSON.stringify($json) }}

Ative o workflow. Clique em ⟳ Atualizar na aba Base de Clientes para testar.

Workflow 3 — Atualização em Tempo Real

Recebe edições de campos individuais e atualiza o Sheets na linha correta

5.1

Webhook POST + Encontrar linha pelo CNPJ

Crie um novo workflow. Adicione Webhook (POST) com path update-cliente. Copie a URL e cole no campo Webhook 3.

Adicione Google Sheets → Get Rows (aba Clientes, Return All) para buscar todas as linhas. Em seguida, adicione um node Code para localizar a linha pelo CNPJ:

// Encontrar índice da linha pelo CNPJ
const cnpj    = $('Webhook').item(0).json.cnpj;
const rows    = $input.all();
const rowIdx  = rows.findIndex(r => r.json.cnpj === cnpj);
const updates = $('Webhook').item(0).json;

return [{ json: { rowIndex: rowIdx + 2, updates } }];
// +2 porque Sheets começa em 1 e linha 1 é o cabeçalho

5.2

Google Sheets → Update Row

Adicione Google Sheets → Update Row. Em Row Number coloque {{ $json.rowIndex }}.
Mapeie os campos que podem ser atualizados (basta mapear todos — o Sheets só sobrescreve os que tiverem valor):

status           → {{ $json.updates.status }}
fase             → {{ $json.updates.fase }}
squad            → {{ $json.updates.squad }}
coordenador      → {{ $json.updates.coordenador }}
gestor_projetos  → {{ $json.updates.gestor_projetos }}
gestor_trafego   → {{ $json.updates.gestor_trafego }}
designer         → {{ $json.updates.designer }}
score_final      → {{ $json.updates.score_final }}
inv_realizado    → {{ $json.updates.inv_realizado }}
faturamento_mes  → {{ $json.updates.faturamento_mes }}

5.3

Respond to Webhook e ativar

Adicione Respond to Webhook com {"status":"ok"} e ative o workflow. A partir de agora toda edição feita no painel de detalhes será salva automaticamente no Google Sheets.

Estrutura da Planilha Google Sheets

Crie uma planilha com estas duas abas exatamente com os nomes abaixo

// ABA 1: "Clientes" — cabeçalho na linha 1 (ordem não importa)
razao_social | nome_fantasia | cnpj | segmento | responsavel | cargo
email | whatsapp | data_inicio | valor_mensal | ciclo_pagamento
dia_vencimento | duracao_contrato | squad | status | fase
coordenador | gestor_projetos | gestor_trafego | designer
margem_contribuicao | inv_projetado | faturamento_anual | tier
objetivo | servicos | observacoes | score_final
inv_realizado | faturamento_mes | roi | mmf

// ABA 2: "Health Score" — snapshots mensais
cnpj | cliente | mes | score_final | inv_projetado | inv_realizado
faturamento_mes | roi | mmf

// Valores aceitos para campos controlados:
status: "Ativo" | "Em Desligamento" | "Inativo"
fase:   "Saber" | "Ter" | "Executar" | "Potencializar"
squad:  "Falcons" | "Delta" | "Outro"