Webflow

Caputchin はカスタムコードで Webflow サイトに載ります。インストールするマーケットプレイスアプリはありません。ほかのサードパーティのスクリプトと同じようにウィジェットを追加し、フォームにつなぐだけです。フル機能のウィジェットもゲームも、どちらも動きます。

1. ウィジェットを読み込む

プロジェクトの Site Settings → Custom Code を開き、Head Code の欄にローダーを貼り付けます:

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

@3 は現在のメジャーバージョンを固定するので、不意の破壊的変更なしに修正と新しいゲームを受け取れます。この 1 行で <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 標準の送信受信箱を置き換えます（フォームは Webflow ではなく Caputchin にポストします）。ホスト型認証 を参照してください。

クライアントゲート（抑止であって、サーバー検証ではありません）

フォームは Webflow 標準のハンドラのままにし、trigger="form-submit" に頼ってチェックが通るまで送信をブロックします。これはボットのハードルを上げますが、サーバーで検証された保証ではないので、それで差し支えない場面だけで使ってください。