Webflow
ينزل Caputchin على موقع Webflow بشيفرة مخصّصة. لا يوجد تطبيق marketplace لتثبيته: تضيف الأداة تمامًا كما تضيف أي سكربت من طرف ثالث، وتوصّلها بنموذجك. وتعمل الأداة الكاملة والألعاب على حدّ سواء.
لا يشغّل Webflow الشيفرة المخصّصة إلا على Site Plan مدفوع (أو Workspace مدفوع). خطة Starter المجانية لا تنشر أي JavaScript من طرف ثالث، فلا يستطيع المُحمِّل أدناه أن يعمل هناك. هذا حدّ من منصّة Webflow ينطبق على كل captcha قائم على سكربت، لا على Caputchin وحده. تستطيع التصميم بالأداة مجانًا؛ أما نشرها حيّة فيحتاج باقة مدفوعة.
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، أضف عنصر Embed (Add panel → Components → Embed) داخل الـ <form> الذي تريد حمايته، وضع الأداة فيه. استخدم مفتاح موقعك العام من لوحة التحكّم:
<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>العنصران غير متبادلين حين يشترِط مفتاح لعبة. إن كان لمفتاح موقع بوّابة لعبة مشغّلة (إعداد طلب لعبة للتحقّق خاصته)، فلا يستطيع <caputchin-widget> ذو خانة الاختيار المرور عليه ويرفع خطأ gate-unavailable؛ ولا يعمل هناك سوى <caputchin-game>. انظر بوّابة اللعبة.
3. أكّد الرمز
تُثبت الأداة أن إنسانًا اجتاز في المتصفّح؛ ومع ذلك تؤكّد أنت الرمز على الخادم قبل أن تثق بالإرسالية. اختر النمط الذي يناسب إعدادك.
خادمك الخلفي (مُوصى به إن كان لديك واحد)
افتح إعدادات النموذج في الـ Designer، واضبط Send to → Custom action، ووجّهه إلى نقطة نهايتك. يقرأ خادمك حقل caputchin-token ويؤكّده بـ /siteverify. انظر التكامل على جانب الخادم وانتقل من reCAPTCHA لنداء الخادم بالضبط.
التحقّق المُستضاف من Caputchin (بلا خادم خلفي)
إن كنت لا تشغّل خادمًا، فوجّه Custom action الخاص بالنموذج إلى رابط مُحوِّل التحقّق المُستضاف الذي تجده في لوحة التحكّم. يتحقّق Caputchin من الرمز ويسلّم الإرسالية إلى الـ webhook أو البريد لديك. هذه ميزة مدفوعة، وهي تحلّ محلّ صندوق الإرساليات الأصلي في Webflow (فالنموذج يرسل إلى Caputchin بدل Webflow). انظر التحقّق المُستضاف.
بوّابة العميل (رادع، لا تحقّق على الخادم)
اترك النموذج على معالج Webflow الأصلي واعتمد على trigger="form-submit" لمنع الإرسال حتى يُجتاز الفحص. هذا يرفع الحاجز أمام البوتات لكنه ليس ضمانًا متحقَّقًا منه على الخادم، فاستخدمه فقط حيث يكون ذلك مقبولًا.
يحتاج النمطان المتحقَّق منهما على الخادم (خادمك الخلفي، والتحقّق المُستضاف) إلى أن يرسل النموذج إلى Custom action، وهو ما يسمح به Webflow على باقة مدفوعة. والإبقاء على صندوق نماذج Webflow الأصلي يترك خيار بوّابة العميل وحده.