Como criar um aviso de paywall com o Claude Code sem programador

Exemplo: um aviso de upgrade com o Claude Code

Como adicionar o aviso de paywall com o Claude Code, 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

   Inicie o Claude Code no projeto

   Rode claude na pasta do projeto (ou abra o Claude Code na sua IDE). Ele trabalha no seu repositório de verdade e pede permissão antes de editar arquivos.

   

3. Passo 03

   Envie o prompt com a sua chave

   Troque COLE_AQUI_SUA_CHAVE pela sua chave e envie o prompt.

   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 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, o template base em apps renderizados no servidor) e adicione a tag ali.
   
   Quando o usuário logado estiver carregado, e sempre que a assinatura mudar, chame Clew.identify({ plan: <id do plano atual do usuário como string, ex. "free"> }). 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 um atributo data-tour aos botões das funções pagas (por exemplo data-tour="export"). Não adicione lógica própria de pagamento, bloqueio ou paywall e não mude o que os botões fazem.
   
   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

   Aprove as edições e publique

   Aprove as edições propostas depois de ler, faça commit e deploy como sempre, ou peça ao Claude Code para abrir um pull request.

   

5. Passo 05

   Escreva o aviso de upgrade

   No Clew abra Fluxos → + Novo fluxo e escolha Janela modal. Um passo: um título com o benefício (“Exportar para CSV é no Pro”), uma frase de valor e, em Texto do link / URL do link, o botão e a URL da sua página de preços ou checkout.

   

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	Janela modal
   Onde mostrar (URL da página)	Seção por prefixo /invoices
   Quando mostrar	Ao clicar num elemento: [data-tour="recurring"]
   Segmentação de público	Propriedade plan é igual a free
   Frequência	A cada visita

   

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: aviso de paywall com o Claude Code