Como adicionar um checklist de onboarding numa app do Lovable sem programador

Exemplo: um checklist de onboarding numa app do Lovable

Como adicionar o checklist de onboarding numa app do Lovable, passo a passo

1. Passo 01

   Copie o seu snippet do Clew

   Crie uma conta gratuita (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: 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>

   Copiar

   

2. Passo 02

   Abra o chat do projeto no Lovable

   Abra o seu projeto no Lovable. O chat edita o código diretamente; verifique se está na versão principal que publica, não num remix antigo.

   

3. Passo 03

   Envie o prompt com a sua chave

   Copie o prompt, substitua COLE_AQUI_A_SUA_CHAVE pela sua chave e envie. Além da tag, ele pede o que o checklist de onboarding precisa do código.

   Adicione o widget de onboarding do Clew a esta app.
   
   Insira esta tag exata uma única vez, para que carregue em todas as páginas, inclusive depois de mudanças de rota no cliente:
   <script src="https://tryclew.io/widget/COLE_AQUI_A_SUA_CHAVE.js" async></script>
   
   Este é um projeto do Lovable (React + Vite): coloque a tag no index.html logo antes de </head>.
   
   Quando o utilizador com sessão iniciada estiver carregado, e sempre que estes valores mudarem, chame Clew.identify() com algumas propriedades não pessoais como strings, por exemplo { plan: "trial", role: "owner", onboarded: "false" }. Se o widget ainda puder não ter carregado, defina antes o stub de fila: window.TutorKit = window.TutorKit || { q: [], identify: function (p) { this.q.push(["identify", p]); } }; e chame window.TutorKit.identify(...). Nunca envie nomes, e-mails ou outros dados pessoais.
   
   Regras:
   - Use a URL do script exatamente como está. Não transfira, não empacote e não instale um pacote npm.
   - Se o projeto define uma Content-Security-Policy, permita https://tryclew.io em script-src e connect-src.
   - Não mude mais nada e me mostre o diff.

   Copiar

   

4. Passo 04

   Verifique a mudança e publique

   Abra a visualização de código: espere o index.html com uma linha a mais e os pequenos acréscimos do prompt. Depois clique em Publish: o widget só funciona na app publicada.

   

5. Passo 05

   Escreva os itens do checklist no Clew

   No Clew abra Fluxos → + Novo fluxo e escolha Checklist de onboarding. Preencha Título da checklist e adicione de 3 a 5 Tarefas da checklist: um título que seja uma ação, uma linha de explicação e, em URL do link, a página onde a tarefa é feita. Não precisa de seletores.

   

6. 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	Checklist de onboarding
   Onde mostrar (URL da página)	Secção por prefixo /dashboard
   Quando mostrar	Logo ao carregar a página
   Segmentação de público	Propriedade onboarded é diferente de true
   Frequência	Uma vez por visitante

   

7. Passo 07

   Publique e verifique no site real

   Mude Estado para Publicado e guarde. Abra a página numa janela anónima: o Clew lembra quem já viu um item de “uma vez”, por isso o seu navegador de sempre pode saltar. Visualizações, conclusões e abandonos aparecem nas estatísticas.

   

Armadilhas: checklist de onboarding numa app do Lovable