Pop-ups e tours no WordPress, Webflow, Shopify e outros construtores
Quer um pop-up na loja, um tooltip na página de preços ou um tour para membros? Qualquer construtor popular tem um campo de código para o head do site inteiro: cole a linha do Clew ali uma vez e crie cada formato no editor do Clew.
- Tempo
- ● 5 minutos
- Quem faz
- Administrador do site
- Passos
- 6
Passo a passo
- Passo 01
Copie o seu código no Clew
Registe-se ou inicie sessão no Clew e abra Admin → Visão geral. O cartão “O widget ainda não deu sinal.” mostra a linha com a chave real: clique para a copiar.
<!-- 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
Encontre o campo de código do head de todo o site
Procure uma definição chamada Custom code, Code injection ou Header que se aplique a todo o site, e não a uma só página. O caminho exato de cada plataforma está na tabela abaixo.
Passo 2 · ilustração esquemática - Passo 03
Cole a linha no head
Cole a linha no campo do head — não no body nem numa só página. Se já houver outros scripts, como a análise de tráfego, adicione o Clew numa linha nova; a ordem não importa.
Passo 3 · ilustração esquemática - Passo 04
Guarde e publique
Guarde a definição. No Webflow, no Framer e no Tilda, o código só chega ao site em produção depois de voltar a publicar; no WordPress, Shopify, Wix e Squarespace basta guardar.
Passo 4 · ilustração esquemática - Passo 05
Limpe a cache
Se o site usa um plugin de cache ou uma CDN (WP Rocket, LiteSpeed Cache, W3 Total Cache, Cloudflare), limpe a cache para que os visitantes recebam páginas com a nova linha. Plugins que atrasam ou combinam JavaScript devem excluir
tryclew.io/widget.
Passo 5 · ilustração esquemática - Passo 06
Confirme que funciona
Abra qualquer página do site publicado numa janela normal e volte a Admin → Visão geral no Clew. Em menos de um minuto o cartão fica verde: “O widget está ativo.”
Passo 6 · ilustração esquemática
Caminhos exatos por plataforma
Os nomes dos menus estão em inglês, como nas ilustrações; com a plataforma em português, o caminho é o mesmo.
| Plataforma | Onde colar | Nota |
|---|---|---|
| WordPress | Instale o plugin gratuito WPCode → Code Snippets → Header & Footer → Header → Save Changes | Ou a opção de “scripts no cabeçalho” do seu tema. Não edite ficheiros do tema: as atualizações substituem-nos. No WordPress.com, os plugins exigem o plano Business ou superior. |
| Webflow | Site settings → Custom code → Head code → Save e depois Publish | O código personalizado exige um Site plan pago. |
| Shopify | Online Store → Themes → … → Edit code → layout/theme.liquid, imediatamente antes de </head> → Save | Aplica-se à loja. Repita se mudar de tema. |
| Wix | Settings → Custom code → + Add Custom Code → All pages, Load code once, Head → Apply | Exige um plano Premium e um domínio ligado. |
| Squarespace | Settings → Developer tools → Code injection (em sites antigos: Advanced) → Header → Save | A injeção de código não está incluída no plano mais barato. |
| Framer | Site settings → Custom code → End of <head> tag → Save e depois Publish | O código personalizado exige um plano pago. |
| Tilda | Site Settings → More → HTML code for the HEAD section → Edit code → Save e depois Publish all pages | Exige o plano Personal ou Business. |
| HTML simples | Antes de </head> em cada página, ou uma vez no cabeçalho partilhado | Carregue os ficheiros alterados para o alojamento. |
Site institucional ou produto?
Os tours ajudam sobretudo dentro do produto em que as pessoas iniciam sessão. Se o site institucional está no Webflow mas a aplicação é à medida, instale o Clew na aplicação: veja o guia para assistentes de IA ou o do Google Tag Manager.
Problemas frequentes e perguntas
Posso adicioná-lo só a algumas páginas?
Adicione-o a todo o site. Em que páginas e para quem aparece um tour configura-se no Clew, por isso não terá de voltar às definições do site.
O meu plano não tem campo de código personalizado
Webflow, Framer, Wix e Squarespace só permitem scripts de terceiros em planos pagos, e não existe alternativa suportada. Mude de plano ou instale o Clew diretamente no produto.
O painel continua a dizer “O widget ainda não deu sinal.”
Abra uma página do site publicado numa janela normal do navegador e recarregue o painel ao fim de um minuto. Se nada mudar: confirme que a alteração foi publicada e não apenas guardada; que substituiu o marcador pela sua chave real; e, nas ferramentas de programador do navegador, separador Network, procure widget/…js — a resposta deve ser 200. Um 404 indica uma chave errada.
O meu site tem Content Security Policy
Duas diretivas e mais nada: script-src https://tryclew.io e connect-src https://tryclew.io. O widget não usa eval, nem URL blob:, nem workers, e instala a sua folha de estilos por CSSOM em vez de como marcação — por isso style-src 'unsafe-inline' não é preciso no Chrome, Edge, Firefox 101+ ou Safari 16.4+. Os navegadores mais antigos recebem um elemento <style> de reserva: se ainda os suporta e o seu style-src não tem 'unsafe-inline', aí as visitas guiadas aparecem sem estilo. Para copiar: Content-Security-Policy: script-src 'self' https://tryclew.io; connect-src 'self' https://tryclew.io;
Posso fixar a versão do widget e usar <code>integrity=</code>?
Sim. A linha dos guias — /widget/COLE_AQUI_A_SUA_CHAVE.js — é a contínua: serve sempre o widget atual e, por isso, não pode levar um hash de Subresource Integrity (os bytes mudam). Ao lado dela, cada versão é também servida num endereço imutável com hash do conteúdo. Consulte https://tryclew.io/api/v1/widget-version?site=A_SUA_CHAVE e recebe version, path e integrity; coloque-os na etiqueta: <script src="https://tryclew.io/widget/v/<versao>/A_SUA_CHAVE.js" integrity="sha384-…" crossorigin="anonymous" async></script>. Um URL fixado nunca muda, pelo que o navegador recusa o ficheiro se um único byte for diferente. Atualiza a versão quando quiser — consulte o mesmo endpoint no script de implantação. Nada mais muda: os tours continuam a ser publicados no editor do Clew sem tocar no sítio.
Um bloqueador de anúncios engole o widget?
Não. O nosso domínio não está em nenhuma das listas grandes — EasyList, EasyPrivacy, AdGuard, uBlock Origin — por isso as visitas guiadas, as dicas e as checklists aparecem também a quem usa um bloqueador. O delicado são as estatísticas: o EasyPrivacy bloqueia todos os pedidos ping de terceiros, por isso o widget envia os seus eventos como um pedido normal, que essas listas deixam passar. Para ficar fora do alcance de qualquer lista personalizada, sirva o widget a partir do seu domínio: aponte https://o-seu-site/clew/* para https://tryclew.io/* no CDN ou no nginx e troque a linha por <script src="/clew/widget/A_SUA_CHAVE.js" async></script>. O widget passa a consultar a API com o mesmo prefixo e fica tudo first-party.
Funciona em aplicações de página única (React, Vue, Next.js)?
Sim. Carregue a linha uma vez, no HTML raiz ou no layout raiz. O widget acompanha sozinho as mudanças de rota no cliente (History API e alterações de hash), por isso não o adicione por rota nem o dispare com um acionador “History Change”: uma segunda cópia é ignorada, mas é trabalho inútil.
E o banner de consentimento de cookies?
O Clew guarda um cookie próprio e entradas no localStorage para se lembrar de que tours cada visitante concluiu e contar as conclusões. Não envia dados para redes de publicidade. Se pode correr antes do consentimento é uma decisão da sua política de privacidade (por exemplo, à luz do RGPD); se a ferramenta de consentimento o bloquear até o visitante aceitar, os tours simplesmente começam depois.
Uso um plugin de cache ou de otimização
Limpe a cache depois de instalar; caso contrário, os visitantes continuam a receber páginas antigas sem a linha. Se o plugin atrasa, combina ou adia JavaScript (WP Rocket, LiteSpeed Cache, Autoptimize, Cloudflare Rocket Loader), exclua tryclew.io/widget dessas otimizações.
O site vai ficar mais lento?
Não. A linha tem async: o navegador descarrega o widget em paralelo e executa-o sem bloquear a página. O widget não tem dependências.
A minha aplicação pode avisar o Clew de que um passo do onboarding está feito?
Pode, e é só uma linha. Uma tarefa da checklist pode ter uma regra que a marca sem o visitante clicar em nada: uma página a que ele chega, um clique num elemento que indica com um seletor CSS, ou um evento disparado pelo seu próprio código — Clew.complete('invited'), em que invited é a chave que escreveu ao lado da tarefa no editor. Chame no momento em que a tarefa está mesmo feita, por exemplo depois de a sua API confirmar o convite. É seguro chamar a qualquer altura e devolve false quando não há nenhuma checklist com essa chave na página. O nome antigo TutorKit continua a funcionar.
Outras formas de instalar
Google Tag Manager
Etiqueta de HTML personalizado em todas as páginas, verificação na pré-visualização e publicação. Para sites que já usam o GTM.
Abrir guia →Vibe codingAssistentes de IA para programar
Um prompt para Claude Code, Cursor, Lovable, Bolt.new, v0 e Replit que coloca a linha no ficheiro raiz certo.
Abrir guia →