Webflow

Caputchin se pose sur un site Webflow avec du code personnalisé. Il n'y a pas d'app de marketplace à installer : tu ajoutes le widget comme n'importe quel script tiers, et tu le relies à ton formulaire. Le widget complet et les jeux fonctionnent tous les deux.

Ouvre les Site Settings → Custom Code de ton projet et colle le loader dans le champ Head Code :

<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. Cette unique ligne enregistre les éléments <caputchin-widget> et <caputchin-game> pour tout le site. (Vois Intégration côté client pour l'option npm si ton site a une étape de build.)

2. Pose-le sur ton formulaire

Dans le Designer, ajoute un élément Embed (Add panel → Components → Embed) à l'intérieur du <form> que tu veux protéger, et mets le widget dedans. Utilise ta clé de site publique depuis le tableau de bord :

<caputchin-widget sitekey="cpt_pub_..." trigger="form-submit"></caputchin-widget>

trigger="form-submit" lance le contrôle à l'envoi du formulaire et retient l'envoi jusqu'à ce qu'il passe. La case à cocher est aussi cliquable : un visiteur peut la cliquer pour vérifier avant d'envoyer, ce qui injecte le token sur place sans envoyer le formulaire. En cas de réussite (par clic ou par envoi), le widget injecte un <input name="caputchin-token"> caché dans le formulaire englobant, que ton étape de vérification lit.

Pour un jeu à la place de la case à cocher, utilise <caputchin-game> :

<caputchin-game sitekey="cpt_pub_..." game="caputchin/games/leaf-memory" layout="inline"></caputchin-game>

3. Vérifie le token

Le widget prouve qu'un humain est passé dans le navigateur ; tu confirmes quand même le token côté serveur avant de faire confiance à l'envoi. Choisis le mode qui colle à ton installation.

Ton propre backend (recommandé si tu en as un)

Ouvre les réglages du formulaire dans le Designer, mets Send to → Custom action et pointe-le vers ton endpoint. Ton serveur lit le champ caputchin-token et le confirme avec /siteverify. Vois Intégration côté serveur et Migrer depuis reCAPTCHA pour l'appel serveur exact.

Vérification hébergée par Caputchin (sans backend)

Si tu ne fais pas tourner de serveur, pointe la Custom action du formulaire vers l'URL de ton relais de vérification hébergée, celle que te donne le tableau de bord. Caputchin vérifie le token et livre l'envoi à ton webhook ou à ton e-mail. C'est une fonctionnalité payante, et elle remplace la boîte d'envois native de Webflow (le formulaire poste vers Caputchin au lieu de Webflow). Vois Vérification hébergée.

Gate client (un frein, pas une vérification serveur)

Laisse le formulaire sur le gestionnaire natif de Webflow et appuie-toi sur trigger="form-submit" pour bloquer l'envoi jusqu'à ce que le contrôle passe. Ça relève la barre pour les bots mais ce n'est pas une garantie vérifiée côté serveur, donc ne t'en sers que là où c'est acceptable.