Pop-ups, tours de produto e checklists sem programador
Quer um pop-up de boas-vindas, um tour guiado pela app ou um checklist de onboarding, mas a equipa de desenvolvimento não tem tempo? O Clew é uma linha no site, adicionada da forma como já gere o site: um gestor de etiquetas, um assistente de IA ou um construtor. Depois, todos os formatos são criados num editor visual, sem deploy.
O que quer adicionar?
Escolha o resultado de que precisa. Cada página explica quando o formato ajuda, como configurá-lo no Clew e quanto custa: o preço vem direto da tabela de planos.
Como colocar um pop-up no site sem programador
Uma janela modal com a sua oferta, anúncio ou ajuda, na página certa, na hora certa e uma vez por visitante.
Teste grátis de 14 dias, sem cartãoAbrir guia →Tour do produtoComo criar um tour do produto sem programador
Tooltips passo a passo que guiam o utilizador por um ecrã: apontam o botão, explicam e vão para o próximo passo.
Plano FreeAbrir guia →Checklist de onboardingComo adicionar um checklist de onboarding aa app sem programador
Uma lista com progresso no canto da app: as primeiras tarefas do utilizador novo, cada uma com link para a página certa.
Teste grátis de 14 dias, sem cartãoAbrir guia →Onboarding de utilizadoresComo configurar o onboarding de utilizadores sem programador
Um fluxo de primeira sessão: pop-up de boas-vindas, um tour curto pelo ecrã principal e um checklist para a próxima visita.
Tours grátis · resto no teste de 14 diasAbrir guia →TooltipComo adicionar tooltips e dicas ao site sem programador
Uma única dica ao lado de um campo ou botão, que aparece quando o visitante chega ali ou quando ele clica.
Plano FreeAbrir guia →Guia interativoComo criar um guia interativo do produto sem programador
Um checklist de ajuda cujos itens abrem tours nas páginas certas: um manual prático dentro do produto.
Teste grátis de 14 dias, sem cartãoAbrir guia →Aviso de paywallComo criar um aviso de paywall para upgrade sem programador
Um modal de upgrade para utilizadores do plano gratuito que chegam a uma função paga, com link para a sua página de preços.
Teste grátis de 14 dias, sem cartãoAbrir guia →Escolha o caminho
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 →Sem códigoConstrutores de sites e CMS
WordPress, Webflow, Shopify, Wix, Squarespace, Framer, Tilda ou HTML: onde está o campo de código do head e onde clicar.
Abrir guia →Já instalou? Agora teste o que funciona
Divida os visitantes entre duas versões de um tour, dica ou checklist e fique com a que mais pessoas concluem.
Que guia é o seu
- O seu site já tem Google Tag Manager e pode publicar neleGoogle Tag Manager →
- Cria a aplicação com Lovable, Bolt.new, v0, Replit, Cursor ou Claude CodeAssistentes de IA para programar →
- O site está em WordPress, Webflow, Shopify, Wix, Squarespace, Framer ou TildaConstrutores de sites e CMS →
Onde obter o seu código
Todos os guias começam aqui. Crie uma conta gratuita, adicione o seu site e abra Admin → Visão geral. O cartão “O widget ainda não deu sinal.” mostra a sua linha: clique nela para a copiar.
A linha tem este aspeto, mas com a sua chave em vez do marcador. A chave é pública de propósito: acaba sempre no HTML da página.
<!-- 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>
Tours de produto, pop-ups e onboarding na era da IA → (PDF, 2 páginas · O guia está em inglês.)
Problemas frequentes e perguntas
Preciso mesmo de um programador?
Não, se consegue editar as definições do site, o contentor do GTM ou o projeto criado com IA. Se o produto é uma aplicação à medida e ninguém da equipa tem acesso, clique em Convidar um programador em Admin → Visão geral: prepara um e-mail com a linha exata e as instruções. Para um programador, são cinco minutos.
Qual é o melhor método?
O que já utiliza. Todos os guias adicionam a mesma linha e o Clew funciona da mesma forma depois. A instalação direta (construtor ou assistente de IA) carrega um pouco antes do que um gestor de etiquetas; só se nota num tour que arranca no momento em que a página abre.
Onde instalar: no site institucional ou na aplicação?
Onde estão as pessoas que quer orientar — normalmente a aplicação web com início de sessão. Os tours só funcionam nas páginas que têm a linha.
Vou ter de reinstalar quando alterar os tours?
Não. A linha não muda: tours, dicas e checklists são criados e publicados no editor do Clew, sem voltar a mexer no site.
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.