Como colocar um pop-up em um site Webflow sem programador
Guia passo a passo para um pop-up no Webflow: instale uma linha, escreva o modal no editor do Clew e decida quando ele aparece — depois de alguns segundos, na rolagem, numa visita de retorno — sem mexer no tema de novo.
- Tempo
- ● 10 minutos
- Preço
- Teste grátis de 14 dias, sem cartão
- Quem faz
- Administrador do site no Webflow
Exemplo: um pop-up no Webflow
Um estúdio de design no Webflow quer que quem visita a home veja o case mais recente. Um modal “Veja como dobramos os cadastros da Acme” aparece depois de rolar metade da home, uma vez por visitante, com botão para o case.
Este formato faz parte do plano Pro. Toda conta nova começa com 14 dias de teste grátis com todos os formatos e regras de público, sem cartão. Quando o teste acaba, nada é apagado e o que foi publicado continua aparecendo; tours e tooltips seguem grátis no plano Free.
Como adicionar o pop-up 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
Escreva o pop-up no Clew
No Clew abra Fluxos → + Novo fluxo e escolha Formato Janela modal. Adicione um passo: um título curto, uma ou duas frases e, em Texto do link / URL do link, o texto do botão e a página que ele abre. O modal não precisa de seletor: sempre aparece centralizado.
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 Janela modal Onde mostrar (URL da página) Caminho exato /Quando mostrar Depois de rolar N%: 50 % da página 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: pop-up no Webflow
O domínio de staging conta como outra URL
As regras de URL comparam caminhos, então um pop-up configurado para /pricing aparece tanto em seusite.webflow.io quanto no seu domínio. É útil para testar antes de publicar no domínio.
Interactions podem se sobrepor
Se uma Interaction do Webflow já abre um modal no carregamento, as duas camadas competem. Use um gatilho de rolagem ou atraso para o pop-up do Clew.
Não empilhe com os pop-ups do construtor
Se o tema ou um plugin já mostra um pop-up de newsletter ou de cookies na mesma página, o visitante vê duas camadas. Desligue um deles ou dê ao Clew outro gatilho (rolagem ou segunda visita).
Perguntas e respostas
Dá para deixar o pop-up com a cara do meu site no Webflow?
Você define cores de fundo, texto, borda e destaque e o arredondamento em Aparência, então combina com a marca sem CSS.
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.
Dá para mostrar o pop-up numa página só?
Sim. Instale a linha no site inteiro e escolha Caminho exato ou Seção por prefixo em Onde mostrar (URL da página). O pop-up não aparece em nenhuma outra página.
O pop-up é grátis?
O formato modal faz parte do Pro; contas novas têm 14 dias de teste com tudo, sem cartão. Tours e tooltips são grátis no plano Free.
Para onde o botão leva?
Para qualquer página que você colocar em URL do link. Ela abre em outra aba, para o visitante não perder a página em que estava.
O que mais dá para adicionar no Webflow
Pop-up em outras plataformas
- ShopifyComo colocar um pop-up em uma loja Shopify sem programador
- WordPressComo colocar um pop-up em um site WordPress sem programador
- WixComo colocar um pop-up em um site Wix sem programador
- FramerComo colocar um pop-up em um site Framer sem programador
- Google Tag ManagerComo colocar um pop-up em seu site com o Google Tag Manager sem programador