--- type: how-to title: Intégration côté client summary: Comment poser le widget sur ta page, par une balise script CDN ou un import npm, et lequel choisir. --- Le widget est un petit paquet, `@caputchin/widget`, qui enregistre les éléments personnalisés `` et ``. Il y a deux façons de le poser sur ta page. Choisis selon que ton site a une étape de build. Les deux éléments ne sont pas interchangeables quand une clé exige un jeu. Si une clé de site a le gate de jeu activé (son réglage **Exiger un jeu pour vérifier**), le `` à case à cocher ne peut pas passer dessus et lève une erreur `gate-unavailable` ; seul `` fonctionne là. C'est voulu, parce que le gate est appliqué du côté de Caputchin. Vois [le gate de jeu](/docs/site-keys/games). ## Balise script (CDN) Pas d'étape de build, une page HTML pure ou rendue côté serveur ? Charge-le directement depuis le CDN jsDelivr : ```html ``` 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 `` (ou juste avant ``) 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 : ```bash npm install @caputchin/widget ``` ```js import "@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 `` 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](/docs/integration-guides/frontend-examples) pour l'élément dans chaque framework. - [Ajouter le widget à ton site](/docs/getting-started/add-the-widget) pour la marche à suivre complète.