reCAPTCHA v3 Badge को बिना तोड़े कैसे छिपाएं

आप reCAPTCHA badge छिपा सकते हैं। Google इसकी अनुमति देता है। लेकिन एक पेच है जिसे ज़्यादातर tutorials छोड़ देते हैं: आपको इसे दृश्यमान attribution text से बदलना होगा, वरना आप reCAPTCHA Terms of Service का उल्लंघन कर रहे हैं। यह गाइड उस CSS को कवर करती है जो काम करता है, Google जो सटीक शब्द मांगता है, और बाद में यह पुष्टि करने का तरीका कि v3 अब भी आपके traffic को स्कोर कर रहा है।

badge आख़िर दिखता ही क्यों है

reCAPTCHA v3 में न कोई checkbox है और न कोई image puzzle। यह विज़िटर्स को चुपचाप background में score करता है। नीचे-दाएं कोने में वह floating badge ही एकमात्र संकेत है कि आपकी साइट इसे चला रही है, और यही इसका मकसद है। यह badge वह तरीका है जिससे Google आपके यूज़र्स को data collection के बारे में बताता है।

इसका निरीक्षण करें और आपको एक wrapper मिलेगा जो इन जैसी inline styles ले जाता है:

<div class="grecaptcha-badge" data-style="bottomright" style="
  width: 256px;
  height: 60px;
  position: fixed;
  visibility: visible;
  right: -186px;      /* collapsed, only the 70px logo sticks out */
  bottom: 14px;
  box-shadow: gray 0px 0px 5px;
  transition: right 0.3s ease 0s;
"></div>

वह right: -186px badge के बारे में बाकी किसी भी चीज़ से ज़्यादा लोगों को उलझाता है, और यह कोई bug नहीं है। badge 256px चौड़ा है, और Google इसका 186px हिस्सा off-screen पार्क कर देता है ताकि सिर्फ़ logo tile झांकता रहे। इस पर hover करें और एक transition इसे वापस स्लाइड कर देता है right: 0 पूरा पैनल दिखाने के लिए।

अहम बात यह है कि ये हैं इनलाइन styles। एक सादा right: -256px आपकी stylesheet में मौजूद नियम specificity की लड़ाई हार जाता है, यही वजह है कि badge को चुपचाप हटाने की इतनी सारी कोशिशें कुछ नहीं करतीं।

Google’s terms असल में क्या कहती हैं

Google का reCAPTCHA FAQ एक शर्त पर badge छिपाने की अनुमति देता है:

आपको बैज छिपाने की अनुमति है जब तक आप user flow में reCAPTCHA ब्रांडिंग को दृश्य रूप से शामिल करते हैं।

व्यवहार में: अगर badge छिपा है, तो हर उस पेज या form पर attribution दिखना चाहिए जहाँ reCAPTCHA चलता है। आपकी privacy policy में छिपाया हुआ नहीं। किसी collapsed footer accordion के अंदर नहीं। दिखने वाला, flow में, जहाँ उपयोगकर्ता असल में होता है।

जो sites attribution के बिना badge छिपाती हैं उनका site key disable होने का ख़तरा रहता है। यह एक असली enforcement तंत्र है, कोई काल्पनिक नहीं, इसलिए यह आपके तीस सेकंड के लायक़ है।

चरण 1: CSS के साथ badge छिपाएँ

उपयोग करें visibility: hidden, नहीं display: none। सेटिंग display: none element को पूरी तरह layout tree से बाहर खींच लेता है, और इसी से कुछ browser और script-load संयोजनों में reCAPTCHA script का बर्ताव बिगड़ा है। Visibility box को नापने योग्य रखते हुए उसे अदृश्य बना देता है।

/* Hide the reCAPTCHA v3 badge.
   Google's inline styles set visibility: visible, so !important
   is genuinely required here. */
.grecaptcha-badge {
    visibility: hidden !important;
}

अगर आप इसे केवल कुछ पेजों पर हटाना चाहते हैं, तो global जाने के बजाय इसे scope करें:

/* Only hide the badge on checkout and contact. */
body.page-checkout .grecaptcha-badge,
body.page-contact .grecaptcha-badge {
    visibility: hidden !important;
}

Step 2: attribution जोड़ें

इसे हर उस form पर submit button के ठीक नीचे डालें जो reCAPTCHA इस्तेमाल करता है। दोनों links ज़रूरी हैं। उनके बिना सादा text शर्त को पूरा नहीं करता।

<p class="recaptcha-terms">
  This site is protected by reCAPTCHA and the Google
  <a href="https://policies.google.com/privacy">Privacy Policy</a> and
  <a href="https://policies.google.com/terms">Terms of Service</a> apply.
</p>

छोटा प्रिंट ठीक है, लेकिन इसे पढ़ने योग्य रखें। शर्त यह है कि यह दृश्यमान हो, और grey background पर 8px grey text टिक नहीं पाएगा अगर कोई देखे:

