Installez sans erreur — vous, ou votre agent IA.

01Prompt pour votre agent IA

Collez le texte ci-dessous dans votre assistant de code, remplacez MINHA_CHAVE_PK_LIVE par la clé de votre tableau de bord, et il fait toute l'intégration — installation, états vides et complétion des étapes — sans casser votre produit.

Tu es mon assistant de code. Intègre AppKit (appkit.com.br) dans mon produit web SANS rien casser. AppKit injecte une checklist d'onboarding, des états vides et des annonces, pilotés depuis un tableau de bord externe. Fais exactement ceci :

1) INSTALLATION
- Si le projet utilise un bundler (React/Vue/Next/Svelte/etc.) : installe le paquet
  @tecaless/appkit-sdk
  et, au point d'entrée, APRÈS que l'utilisateur s'est connecté (quand j'ai déjà son id), appelle :
  import { init } from '@tecaless/appkit-sdk'
  init({ apiKey: 'MINHA_CHAVE_PK_LIVE', userId:  })
- Si c'est un site statique / no-code : ajoute AVANT  :
  
- Le userId/data-user DOIT être l'identifiant stable de l'utilisateur connecté. AppKit le transforme en hash côté serveur — n'envoie JAMAIS d'e-mail ni de nom. S'il n'y a pas d'utilisateur connecté, laisse sans userId.

2) ÉTATS VIDES
Pour chaque écran qui nait sans données et où je veux un appel à l'action (p. ex. factures, contacts, agenda), enveloppe l'état vide actuel dans UN conteneur marqué, en gardant le contenu actuel à l'intérieur comme solution de repli :
  
 ...le « aucun enregistrement » actuel... 
Utilise un nom court et stable par écran (p. ex. faturas-vazio, contatos-vazio). N'utilise PAS de sélecteur CSS généré par le build. Rends-moi la liste des noms que tu as créés.

3) COMPLÉTION DES ÉTAPES (important pour une métrique réelle)
Pour chaque étape de l'onboarding qui représente une ACTION RÉELLE de l'utilisateur (p. ex. « émettre la première facture »), appelle au moment EXACT où l'action se concrétise vraiment — après l'enregistrement côté serveur, pas au clic du bouton :
  window.AppKit && window.AppKit.track('fatura_emitida')
Utilise un nom d'évènement par action, en snake_case. Rends-moi la liste des évènements que tu as créés.

4) NE RIEN CASSER
- Charge le SDK de manière asynchrone ; il est fail-open (s'il tombe, il disparait tout seul et n'affecte pas mon produit).
- La clé pk_live est publique par nature (elle peut rester côté client). N'expose aucune clé secrète.
- Ne bloque pas le rendu en attendant AppKit.

À la fin, liste : (a) fichiers modifiés, (b) noms de data-appkit créés, (c) noms d'évènements créés — pour que je les configure dans le tableau de bord AppKit.

02Installation

Deux manières. Si vous utilisez un framework, commencez par npm.

Avec bundler (React, Vue, Next, Svelte…) — recommandé

npm i @tecaless/appkit-sdk

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

init({ apiKey: 'MINHA_CHAVE_PK_LIVE', userId: usuario.id })
// quand une action réelle se produit :
track('fatura_emitida')

No-code / site statique — une ligne

<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>

Votre clé pk_live_… est dans le tableau de bord, sous Installation. Elle est publique par nature (elle permet seulement de lire votre configuration et d'envoyer des évènements).

03Où chaque chose apparait

Les trois expériences fonctionnent sur n'importe quelle page de votre produit, dans le domaine où vous l'avez installé. Vous contrôlez tout depuis le tableau de bord, sans nouveau deploy.

04États vides : vous n'avez pas besoin de toucher au code

La magie de l'état vide, c'est de ne rien avoir à déclarer. Cliquez sur Copier le prompt et votre agent IA s'occupe de la partie technique : il pointe vers un élément qui existe déjà dans votre système (via un sélecteur, sans toucher au HTML) ou, si besoin, ajoute un marqueur stable — AppKit accepte les deux. Ensuite, vous éditez simplement le texte depuis le tableau de bord, pour toujours, sans deploy.

Copier le prompt pour mon agent IA

L'utilisateur a cliqué sur « Copier le prompt » dans la fonction ÉTATS VIDES d'AppKit (appkit.com.br). Il veut qu'un écran qui nait sans données dans son produit devienne un appel à l'action, SANS modifier le code à la main. Fais :

PRÉREQUIS — AppKit doit être installé. Si ce n'est pas encore le cas, installe-le d'abord :
  npm i @tecaless/appkit-sdk
  import { init } from '@tecaless/appkit-sdk'; init({ apiKey: 'MINHA_CHAVE_PK_LIVE', userId:  })
  (ou, no-code :  avant )

ÉTAT VIDE — trouve dans le code l'écran qui nait vide (p. ex. liste de factures/contacts) et choisis COMMENT AppKit s'ancre là (les deux manières sont acceptées) :
  (a) pointe vers un élément qui EXISTE DÉJÀ, via un sélecteur CSS stable (id ou classe sémantique) — sans toucher au HTML ; ou
  (b) s'il n'y a qu'une classe générée par le build, enveloppe l'état vide dans 
…contenu actuel…
.
Rends-moi le sélecteur/nom de chaque état vide (p. ex. « #faturas-vazio » ou « faturas-vazio ») pour que je le colle dans le tableau de bord → États vides.

FONCTIONS DISPONIBLES d'AppKit (active chacune dans le tableau de bord https://appkit.com.br/painel) : checklist des premiers pas, états vides, annonces en haut, et complétion des étapes par évènement (appelle window.AppKit.track('acao_real') à l'instant de l'action réelle). Guide complet : https://appkit.com.br/guia

Ne casse RIEN : charge en async, le SDK est fail-open, et la clé pk_live est publique (n'expose aucune clé secrète). À la fin, liste les fichiers modifiés et les sélecteurs/noms créés.

Si l'ancrage disparait un jour, AppKit vous prévient (évènement appkit_anchor_missing) et ne rend rien — votre écran reste normal.

05Comment une étape se termine

Trois modes, choisis étape par étape dans le tableau de bord. Cela décide si votre entonnoir d'activation mesure une action réelle ou juste des clics.

06Garanties

• Fail-open : si AppKit tombe, le widget disparait et votre produit reste identique. Aucune de nos erreurs n'atteint votre console.
• Léger et isolé : ~10 KB, dans un Shadow DOM. Il ne touche pas votre CSS et ne dispute pas le chargement de votre page.
• Bouton d'arrêt : un clic dans le tableau de bord retire AppKit de tous vos utilisateurs en moins de 30 secondes, sans deploy.
• LGPD par construction : l'id de votre utilisateur devient un hash irréversible (SHA-256 + salt par compte) avant de toucher la base de données. N'envoyez jamais d'e-mail ni de nom.
• Auditable : le SDK est servi depuis une URL fixe et il existe un paquet npm public.

07Erreurs courantes (et comment les éviter)

Encore un doute ? contato@appkit.com.br.