Tours e onboarding em app feita com IA
Fez a app com Lovable, Bolt.new, v0, Replit, Cursor ou Claude Code e agora os utilizadores novos perdem-se? Cole um prompt, verifique se só um ficheiro mudou e publique. Tours, checklists e avisos de upgrade criam-se no Clew, não com mais prompts.
- Tempo
- ● 5 minutos
- Quem faz
- Você e o seu assistente de IA
- 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. Tenha a chave à mão para o passo 3.
Passo 1 · ilustração esquemática - Passo 02
Abra o projeto num modo que edita ficheiros
- Claude Code: execute
claudena pasta do projeto. - Cursor: abra o chat no modo Agent.
- Lovable, Bolt.new, v0: o chat do projeto.
- Replit: Agent ou Assistant.
Passo 2 · ilustração esquemática - Claude Code: execute
- Passo 03
Cole o prompt com a sua chave
Copie o prompt, substitua
COLE_AQUI_A_SUA_CHAVEpela sua chave e envie. O prompt indica o ficheiro certo para cada stack, por isso o assistente não espalha a etiqueta por vários componentes.Adiciona a esta aplicação o widget de onboarding do Clew. Insere esta etiqueta exatamente assim, para carregar uma única vez em todas as páginas, incluindo depois de mudanças de rota no cliente: <script src="https://tryclew.io/widget/COLE_AQUI_A_SUA_CHAVE.js" async></script> Onde a colocar (escolhe o que corresponde a este projeto): - HTML simples, React + Vite, Vue + Vite: index.html, imediatamente antes de </head> - Next.js App Router: app/layout.tsx, com next/script: <Script src="(o mesmo URL)" strategy="afterInteractive" /> dentro de <body> - Next.js Pages Router: pages/_app.tsx, com o mesmo componente next/script - Nuxt 3: nuxt.config.ts, app.head.script: [{ src: "(o mesmo URL)", async: true }] - SvelteKit: src/app.html, imediatamente antes de %sveltekit.head% - Astro: o <head> do layout partilhado - Outros casos: o template HTML raiz ou o layout raiz apresentado em todas as páginas Regras: - Usa o URL exatamente como está. Não descarregues o script, não o empacotes nem instales pacotes npm. - Adiciona-a num único sítio, nunca dentro de um componente que volta a ser renderizado. - Se o projeto define uma Content-Security-Policy, permite https://tryclew.io em script-src e connect-src. - Não alteres mais nada e mostra-me o diff.
Passo 3 · ilustração esquemática - Passo 04
Confirme que só mudou um ficheiro
Leia o diff antes de aceitar. O esperado: um ficheiro e uma linha adicionada (ou um pequeno bloco
<Script>no Next.js) com a sua chave real. Se o assistente também mexeu em componentes, instalou pacotes ou copiou o script para o projeto, peça-lhe que desfaça e deixe só a etiqueta.
Passo 4 · ilustração esquemática - Passo 05
Publique ou faça o deploy
A etiqueta só funciona na aplicação publicada. Clique em Publish ou Deploy no Lovable, Bolt.new, v0 ou Replit. No Claude Code ou no Cursor, faça commit e push como sempre, se o alojamento publica a partir do git.
Passo 5 · ilustração esquemática - Passo 06
Confirme que funciona
Abra a aplicação publicada 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
Onde fica a etiqueta em cada stack
Use a tabela para rever o trabalho do assistente. Substitua o marcador pela sua chave.
| Stack | Ficheiro | O que é adicionado |
|---|---|---|
| HTML simples | index.html (cada página) | A linha antes de </head> |
| React + Vite, Vue + Vite | index.html na raiz do projeto | A linha antes de </head> |
| Next.js App Router | app/layout.tsx | <Script src="https://tryclew.io/widget/COLE_AQUI_A_SUA_CHAVE.js" strategy="afterInteractive" /> dentro de <body> |
| Next.js Pages Router | pages/_app.tsx | O mesmo componente <Script> |
| Nuxt 3 | nuxt.config.ts | Uma entrada em app.head.script com src e async: true |
| SvelteKit | src/app.html | A linha antes de %sveltekit.head% |
| Astro | layout partilhado | A linha dentro de <head> |
O que cada ferramenta costuma gerar
Os projetos do Lovable e do Bolt.new costumam ser React + Vite, por isso a etiqueta vai para o index.html. O v0 gera Next.js com App Router: app/layout.tsx. No Replit, depende do modelo. Com o Claude Code e o Cursor, o assistente lê o seu repositório e escolhe o ficheiro a partir da lista do prompt.
Problemas frequentes e perguntas
É seguro colar a chave do site num chat de IA?
Sim. A chave do site não é uma palavra-passe: é pública e acaba no HTML da página. Não serve para editar tours nem para ler os seus dados.
O assistente instalou um pacote npm ou copiou o script
Peça-lhe que reverta. O Clew carrega a partir do seu próprio URL para que correções e novidades cheguem à aplicação sem novo build.
A etiqueta sobrevive às próximas edições da IA?
Normalmente sim, porque está no ficheiro raiz. Se, depois de uma grande regeneração, o Admin → Visão geral deixar de mostrar “O widget está ativo”, envie o prompt outra vez.
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 →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 →