Como configurar o onboarding de utilizadores numa app feita no Cursor sem programador

Exemplo: onboarding de utilizadores numa app feita no Cursor

Como configurar o onboarding de utilizadores numa app feita no Cursor, 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 repositório no Cursor, modo Agent

   Abra a pasta do projeto no Cursor e o chat no modo Agent, para que edite os ficheiros sozinho.

   

3. Passo 03

   Envie o prompt com a sua chave

   Substitua COLE_AQUI_A_SUA_CHAVE pela sua chave e envie. O Cursor lê o repositório e escolhe o ficheiro raiz certo da lista do prompt.

   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>
   
   Encontre o ficheiro HTML raiz ou o layout raiz deste projeto (index.html no Vite, app/layout.tsx com next/script no Next.js App Router, app.head.script do nuxt.config.ts no Nuxt, src/app.html no SvelteKit) e adicione a tag ali.
   
   Depois do login, chame Clew.identify() com propriedades não pessoais como strings que diferenciem um utilizador novo de um antigo, por exemplo { signup_source: "web", onboarded: "false", role: "owner" }, e atualize onboarded para "true" quando o utilizador concluir a ação principal. 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(...). Adicione também atributos data-tour à navegação principal e ao botão principal de criar. Nunca envie nomes nem e-mails.
   
   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

   Aceite o diff, faça commit e deploy

   Revise o diff — a tag num ficheiro raiz e os pequenos acréscimos do prompt —, aceite, faça commit e push. A sua alojamento publica como sempre.

   

5. Passo 05

   Crie os três itens do onboarding

   Em Fluxos crie três itens: um Janela modal com uma frase de boas-vindas e um link para o ecrã principal; um tour Tooltips passo a passo de 3–4 passos nesse ecrã, feito com Editar no seu site e Escolher elemento; e um Checklist de onboarding com as tarefas de configuração que faltam.

   

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
   Pop-up de boas-vindas
   Formato	Janela modal
   Onde mostrar (URL da página)	Caminho exato /deals
   Quando mostrar	Logo ao carregar a página
   Segmentação de público	Propriedade role é igual a sales_rep
   Frequência	Uma vez por visitante
   Tour do produto
   Formato	Tooltips passo a passo
   Onde mostrar (URL da página)	Secção por prefixo /deals/pipeline
   Quando mostrar	Logo ao carregar a página
   Segmentação de público	Sem regras: toda nós que abre a página
   Frequência	Uma vez por visitante
   Checklist
   Formato	Checklist de onboarding
   Onde mostrar (URL da página)	Secção por prefixo /deals
   Quando mostrar	Na N.ª visita: 2
   Segmentação de público	Sem regras: toda nós que abre a página
   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: onboarding de utilizadores numa app feita no Cursor