Como adicionar tooltips e dicas ao site sem programador
Às vezes o visitante só precisa de uma frase no lugar certo: “só ligamos para confirmar”, “o tamanho é pequeno: peça um acima”. O Clew coloca essa frase ao lado do próprio elemento, sem mexer no tema.
- Tempo
- ● 10 minutos
- Preço
- Plano Free
- Formato
- Tooltips passo a passo
O que é um tooltip do Clew
Um tooltip é um item de um único passo no formato Tooltips passo a passo: um balão pequeno com título e texto, preso a um elemento da página e posicionado automaticamente (ou Em cima, Em baixo, À esquerda, À direita).
Ele pode aparecer Logo ao carregar a página, Após N segundos ou Ao clicar num elemento — esta última opção transforma qualquer ícone ou link existente num acionador da dica. O elemento escolhe-se clicando nele com Escolher elemento.
Bons lugares para uma dica
Campos de formulário que geram dúvida
Telefone, NIF, tamanho da empresa: uma linha sobre porque pergunta tira o atrito.
Preços e seletores de plano
O que significa “por utilizador”, quanto se economiza no anual — bem ao lado do número.
Opções de produto
Tamanho, compatibilidade e prazo ao lado do seletor, não num FAQ que ninguém abre.
Configurações dentro da app
Uma dica no clique ao lado de uma opção avançada, quantas vezes o utilizador precisar.
Como adicionar um tooltip 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
Prenda o tooltip ao elemento
No Clew abra Fluxos → + Novo fluxo, mantenha Tooltips passo a passo e clique em Editar no seu site. Na sua página clique em Escolher elemento, clique no campo ou botão e escreva um título curto e uma frase. Ajuste Posição se a posição automática cobrir algo importante.
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 /productsQuando mostrar Após N segundos: 8 segundos 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: tooltip 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
Os tooltips são grátis?
Sim. Tooltips e tours estão no plano Free: um site, até 3 publicados, sem cartão e sem prazo.
O tooltip pode aparecer sempre?
Sim: coloque Frequência em Em cada visita. Com Ao clicar num elemento passa a ser uma dica a pedido.
Funciona no telemóvel?
Sim. O balão reposiciona-se para caber no ecrã e desloca a página até o elemento.
E se o elemento não estiver na página?
O tooltip não aparece e o separador Estado avisa do elemento em falta, e assim dá por isso depois de um redesign.