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”, “a forma é pequena: peça um número 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, Embaixo, À esquerda, À direita).
Ele pode aparecer Assim que a página carregar, Depois de N segundos ou Ao clicar num elemento — esta última opção transforma qualquer ícone ou link existente num gatilho de dica. Você escolhe o elemento clicando nele com Escolher elemento.
Bons lugares para uma dica
Campos de formulário que geram dúvida
Telefone, CNPJ, tamanho da empresa: uma linha sobre por que você pergunta tira o atrito.
Preços e seletores de plano
O que significa “por usuário”, 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 do app
Uma dica no clique ao lado de uma opção avançada, quantas vezes o usuário precisar.
Como adicionar um tooltip 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
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) Seção por prefixo /productsQuando mostrar Depois de N segundos: 8 segundos 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: 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 toda vez?
Sim: coloque Frequência em A cada visita. Com Ao clicar num elemento vira uma dica sob demanda.
Funciona no celular?
Sim. O balão se reposiciona para caber na tela e rola a página até o elemento.
E se o elemento não estiver na página?
O tooltip não aparece e a aba Saúde avisa do elemento sumido, então você percebe depois de um redesign.