Instale sem erros — você ou o seu agente de IA.

01Prompt para o seu agente de IA

Cole o texto abaixo no seu assistente de código, troque MINHA_CHAVE_PK_LIVE pela chave do seu painel, e ele faz a integração inteira — instalação, telas vazias e conclusão de passos — sem quebrar o seu produto.

Você é meu assistente de código. Integre o AppKit (appkit.com.br) no meu produto web SEM quebrar nada. O AppKit injeta um checklist de onboarding, telas vazias e avisos, controlados por um painel externo. Faça exatamente:

1) INSTALAÇÃO
- Se o projeto usa bundler (React/Vue/Next/Svelte/etc.): instale o pacote
  @tecaless/appkit-sdk
  e, no ponto de entrada, DEPOIS que o usuário faz login (quando eu já tenho o id dele), chame:
  import { init } from '@tecaless/appkit-sdk'
  init({ apiKey: 'MINHA_CHAVE_PK_LIVE', userId:  })
- Se for site estático / no-code: adicione ANTES de :
  
- O userId/data-user DEVE ser o identificador estável do usuário logado. O AppKit o transforma em hash no servidor — NUNCA envie e-mail ou nome. Se não houver usuário logado, deixe sem userId.

2) TELAS VAZIAS
Para cada tela que nasce sem dados e onde eu quero um convite à ação (ex.: faturas, contatos, agenda), envolva o estado vazio atual em UM contêiner marcado, mantendo o conteúdo atual dentro como fallback:
  
 ...o "nenhum registro" atual... 
Use um nome curto e estável por tela (ex.: faturas-vazio, contatos-vazio). NÃO use seletor de CSS gerado por build. Me devolva a lista dos nomes que você criou.

3) CONCLUSÃO DE PASSOS (importante para métrica real)
Para cada passo do onboarding que representa uma AÇÃO REAL do usuário (ex.: "emitir primeira fatura"), chame no momento EXATO em que a ação se concretiza de verdade — depois de salvar no servidor, não no clique do botão:
  window.AppKit && window.AppKit.track('fatura_emitida')
Use um nome de evento por ação, em snake_case. Me devolva a lista de eventos que você criou.

4) NÃO QUEBRAR
- Carregue o SDK de forma assíncrona; ele é fail-open (se cair, some sozinho e não afeta o meu produto).
- A chave pk_live é pública por natureza (pode ficar no cliente). Não exponha nenhuma chave secreta.
- Não bloqueie renderização esperando o AppKit.

No fim, liste: (a) arquivos alterados, (b) nomes de data-appkit criados, (c) nomes de eventos criados — para eu configurar no painel do AppKit.

02Instalação

Duas formas. Se você usa um framework, comece pelo npm.

Com bundler (React, Vue, Next, Svelte…) — recomendado

npm i @tecaless/appkit-sdk

import { init, track } from '@tecaless/appkit-sdk'

init({ apiKey: 'MINHA_CHAVE_PK_LIVE', userId: usuario.id })
// quando uma ação real acontece:
track('fatura_emitida')

No-code / site estático — uma linha

<script src="https://appkit.com.br/sdk/appkit@3.0.7.js"
        data-key="MINHA_CHAVE_PK_LIVE"
        data-user="ID_DO_USUARIO" async></script>

A sua chave pk_live_… está no painel, em Instalação. Ela é pública por natureza (só permite ler a sua configuração e enviar eventos).

03Onde cada coisa aparece

As três experiências funcionam em qualquer página do seu produto, dentro do domínio onde você instalou. Você controla tudo pelo painel, sem novo deploy.

04Telas vazias: você não precisa mexer no código

A mágica da tela vazia é não ter que declarar nada. Clique em Copiar prompt e o seu agente de IA cuida da parte técnica: ele aponta para um elemento que já existe no seu sistema (via seletor, sem tocar no HTML) ou, se precisar, adiciona uma marcação estável — o AppKit aceita os dois. Depois você só edita o texto pelo painel, para sempre, sem deploy.

Copiar prompt para o meu agente de IA

O usuário clicou em "Copiar prompt" na função TELAS VAZIAS do AppKit (appkit.com.br). Ele quer que uma tela que nasce sem dados no produto dele vire um convite à ação, SEM mexer no código manualmente. Faça:

PRÉ-REQUISITO — o AppKit precisa estar instalado. Se ainda não estiver, instale antes:
  npm i @tecaless/appkit-sdk
  import { init } from '@tecaless/appkit-sdk'; init({ apiKey: 'MINHA_CHAVE_PK_LIVE', userId:  })
  (ou, no-code:  antes de )

TELA VAZIA — encontre no código a tela que nasce vazia (ex.: lista de faturas/contatos) e escolha COMO o AppKit ancora ali (as duas formas são aceitas):
  (a) aponte para um elemento que JÁ EXISTE, via seletor CSS estável (id ou classe semântica) — sem mexer no HTML; ou
  (b) se só houver classe gerada por build, envolva o estado vazio em 
…conteúdo atual…
.
Me devolva o seletor/nome de cada tela vazia (ex.: "#faturas-vazio" ou "faturas-vazio") para eu colar no painel → Telas vazias.

FUNÇÕES DISPONÍVEIS do AppKit (ative cada uma no painel https://appkit.com.br/painel): checklist de primeiros passos, telas vazias, avisos no topo, e conclusão de passos por evento (chame window.AppKit.track('acao_real') no instante da ação real). Guia completo: https://appkit.com.br/guia

NÃO quebre nada: carregue async, o SDK é fail-open, e a chave pk_live é pública (não exponha chave secreta). No fim, liste os arquivos alterados e os seletores/nomes criados.

Se a ancoragem sumir um dia, o AppKit avisa você (evento appkit_anchor_missing) e não renderiza nada — a sua tela continua normal.

05Como um passo se conclui

Três modos, escolhidos por passo no painel. Isto decide se o seu funil de ativação mede ação real ou só cliques.

06Garantias

• Falha aberta: se o AppKit cair, o widget some e o seu produto continua idêntico. Nenhum erro nosso chega ao seu console.
• Leve e isolado: ~10 KB, em Shadow DOM. Não toca no seu CSS nem disputa o carregamento da sua página.
• Botão de desligar: um clique no painel remove o AppKit de todos os seus usuários em até 30 segundos, sem deploy.
• LGPD por construção: o id do seu usuário vira hash irreversível (SHA-256 + salt por conta) antes de tocar o banco. Nunca envie e-mail ou nome.
• Auditável: o SDK é servido em URL fixa e há pacote npm público.

07Erros comuns (e como evitar)

Ainda com dúvida? contato@appkit.com.br.