Webflow

Caputchin 靠自定义代码落到 Webflow 站点上。没有要安装的 marketplace 应用：你像加任何第三方脚本那样加上组件，再把它接到你的表单上。完整组件和游戏都能用。

1. 加载组件

打开你项目的 Site Settings → Custom Code，把加载器粘进 Head Code 字段：

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

那个 @3 把当前的主版本钉住，于是你拿到修复和新游戏，而不会冒出意外的破坏性变更。那一行就把 <caputchin-widget> 和 <caputchin-game> 元素为整个站点注册好了。（如果你的站点有构建步骤，npm 的选项见 客户端集成。）

2. 把它放到表单里

在 Designer 里，往你想保护的 <form> 内加一个 Embed 元素（Add panel → Components → Embed），并把组件放进去。用你在 仪表盘 里的公开站点密钥：

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

trigger="form-submit" 会在表单提交时跑那道检查，并把提交拦住直到它通过。复选框也可以点：访客可以在提交前点一下来完成验证，这会就地注入令牌而不提交表单。一旦通过（无论是点击还是提交），组件都会往外层表单里注入一个隐藏的 <input name="caputchin-token">，那正是你的验证步骤要读的东西。

要用游戏代替复选框，就用 <caputchin-game>：

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

3. 核验令牌

组件证明的是有个真人在浏览器里通过了；在你信任这次提交之前，仍然要在服务端确认令牌。挑一个合你这套搭法的模式。

你自己的后端（有的话推荐）

在 Designer 里打开表单的设置，设成 Send to → Custom action，并把它指向你的端点。你的服务器读 caputchin-token 字段，并用 /siteverify 确认它。确切的服务端调用见 服务端集成 和 从 reCAPTCHA 迁移。

Caputchin 托管验证（不用后端）

如果你不跑服务器，就把表单的 Custom action 指向仪表盘给你的那个托管验证转发器 URL。Caputchin 核验令牌，并把提交送到你的 webhook 或邮箱。这是一个付费功能，而且它会取代 Webflow 自带的提交收件箱（表单提交到 Caputchin，而不是 Webflow）。见 托管验证。

客户端把关（只是门槛，不是服务端核验）

把表单留在 Webflow 自带的处理方式上，靠 trigger="form-submit" 挡住提交直到检查通过。这抬高了机器人的门槛，但不是服务端核验过的保证，所以只在能接受这一点的地方用它。