MyBB Community Forums

Full Version: Hide reCAPTCHA Invisible Badge
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
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]
Angel 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

More advanced & detailed tutorials @ Demonate.
Great, thats a must have for my board! Thank you!