Webflow

Caputchin se pone en un sitio de Webflow con código personalizado. No hay una app de marketplace que instalar: añades el widget igual que añades cualquier script de terceros, y lo conectas a tu formulario. Funcionan tanto el widget completo como los juegos.

Abre el Site Settings → Custom Code de tu proyecto y pega el cargador en el campo Head Code:

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

El @3 fija la versión major actual, así que obtienes fixes y juegos nuevos sin un breaking change sorpresa. Esa única línea registra los elementos <caputchin-widget> y <caputchin-game> para todo el sitio. (Mira Integración del lado del cliente para la opción de npm si tu sitio tiene un paso de build.)

2. Ponlo en tu formulario

En el Designer, añade un elemento Embed (Add panel → Components → Embed) dentro del <form> que quieres proteger, y mete el widget ahí. Usa tu clave de sitio pública del panel:

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

trigger="form-submit" corre la comprobación cuando se envía el formulario y retiene el envío hasta que pasa. La checkbox también es clicable: un visitante puede clicarla para verificar antes de enviar, lo que inyecta el token ahí mismo sin enviar el formulario. Al pasar (por clic o por envío), el widget inyecta un <input name="caputchin-token"> oculto en el formulario que lo envuelve, que tu paso de verificación lee.

Para un juego en vez de la checkbox, usa <caputchin-game>:

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

3. Verifica el token

El widget prueba que un humano pasó en el navegador; aun así confirmas el token del lado del servidor antes de fiarte del envío. Elige el modo que encaje con tu montaje.

Tu propio backend (recomendado si tienes uno)

Abre los ajustes del formulario en el Designer, pon Send to → Custom action y apúntalo a tu endpoint. Tu servidor lee el campo caputchin-token y lo confirma con /siteverify. Mira Integración del lado del servidor y Migra desde reCAPTCHA para la llamada de servidor exacta.

Verificación alojada de Caputchin (sin backend)

Si no corres un servidor, apunta el Custom action del formulario a la URL de tu reenviador de verificación alojada, la que sale en el panel. Caputchin verifica el token y entrega el envío a tu webhook o a tu correo. Esta es una función de pago, y reemplaza la bandeja de envíos nativa de Webflow (el formulario postea a Caputchin en vez de a Webflow). Mira Verificación alojada.

Gate de cliente (un disuasorio, no verificado en el servidor)

Deja el formulario en el manejador nativo de Webflow y apóyate en trigger="form-submit" para bloquear el envío hasta que la comprobación pase. Esto sube el listón para los bots pero no es una garantía verificada en el servidor, así que úsalo solo donde eso sea aceptable.