Como criar um tour do produto sem programador
Um tour do produto mostra ao utilizador novo onde fica cada coisa: “aqui cria-se um projeto, aqui convida-se a equipa”. No Clew clica nos elementos da sua própria 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 utilizador clica em Seguinte até Concluir.
Não precisa escrever seletores CSS: Editar no seu site abre o editor por cima do seu site, onde Escolher elemento permite 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 no ecrã principal, até a ação que entrega valor primeiro. Tours longos são saltados.
Uma seção nova ou redesenhada
Utilizadores abrem um ecrã 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 pedidos ao suporte.
Ver onde as pessoas param
O funil mostra quantos viram cada passo. Um passo com muita queda costuma indicar um ecrã confuso, 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 gratuita (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: substitua COLE_AQUI_A_SUA_CHAVE pela chave do site em Admin > Visão geral --> <script src="https://tryclew.io/widget/COLE_AQUI_A_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 gere o site. Cada guia leva de 5 a 10 minutos e não precisa de ser repetido: todo o resto acontece no Clew.
Passo 2 · ilustração esquemática - Passo 03
Crie 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é-visualização atualiza-se enquanto escreve.
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) Secção por prefixo /app/reportsQuando mostrar Logo ao carregar a página Segmentação de público Sem regras: toda nós que abre a página Frequência Uma vez por visitante 
Passo 4 · ilustração esquemática - Passo 05
Publique e verifique no site real
Mude Estado para Publicado e guarde. Abra a página numa janela anónima: o Clew lembra quem já viu um item de “uma vez”, por isso o seu navegador de sempre pode saltar. 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 programadores mudarem a página?
Se um elemento desaparecer, o separador Estado lista o passo que não o encontra. Peça aos programadores 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 no próprio ecrã ou para um checklist.
Funciona em apps React, Vue ou Next.js?
Sim. O widget acompanha as mudanças de rota no cliente, por isso um tour ligado a /dashboard começa quando o utilizador navega até lá sem recarregar.