Como adicionar um tooltip em um site Webflow sem programador
Uma dica contextual no Webflow: uma frase ao lado do elemento em que os visitantes hesitam, colocada com um clique no editor visual e mostrada exatamente quando ajuda.
- Tempo
- ● 10 minutos
- Preço
- Plano Free
- Quem faz
- Administrador do site no Webflow
Exemplo: um tooltip no Webflow
Numa página de preços no Webflow, os visitantes não percebem que o plano anual economiza dois meses. Um tooltip no seletor mensal/anual diz “Anual = 2 meses grátis” para quem abre /pricing, uma vez.
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.
Como adicionar o tooltip no Webflow, passo a passo
- 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
Abra Site settings → Custom code
No painel do Webflow abra os Site settings do site e a aba Custom code. Código personalizado exige um Site plan pago.
Passo 2 · ilustração esquemática - Passo 03
Cole em Head code
Cole a linha do Clew em Head code e clique em Save changes.
Passo 3 · ilustração esquemática - Passo 04
Publique o site
O código personalizado só chega ao site real depois de Publish, no seu domínio próprio e no
webflow.io, se você usa os dois.
Passo 4 · ilustração esquemática - Passo 05
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 5 · ilustração esquemática - Passo 06
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) Caminho exato /pricingQuando 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 6 · ilustração esquemática - Passo 07
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 7 · ilustração esquemática
Armadilhas: tooltip no Webflow
O domínio de staging conta como outra URL
As regras de URL comparam caminhos, então um tooltip configurado para /pricing aparece tanto em seusite.webflow.io quanto no seu domínio. É útil para testar antes de publicar no domínio.
Combo classes se repetem entre elementos
Classes do Webflow como .button.is-secondary se repetem pela página. Dê ao elemento um atributo personalizado data-tour nas configurações dele e aponte o tooltip para ali.
O construtor pode recriar elementos ao publicar
Construtores às vezes regeneram ids de elementos quando um bloco é duplicado ou recriado. Depois de mudanças grandes de design, abra Saúde: se a dica perdeu o elemento, escolha de novo.
Perguntas e respostas
O tooltip se ajusta aos breakpoints do celular?
Sim. Ele se posiciona em relação ao elemento na hora de aparecer, qualquer que seja o layout do breakpoint.
Preciso de um plano pago do Webflow?
Sim. O Webflow só permite código personalizado no site inteiro em Site plans pagos, e não existe alternativa suportada.
O tooltip é grátis?
Sim, no plano Free: até 3 tours e tooltips publicados num site.
Dá para abrir a dica só no clique?
Sim. Escolha Ao clicar num elemento, informe o seletor do ícone ou link que abre a dica e coloque A cada visita.