---
type: how-to
title: Webflow
summary: "Add Caputchin to a Webflow site with custom code: load the widget, place it on your form, and verify the token."
---

Caputchin drops onto a Webflow site with custom code. There is no marketplace app to install: you add the widget the same way you add any third-party script, and wire it to your form. The full widget and the games both work.

<Callout type="warn">
Webflow runs custom code only on a paid **Site Plan** (or a paid Workspace). The free Starter plan publishes no third-party JavaScript, so the loader below cannot run there. This is a Webflow platform limit that applies to every script-based captcha, not just Caputchin. You can design with the widget for free; publishing it live needs a paid plan.
</Callout>

## 1. Load the widget

Open your project's **Site Settings → Custom Code**, and paste the loader into the **Head Code** field:

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

The `@3` pins the current major version, so you get fixes and new games without a surprise breaking change. That one line registers the `<caputchin-widget>` and `<caputchin-game>` elements for the whole site. (See [Client side integration](/docs/integration-guides/cdn) for the npm option if your site has a build step.)

## 2. Place it on your form

In the Designer, add an **Embed** element (Add panel → Components → Embed) inside the `<form>` you want to protect, and put the widget in it. Use your public site key from the [dashboard](https://caputchin.com):

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

`trigger="form-submit"` runs the check when the form is submitted and gates the submit until it passes. On a pass, the widget injects a hidden `<input name="caputchin-token">` into the enclosing form, which your verification step reads.

For a game instead of the checkbox, use `<caputchin-game>`:

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

<Callout type="warn">
The two elements are not interchangeable when a key requires a game. If a site key has the game gate turned on (its **Require a game to verify** setting), the checkbox `<caputchin-widget>` cannot pass on it and raises a `gate-unavailable` error; only `<caputchin-game>` works there. See [the game gate](/docs/site-keys/games).
</Callout>

## 3. Verify the token

The widget proves a human passed in the browser; you still confirm the token server-side before trusting the submission. Pick the mode that fits your setup.

### Your own backend (recommended where you have one)

Open the form's settings in the Designer, set **Send to → Custom action**, and point it at your endpoint. Your server reads the `caputchin-token` field and confirms it with `/siteverify`. See [Server side integration](/docs/integration-guides/verify-on-your-backend) and [Migrate from reCAPTCHA](/docs/migration-guides/migrate-from-recaptcha) for the exact server call.

### Caputchin hosted verification (no backend)

If you do not run a server, point the form's **Custom action** at your hosted-verification forwarder URL from the dashboard. Caputchin verifies the token and delivers the submission to your webhook or email. This is a paid feature, and it replaces Webflow's native submissions inbox (the form posts to Caputchin instead of Webflow). See [Hosted verification](/docs/hosted-verification/set-up).

### Client gate (a deterrent, not server-verified)

Leave the form on Webflow's native handler and rely on `trigger="form-submit"` to block submit until the check passes. This raises the bar for bots but is not a server-verified guarantee, so use it only where that is acceptable.

<Callout type="info">
Both server-verified modes (your backend, hosted verification) need the form to post to a **Custom action**, which Webflow allows on a paid plan. Keeping Webflow's native form inbox means the client-gate option only.
</Callout>