.recaptcha-terms {
    font-size: 0.8rem;
    line-height: 1.4;
    color: #6b7280;
    margin-top: 0.75rem;
}

Step 3: जाँचें कि v3 अब भी चलता है

badge को छिपाने से token generation पर असर नहीं पड़ना चाहिए, पर उम्मीद करने के बजाय इसकी पुष्टि करें। अपने पेज पर console खोलें और हाथ से एक token माँगें:

// Paste into the browser console on your own page.
// A healthy v3 setup returns a long token starting with "03A".
grecaptcha.ready(function () {
    grecaptcha
        .execute("YOUR_SITEKEY", { action: "verify" })
        .then(function (token) {
            console.log("token length:", token.length);
            console.log(token.slice(0, 24) + "...");
        });
});

एक token वापस पाएं और आपकी CSS ने कुछ नहीं तोड़ा है। अगर यह throw करता है grecaptcha is not defined, reCAPTCHA script पहले तो कभी लोड ही नहीं हुआ और badge का इससे कोई लेना-देना नहीं था। आप हमारे किसी known-good सेटअप के साथ इसकी तुलना कर सकते हैं live reCAPTCHA v3 demo पेज.

जानने लायक एक चेतावनी: एक token यह साबित करता है कि script चली, न कि यह कि आपका score स्वस्थ है। badge छिपाने का scoring पर कोई असर नहीं पड़ता, लेकिन बहुत सी अन्य चीज़ों का पड़ता है। कम scores एक अलग समस्या है जिसका एक अलग समाधान है।

क्या नहीं करना है

दृष्टिकोण	यह क्यों फ़ेल होता है
display: none	element को layout से हटा देता है। browser और script-load के संयोजनों में असंगत व्यवहार का कारण बना है।
opacity: 0 बिना किसी एट्रिब्यूशन के	फिर भी terms का उल्लंघन। Invisible अदृश्य है, चाहे कोई भी property आपको वहां तक ले गई हो।
JavaScript के साथ node को हटाना	script इसे फिर से inject कर सकती है, और आपने बेवजह एक race condition जोड़ ली है।
attribution केवल privacy policy में	Google इसे user flow में स्पष्ट रूप से माँगता है, किसी page दूर दबा हुआ नहीं।
z-index: -1	badge को अन्य elements के पीछे अप्रत्याशित रूप से धकेल देता है। बिना background वाले पेजों पर यह फिर भी दिख सकता है।

अक्सर पूछे जाने वाले सवाल

क्या badge छिपाने से मेरा reCAPTCHA v3 score कम होता है?

नहीं। score उपयोगकर्ता के व्यवहार और browser signals से आता है, न कि इससे कि badge स्क्रीन पर है या नहीं। इसे छिपाने से इस बारे में कुछ नहीं बदलता कि एक request का मूल्यांकन कैसे होता है।

क्या मैं badge को छिपाने के बजाय हटा सकता हूँ?

हां, और अगर placement ही आपकी एकमात्र शिकायत है तो यह अधिक सुरक्षित विकल्प है। सेट करें data-badge="bottomleft" या data-badge="inline" आपके reCAPTCHA element पर। के साथ inline आप container को खुद पोज़िशन करते हैं, और चूंकि badge दृश्यमान रहता है इसलिए आपको attribution text की ज़रूरत नहीं होती।

क्या यह reCAPTCHA v2 पर लागू होता है?

केवल invisible v2 पर। v2 checkbox widget अपने आप में एक disclosure है, इसलिए निपटने के लिए कोई अलग badge नहीं होता। Invisible v2 वही floating badge दिखाता है जो v3 दिखाता है और वही नियम मानता है। हमारी गाइड reCAPTCHA क्या है और यह कैसे काम करता है संस्करणों के बीच के अंतर को कवर करता है।

क्या Google वास्तव में इसे लागू करेगा?

शर्तों के उल्लंघन के लिए site keys को अक्षम किया जा सकता है। कम-ट्रैफ़िक वाली साइटों के लिए यह असामान्य है, पर attribution snippet जोड़ने में आधा मिनट लगता है, इसलिए जोखिम उठाने की कोई असली वजह नहीं है।

सारांश

badge को इसके साथ छिपाएं visibility: hidden !important, अपने submit button के नीचे दोनों Google links के साथ attribution paragraph जोड़ें, फिर console में पुष्टि करें कि token generation अब भी काम करता है। यही पूरा compliant रास्ता है, और इसमें लगभग पाँच मिनट लगते हैं।

अगर आप reCAPTCHA v3 को सिर्फ़ styling करने के बजाय code में इस्तेमाल कर रहे हैं, तो CapSkip एक लोकल captcha सॉल्वर जो आपकी अपनी machine पर चलता है और उसी API के ज़रिए tokens लौटाता है जिसे आप पहले से इस्तेमाल करते हैं। हमारा reCAPTCHA v3 सॉल्वर page में integration का विवरण है।