Tours e onboarding em app feito com IA
Fez o app com Lovable, Bolt.new, v0, Replit, Cursor ou Claude Code e agora os usuários novos se perdem? Cole um prompt, confira se só um arquivo mudou e publique. Tours, checklists e avisos de upgrade você cria 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 seu código no Clew
Cadastre-se ou entre 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 copiar. Deixe a chave à mão para o passo 3.
Passo 1 · ilustração esquemática - Passo 02
Abra o projeto num modo que edita arquivos
- Claude Code: rode
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: rode
- Passo 03
Cole o prompt com a sua chave
Copie o prompt, troque
COLE_AQUI_SUA_CHAVEpela sua chave e envie. O prompt indica o arquivo certo para cada stack, então o assistente não espalha a tag por vários componentes.Adicione a este app o widget de onboarding do Clew. Insira esta tag exatamente assim, para carregar uma única vez em todas as páginas, inclusive depois de mudanças de rota no cliente: <script src="https://tryclew.io/widget/COLE_AQUI_SUA_CHAVE.js" async></script> Onde colocar (escolha o que corresponde a este projeto): - HTML simples, React + Vite, Vue + Vite: index.html, logo antes de </head> - Next.js App Router: app/layout.tsx, com next/script: <Script src="(a mesma 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: "(a mesma URL)", async: true }] - SvelteKit: src/app.html, logo antes de %sveltekit.head% - Astro: o <head> do layout compartilhado - Outros casos: o template HTML raiz ou o layout raiz renderizado em todas as páginas Regras: - Use a URL exatamente como está. Não baixe o script, não empacote nem instale pacotes npm. - Adicione em um único lugar, nunca dentro de um componente que re-renderiza. - Se o projeto define uma Content-Security-Policy, libere https://tryclew.io em script-src e connect-src. - Não mude mais nada e me mostre o diff.
Passo 3 · ilustração esquemática - Passo 04
Confira que só um arquivo mudou
Leia o diff antes de aceitar. O esperado: um arquivo 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 para desfazer e manter só a tag.
Passo 4 · ilustração esquemática - Passo 05
Publique ou faça o deploy
A tag só funciona no app publicado. 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 a hospedagem publica a partir do git.
Passo 5 · ilustração esquemática - Passo 06
Confirme que funciona
Abra o app publicado numa janela normal e volte para Admin → Visão geral no Clew. Em até um minuto o cartão fica verde: “O widget está no ar.”
Passo 6 · ilustração esquemática
Onde a tag fica em cada stack
Use a tabela para conferir o trabalho do assistente. Troque o marcador pela sua chave.
| Stack | Arquivo | 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_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 compartilhado | A linha dentro de <head> |
O que cada ferramenta costuma gerar
Projetos do Lovable e do Bolt.new costumam ser React + Vite, então a tag vai no index.html. O v0 gera Next.js com App Router: app/layout.tsx. No Replit, depende do template. Com Claude Code e Cursor, o assistente lê o seu repositório e escolhe o arquivo pela lista do prompt.
Problemas comuns e perguntas
É seguro colar a chave do site num chat de IA?
Sim. A chave do site não é senha: ela é pública e vai para o HTML da página. Não serve para editar tours nem para ler seus dados.
O assistente instalou um pacote npm ou copiou o script
Peça para reverter. O Clew carrega da própria URL para que correções e novidades cheguem ao seu app sem novo build.
A tag sobrevive às próximas edições da IA?
Normalmente sim, porque fica no arquivo raiz. Se depois de uma grande regeração o Admin → Visão geral parar de mostrar “O widget está no ar”, envie o prompt de novo.
O painel continua dizendo “O widget ainda não deu sinal.”
Abra uma página do site publicado numa janela normal do navegador e recarregue o painel depois de um minuto. Se nada mudar: confira se a alteração foi publicada, e não só salva; se o marcador foi trocado pela sua chave real; e nas ferramentas de desenvolvedor do navegador, aba Network, procure widget/…js — a resposta deve ser 200. Um 404 indica chave errada.
Meu site tem Content Security Policy
Duas diretivas e nada mais: 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 folha de estilos por CSSOM em vez de como marcação — então style-src 'unsafe-inline' não é necessário no Chrome, Edge, Firefox 101+ ou Safari 16.4+. Navegadores mais antigos recebem um elemento <style> de reserva: se você ainda os suporta e seu style-src não tem 'unsafe-inline', lá os tours aparecem sem estilo. Para copiar e colar: 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_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 em um endereço imutável com hash do conteúdo. Consulte https://tryclew.io/api/v1/widget-version?site=SUA_CHAVE e você recebe version, path e integrity; coloque-os na tag: <script src="https://tryclew.io/widget/v/<versao>/SUA_CHAVE.js" integrity="sha384-…" crossorigin="anonymous" async></script>. Uma URL fixada nunca muda, então o navegador recusa o arquivo se um único byte for diferente. Você atualiza a versão quando quiser — consulte o mesmo endpoint no seu script de deploy. Nada mais muda: os tours continuam sendo publicados no editor do Clew sem mexer no site.
Um bloqueador de anúncios come o widget?
Não. Nosso domínio não está em nenhuma das listas grandes — EasyList, EasyPrivacy, AdGuard, uBlock Origin — então os tours, as dicas e as checklists aparecem também para quem usa um bloqueador. O delicado são as estatísticas: o EasyPrivacy bloqueia toda requisição ping de terceiros, por isso o widget envia os eventos como uma requisição comum, que essas listas deixam passar. Para ficar fora do alcance de qualquer lista personalizada, sirva o widget do seu próprio domínio: aponte https://seu-site/clew/* para https://tryclew.io/* no CDN ou no nginx e troque a linha por <script src="/clew/widget/SUA_CHAVE.js" async></script>. O widget passa a consultar a API com o mesmo prefixo e tudo vira first-party.
Funciona em SPA (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 mudanças de hash), então não adicione por rota nem dispare com um acionador “History Change”: uma segunda cópia é ignorada, mas é trabalho à toa.
E o banner de consentimento de cookies?
O Clew guarda um cookie próprio e registros no localStorage para lembrar quais tours cada visitante concluiu e contar as conclusões. Nenhum dado vai para redes de anúncios. Se ele pode rodar antes do consentimento é decisão da sua política de privacidade (por exemplo, pela LGPD); se a sua ferramenta de consentimento bloquear até o aceite, os tours simplesmente começam depois.
Uso um plugin de cache ou otimização
Limpe o cache depois de instalar; senão os visitantes continuam recebendo 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 baixa o widget em paralelo e o executa sem travar a página. O widget não tem dependências.
Meu app pode avisar o Clew de que um passo do onboarding foi concluído?
Pode, e é uma linha só. Um item do checklist pode ter uma regra que o marca sem o visitante clicar em nada: uma página que ele acessa, um clique num elemento que você indica com um seletor CSS, ou um evento disparado pelo seu próprio código — Clew.complete('invited'), em que invited é a chave que você digitou ao lado do item no editor. Chame no momento em que a tarefa foi mesmo concluída, por exemplo depois de a sua API confirmar o convite. É seguro chamar a qualquer hora e devolve false quando não há nenhum checklist com essa chave na página. O nome antigo TutorKit continua funcionando.
Outras formas de instalar
Google Tag Manager
Tag de HTML personalizado em todas as páginas, conferência na visualização e publicação. Para sites que já usam GTM.
Abrir guia →Sem códigoConstrutores de sites e CMS
WordPress, Webflow, Shopify, Wix, Squarespace, Framer, Tilda ou HTML: onde fica o campo de código do head e o que clicar.
Abrir guia →