Como criar um tour do produto sem programador
Um tour do produto mostra ao usuário novo onde fica cada coisa: “aqui você cria um projeto, aqui convida o time”. No Clew você clica nos elementos do seu próprio app, escreve uma frase por passo e publica: sem aprender seletores e sem subir código.
- Tempo
- ● 20 minutos
- Preço
- Plano Free
- Formato
- Tooltips passo a passo
O que é um tour do produto do Clew
Um tour do produto (tour guiado, walkthrough) é uma sequência de tooltips presos a elementos da página. No Clew é o formato Tooltips passo a passo: cada passo aponta um elemento, tem título e texto, e o usuário clica em Próximo até Concluir.
Não precisa escrever seletores CSS: Editar no seu site abre o editor por cima do seu site, onde Escolher elemento deixa você clicar no próprio elemento. O tour acompanha a navegação de apps de página única e mostra em qual passo as pessoas desistem.
Onde um tour compensa
Primeira sessão num SaaS
De três a cinco passos na tela principal, até a ação que entrega valor primeiro. Tours longos são pulados.
Uma seção nova ou redesenhada
Usuários abrem uma tela que mudou: um tour curto nessa URL explica o que saiu do lugar.
Formulários complexos
Configurações, integrações, relatórios com filtros: um tooltip por campo difícil poupa chamados no suporte.
Ver onde as pessoas param
O funil mostra quantos viram cada passo. Um passo com muita queda costuma indicar uma tela confusa, não um tooltip ruim.
Como criar um tour do produto em 5 passos
- Passo 01
Copie o seu snippet do Clew
Crie uma conta grátis (ou entre), adicione o seu site e abra Visão geral no admin. Clique na linha do cartão O widget ainda não deu sinal. para copiar: ela já vem com a chave real do seu site no lugar do marcador.
<!-- Clew: troque COLE_AQUI_SUA_CHAVE pela chave do site em Admin > Visão geral --> <script src="https://tryclew.io/widget/COLE_AQUI_SUA_CHAVE.js" async></script>
Passo 1 · ilustração esquemática - Passo 02
Coloque a linha no site uma única vez
Cole o snippet onde você gerencia o site. Cada guia leva de 5 a 10 minutos e não precisa ser repetido: todo o resto acontece no Clew.
Passo 2 · ilustração esquemática - Passo 03
Monte o tour por cima da sua página
No Clew abra Fluxos → + Novo fluxo, deixe Formato em Tooltips passo a passo e clique em Editar no seu site. Na sua página clique em Escolher elemento, clique no elemento do passo 1 e escreva um título e uma ou duas frases. Repita para 3–5 passos; a prévia se atualiza enquanto você digita.
Passo 3 · ilustração esquemática - Passo 04
Escolha onde, quando e para quem aparece
No mesmo editor, preencha Onde mostrar (URL da página), Quando mostrar, Segmentação de público e Frequência. Estas são as configurações do exemplo acima:
Configuração Valor Formato Tooltips passo a passo Onde mostrar (URL da página) Seção por prefixo /app/reportsQuando mostrar Assim que a página carregar Segmentação de público Sem regras: todo mundo que abre a página Frequência Uma vez por visitante 
Passo 4 · ilustração esquemática - Passo 05
Publique e confira no site real
Mude Status para Publicado e salve. Abra a página numa janela anônima: o Clew lembra quem já viu um item de “uma vez”, então o seu navegador de sempre pode pular. Visualizações, conclusões e abandonos aparecem nas estatísticas.
Passo 5 · ilustração esquemática
Passo a passo: tour do produto na sua plataforma
Escolha a plataforma em que o seu site ou app foi feito. Cada guia traz os passos de instalação, um exemplo com configurações prontas e as armadilhas daquela plataforma.
É grátis?
Grátis no plano Free do Clew, sem cartão e sem prazo: um site e até 3 tours ou tooltips publicados. Regras de público e testes A/B vêm com o Pro.
Perguntas e respostas
O tour do produto é grátis no Clew?
Sim. Tours e tooltips estão no plano Free: um site, até 3 publicados, sem cartão e sem prazo. Regras de público e testes A/B vêm com o Pro.
E se os devs mudarem a página?
Se um elemento sumir, a aba Saúde lista o passo que não o encontra. Peça aos devs um atributo data-tour nos elementos principais: seletores como [data-tour="create"] sobrevivem a redesigns.
Quantos passos um tour deve ter?
De três a cinco. Mostre o caminho até o primeiro resultado, não cada botão. O resto vai para tooltips na própria tela ou para um checklist.
Funciona em apps React, Vue ou Next.js?
Sim. O widget acompanha as mudanças de rota no cliente, então um tour ligado a /dashboard começa quando o usuário navega até lá sem recarregar.