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은 현재 메이저 버전을 고정하니, 놀랄 만한 브레이킹 체인지 없이 수정과 새 게임을 받습니다. 그 한 줄이 <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으로 post합니다). 호스팅 인증을 보세요.
클라이언트 게이트 (억제책일 뿐, 서버 검증 아님)
폼을 Webflow 기본 처리기에 그대로 두고, trigger="form-submit"에 기대어 확인이 통과할 때까지 제출을 막으세요. 이것은 봇에게 문턱을 높이지만 서버에서 검증된 보장은 아니니, 그래도 괜찮은 곳에서만 쓰세요.