Modelo aberto · MIT · sem build
Sua central de ajuda vira um mapa
Em vez de FAQ, a pessoa escolhe o problema que tem agora e recebe um caminho em ordem, com perguntas de sim ou não e o link certo em cada etapa.
Em vez de FAQ, a pessoa escolhe o problema que tem agora e recebe um caminho em ordem, com perguntas de sim ou não e o link certo em cada etapa.
O mapa-ajuda é um modelo pronto de central de ajuda para sites, cursos, comunidades e produtos. Em vez de uma lista de perguntas frequentes, o visitante clica no problema que tem agora e vê um caminho em etapas, com o link certo em cada uma. Serve para quem recebe sempre as mesmas dúvidas ou tem conteúdo espalhado em vários lugares. É uma página HTML só: para usar, basta editar um arquivo de texto com os seus caminhos e publicar em qualquer hospedagem.
Três ideias fazem o mapa funcionar melhor que um FAQ.
Os cartões são escritos como a pessoa pediria ajuda ("não encontro um conteúdo"). Um clique abre as etapas em ordem, na mesma página.
No ponto em que a maioria trava, uma pergunta de sim ou não manda de volta quem ainda não fez o pré-requisito. Menos dúvida repetida no suporte.
Visual e lógica ficam no index.html. Textos, links e ilustrações ficam no config.js. Trocou o arquivo, trocou o mapa.
O modelo já vem configurado com 6 caminhos que cobrem inema.club, inema.pro, inema.vip, eventos, news, busca e o arquivo de aventura. Clique num cartão e siga as etapas. Há também um exemplo genérico, de uma empresa fictícia, para usar como ponto de partida.
Cada caminho é uma sequência de peças. O motor monta a trilha na horizontal no computador e em coluna no celular.
Uma ação com um link. passo
O que leva ao próximo: "Não achou?", "Se sim". seta
Sim ou não, com um desvio para quem não está pronto. pergunta
Várias opções do mesmo nível, numeradas. lista
Leva a outro cartão e liga os caminhos. saida
Nada de instalar framework. Um editor de texto e um lugar para publicar.
Qualquer um serve (VS Code, Notepad++, o do sistema). Você só edita o config.js.
# abrir a pasta no VS Code code mapa-ajuda
Para copiar o modelo e publicar no GitHub Pages. Sem Git, baixe o ZIP pelo GitHub.
# conferir se está instalado git --version
GitHub Pages, Vercel, Netlify ou o servidor do seu site. Também abre direto no navegador.
# testar no computador python3 -m http.server 8000
Seis passos, do download à página no ar.
Clone o repositório (ou use "Use this template" no GitHub, ou baixe o ZIP).
git clone https://github.com/inematds/mapa-ajuda.git meu-mapa cd meu-mapa
O config.js que vem no repo é o do INEMA. Troque pelo exemplo em branco, que já traz comentários com todos os campos.
cp exemplos/config.vazio.js config.js
Cada problema é um cartão. O fluxo é a lista de peças, na ordem em que aparecem. Texto aceita **negrito**.
{
id: 'suporte',
titulo: 'Algo deu errado',
resumo: 'Erro, acesso ou cobrança.',
icone: 'escudo',
imagem: 'assets/suporte.webp', // opcional
fluxo: [
{ tipo: 'passo', rotulo: 'Mais rápido', tempo: 'Na hora', titulo: 'Busque na base de ajuda',
link: { texto: 'Buscar', url: 'https://exemplo.com/ajuda' } },
{ tipo: 'seta', rotulo: 'Não achou?' },
{ tipo: 'pergunta', pergunta: 'Você já tem conta?',
ramo: { rotulo: 'Se não', tipo: 'nao', titulo: 'Crie primeiro.', abrir: 'primeiros-passos' } },
{ tipo: 'seta', rotulo: 'Se sim', cor: 'sim' },
{ tipo: 'saida', pergunta: 'Ainda travado?', texto: 'Falar com uma pessoa', destino: 'contato' }
]
}
Salve uma imagem por cartão em assets/ (WebP, 3:2, até ~100 KB) e aponte no campo imagem. A capa da página vai em capa. Sem imagem, o cartão mostra o ícone. Use a mesma linha visual em todas: mesma paleta, luz e fundo, sem texto dentro da imagem.
# converter uma imagem para WebP leve ffmpeg -i arte.png -vf scale=960:-1 -q:v 80 assets/suporte.webp
Abra o servidor local e clique em todos os cartões. Cada caminho tem endereço próprio: #suporte abre direto o caminho de suporte.
python3 -m http.server 8000 # abra http://localhost:8000/#suporte
Suba para o GitHub e ligue o Pages (ou arraste a pasta para a Vercel ou a Netlify). Não há build.
git add -A && git commit -m "meu mapa de ajuda" && git push gh api -X POST repos/<usuario>/<repo>/pages -f 'source[branch]=main' -f 'source[path]=/'
"Preciso de ajuda com acesso", não "Suporte". A pessoa tem que se reconhecer no cartão.
Mais que isso, quebre em dois caminhos e ligue com uma Saída.
No ponto onde a maioria trava. Quem não fez o anterior volta uma casa.
E um verbo no botão: "Abrir", "Buscar", "Escrever".
No suporte: o que responde na hora primeiro, pessoas depois, e-mail por último.
Todo caminho termina em outro caminho ou num canal humano.
Tudo isso sai do mesmo config.js, sem mexer no motor.
O que está marcado como ideia ainda não foi feito.
config.js por idioma e seletor na página.