Webflow

Caputchin kommt mit Custom Code auf eine Webflow-Site. Es gibt keine Marketplace-App zu installieren: du fügst das Widget genauso ein wie jedes andere Drittanbieter-Script und verdrahtest es mit deinem Formular. Das volle Widget und die Spiele funktionieren beide.

Öffne die Site Settings → Custom Code deines Projekts und füg den Loader in das Feld Head Code ein:

<script src="https://cdn.jsdelivr.net/npm/@caputchin/widget@3/dist/widget.js"></script>

Das @3 pinnt die aktuelle Major-Version, sodass du Fixes und neue Spiele ohne überraschende Breaking Changes bekommst. Diese eine Zeile registriert die Elemente <caputchin-widget> und <caputchin-game> für die ganze Site. (Sieh dir Clientseitige Integration für die npm-Variante an, falls deine Site einen Build-Schritt hat.)

2. Setz es auf dein Formular

Füg im Designer ein Embed-Element (Add panel → Components → Embed) in das <form> ein, das du schützen willst, und setz das Widget hinein. Nimm deinen öffentlichen Site-Key aus dem Dashboard:

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

trigger="form-submit" lässt die Prüfung laufen, wenn das Formular abgeschickt wird, und hält das Absenden auf, bis sie besteht. Die Checkbox ist auch anklickbar: ein Besucher kann sie vor dem Absenden anklicken, um zu verifizieren, was das Token an Ort und Stelle einsetzt, ohne das Formular abzuschicken. Bei Erfolg (ob per Klick oder per Absenden) setzt das Widget ein verstecktes <input name="caputchin-token"> in das umschließende Formular, das dein Verifizierungsschritt ausliest.

Für ein Spiel statt der Checkbox nimm <caputchin-game>:

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

3. Das Token verifizieren

Das Widget beweist, dass im Browser ein Mensch durchgekommen ist; du bestätigst das Token trotzdem serverseitig, bevor du der Einsendung traust. Wähl den Modus, der zu deinem Aufbau passt.

Dein eigenes Backend (empfohlen, wo du eins hast)

Öffne die Einstellungen des Formulars im Designer, setz Send to → Custom action und richte es auf deinen Endpoint. Dein Server liest das Feld caputchin-token und bestätigt es mit /siteverify. Sieh dir Serverseitige Integration und Von reCAPTCHA migrieren für den genauen Server-Aufruf an.

Gehostete Verifizierung von Caputchin (kein Backend)

Wenn du keinen Server betreibst, richte die Custom action des Formulars auf deine Weiterleitungs-URL für gehostete Verifizierung aus dem Dashboard. Caputchin verifiziert das Token und stellt die Einsendung an deinen Webhook oder deine E-Mail zu. Das ist eine bezahlte Funktion, und sie ersetzt Webflows eigenen Einsendungs-Posteingang (das Formular postet an Caputchin statt an Webflow). Sieh dir Gehostete Verifizierung an.

Client-Gate (eine Hürde, nicht serverseitig verifiziert)

Lass das Formular auf Webflows eigenem Handler und verlass dich auf trigger="form-submit", um das Absenden zu blockieren, bis die Prüfung besteht. Das legt die Latte für Bots höher, ist aber keine serverseitig verifizierte Garantie, nimm es also nur dort, wo das in Ordnung ist.