Intégration côté client
Le widget est un petit paquet, @caputchin/widget, qui enregistre les éléments personnalisés <caputchin-widget> et <caputchin-game>. Il y a deux façons de le poser sur ta page. Choisis selon que ton site a une étape de build.
Balise script (CDN)
Pas d'étape de build, une page HTML pure ou rendue côté serveur ? Charge-le directement depuis le CDN jsDelivr :
<script src="https://cdn.jsdelivr.net/npm/@caputchin/widget@3/dist/widget.js"></script>Le @3 épingle la version majeure actuelle, donc tu reçois les correctifs et les nouveaux jeux sans changement cassant surprise. Dépose cette unique ligne dans ton <head> (ou juste avant </body>) et les éléments sont enregistrés pour toute la page.
npm (ESM)
Tu as un bundler (Vite, webpack, Next.js, etc.) ? Installe le paquet et importe-le une fois au démarrage :
npm install @caputchin/widgetimport "@caputchin/widget";L'import n'expose rien à appeler ; il s'exécute pour son effet de bord d'enregistrer les éléments personnalisés. Mets-le au point d'entrée de ton app pour qu'il s'exécute avant que le moindre <caputchin-widget> ne s'affiche.
Lequel ?
- Pas d'étape de build (HTML pur, un template rendu côté serveur) : utilise la balise script. C'est toute l'intégration en une ligne.
- Une app bundlée (React, Vue, et le reste) : utilise l'import npm. Il se versionne avec ton lockfile et évite une requête externe qui bloque le rendu.
Dans les deux cas, l'élément et tout ce qui suit (le token injecté, ta vérification serveur) sont identiques. La seule chose qui change, c'est la façon dont le paquet arrive.
Voir aussi
- Exemples d'intégration frontend pour l'élément dans chaque framework.
- Ajouter le widget à ton site pour la marche à suivre complète.