MyBB Group
Hide reCAPTCHA Invisible badge - Printable Version

+- MyBB Group (https://mybb.group)
+-- Forum: Beside You (https://mybb.group/Forum-Beside-You)
+--- Forum: Guidebook (https://mybb.group/Forum-Guidebook)
+--- Thread: Hide reCAPTCHA Invisible badge (/Thread-Hide-reCAPTCHA-Invisible-badge)



Hide reCAPTCHA Invisible badge - effone - 14-05-2019

Have ever reCAPTCHA Invisible badge annoyed you? Specially when you are using a mobile device with a responsive theme and the badge slides out from the right hiding some of your important form control? Say, the form Submit button? - disgusting situation. 
[Image: F8oS0.png]
Well, let's hide it.

Wait! OMG! effone gone mad! Thats a straight breach of Google's TOS. 
Google reCAPTCHA v3 TOS Wrote:You agree to explicitly inform visitors to your site that you have implemented the Invisible reCAPTCHA on your site.

Well, well. Hang on. You can still hide it. Google now allows it under certain conditions (As per latest reCAPTCHA FAQ, 11 Dec, 2018 update).
https://developers.google.com/recaptcha/docs/faq

So, let's hide it. Super easy. Add this CSS at the end of your global.css:
.grecaptcha-badge {
    display: none;
}

Save stylesheet. Refresh!
Eh, the badge is still there sliding out. Because the container is not inline. You have to declare your badge to be inline in order to hide it.

Open template member_register_regimage_recaptcha_invisible and find this chunk:
grecaptcha.render(target.get(0), {
    'sitekey': '{$public_key}',
    'callback': captchaOnSubmit
}, true);

Change it to:
grecaptcha.render(target.get(0), {
    'sitekey': '{$public_key}',
    'callback': captchaOnSubmit,
    'badge' :'inline'
}, true);

Yes, the badge is gone!

Now, the most important part to remain legal:
You have to add this line to every page you are using reCAPTCHA in, if you are not sure - add it to footer template:
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.

Note:
  • This is demonstrated for registration page but is applicable to anywhere you are using reCAPTCHA.
  • Some additional requirement/s of Google Brand guidelines: "Don't mimic Google's typographic style. The writeup should blend your site's typography.
Done. Happy coding ... Big Grin