Webflow

Caputchin turun ke situs Webflow lewat custom code. Tak ada aplikasi marketplace yang perlu dipasang: kamu menambahkan widget seperti menambahkan script pihak ketiga mana pun, lalu menyambungkannya ke formulirmu. Widget penuh dan game-nya sama-sama jalan.

Buka Site Settings → Custom Code proyekmu, dan tempel loader ke kolom Head Code:

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

@3 itu mematok versi major saat ini, jadi kamu dapat perbaikan dan game baru tanpa breaking change yang mengejutkan. Satu baris itu mendaftarkan elemen <caputchin-widget> dan <caputchin-game> untuk seluruh situs. (Lihat Integrasi sisi klien untuk opsi npm kalau situsmu punya langkah build.)

2. Taruh di formulirmu

Di Designer, tambahkan elemen Embed (Add panel → Components → Embed) di dalam <form> yang mau kamu lindungi, lalu taruh widget-nya di situ. Pakai kunci situs publikmu dari dasbor:

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

trigger="form-submit" menjalankan pemeriksaan saat formulir dikirim dan menahan submit sampai lolos. Checkbox-nya juga bisa diklik: pengunjung boleh mengkliknya untuk verifikasi sebelum mengirim, dan itu menyuntikkan token di tempat tanpa mengirim formulir. Begitu lolos (lewat klik maupun lewat submit), widget menyuntikkan <input name="caputchin-token"> tersembunyi ke formulir yang melingkupinya, dan itulah yang dibaca langkah verifikasimu.

Untuk game alih-alih checkbox, pakai <caputchin-game>:

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

3. Verifikasi token-nya

Widget membuktikan seorang manusia lolos di peramban; kamu tetap memastikan token-nya di sisi server sebelum memercayai kiriman itu. Pilih mode yang cocok dengan susunanmu.

Backend-mu sendiri (disarankan kalau kamu punya)

Buka pengaturan formulir di Designer, setel Send to → Custom action, dan arahkan ke endpoint-mu. Server-mu membaca kolom caputchin-token dan memastikannya dengan /siteverify. Lihat Integrasi sisi server dan Migrasi dari reCAPTCHA untuk panggilan server yang persis.

Verifikasi terhosting Caputchin (tanpa backend)

Kalau kamu tak menjalankan server, arahkan Custom action formulir ke URL penerus verifikasi terhosting milikmu dari dasbor. Caputchin memverifikasi token-nya dan mengantarkan kiriman itu ke webhook atau email-mu. Ini fitur berbayar, dan ia menggantikan kotak masuk kiriman bawaan Webflow (formulirnya memposting ke Caputchin, bukan ke Webflow). Lihat Verifikasi terhosting.

Gerbang klien (penghalang, bukan terverifikasi server)

Biarkan formulirnya di penangan bawaan Webflow dan andalkan trigger="form-submit" untuk memblokir submit sampai pemeriksaannya lolos. Ini menaikkan palang buat bot tapi bukan jaminan yang terverifikasi server, jadi pakai hanya di tempat yang memang menerima itu.