Como criar um tour do produto com o ChatGPT Codex sem programador

Exemplo: um tour do produto com o ChatGPT Codex

Como criar o tour do produto com o ChatGPT Codex, passo a passo

1. Passo 01

   Copie o seu snippet do Clew

   Crie uma conta grátis (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: troque COLE_AQUI_SUA_CHAVE pela chave do site em Admin > Visão geral -->
   <script src="https://tryclew.io/widget/COLE_AQUI_SUA_CHAVE.js" async></script>

   Copiar

   

2. Passo 02

   Conecte o repositório ao Codex

   No ChatGPT abra o Codex e conecte o repositório do GitHub do seu app (ou rode o Codex CLI na pasta do projeto). Um chat comum do ChatGPT ou o canvas só mostram código: não mudam o seu repositório.

   

3. Passo 03

   Inicie uma tarefa com o prompt

   Troque COLE_AQUI_SUA_CHAVE pela sua chave e inicie uma tarefa do Codex com o prompt abaixo.

   Adicione o widget de onboarding do Clew a este 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_SUA_CHAVE.js" async></script>
   
   Encontre o arquivo HTML raiz ou o layout raiz deste repositório (index.html no Vite, app/layout.tsx com next/script no Next.js App Router, app.head.script do nuxt.config.ts no Nuxt, o template base em apps renderizados no servidor) e adicione a tag ali.
   
   Adicione também atributos data-tour estáveis aos elementos que um tour do produto vai apontar: a navegação principal, o botão principal de criar/adicionar, o filtro ou a busca principal e o título da página, por exemplo data-tour="create-button". Não mude os estilos, textos ou o comportamento deles.
   
   Regras:
   - Use a URL do script exatamente como está. Não baixe, 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

   Revise o pull request e faça o merge

   O Codex devolve a mudança como um diff que você pode abrir como pull request. Confira que só mexe no arquivo raiz e nos pequenos acréscimos, faça o merge e deixe a hospedagem publicar.

   

5. Passo 05

   Monte o tour por cima da sua página

   No Clew abra Fluxos → + Novo fluxo, deixe Formato em Tooltips passo a passo e clique em Editar no seu site. Na sua página clique em Escolher elemento, clique no elemento do passo 1 e escreva um título e uma ou duas frases. Repita para 3–5 passos; a prévia se atualiza enquanto você digita.

   

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	Tooltips passo a passo
   Onde mostrar (URL da página)	Seção por prefixo /board
   Quando mostrar	Assim que a página carregar
   Segmentação de público	Sem regras: todo mundo que abre a página
   Frequência	Uma vez por visitante

   

7. Passo 07

   Publique e confira no site real

   Mude Status para Publicado e salve. Abra a página numa janela anônima: o Clew lembra quem já viu um item de “uma vez”, então o seu navegador de sempre pode pular. Visualizações, conclusões e abandonos aparecem nas estatísticas.

   

Armadilhas: tour do produto com o ChatGPT Codex