How to Remove or Hide Google reCAPTCHA v3 Notification Icon from Your Website

Google reCAPTCHA v3 is a powerful tool to protect your website from spam and abuse. However, the small reCAPTCHA badge (notification icon) that appears on the bottom-right corner of your website can sometimes disrupt your design or user experience. If you’re looking to remove or hide this icon, you’ve come to the right place. In this tutorial, we’ll walk you through two simple methods to hide the Google reCAPTCHA v3 badge—using JavaScript and CSS.

Why Hide the Google reCAPTCHA v3 Badge?

The reCAPTCHA v3 badge is a mandatory element when using Google’s reCAPTCHA service. It informs users that your website is protected by reCAPTCHA. However, in some cases, the badge might clash with your website’s design or distract users. While you cannot completely remove the badge (as it violates Google’s terms of service), you can hide it visually without affecting its functionality.

Method 1: Hide reCAPTCHA Badge Using JavaScript

If you have access to your website’s JavaScript files, you can use the following script to hide the reCAPTCHA badge. This method ensures the badge is hidden as soon as it loads.

Here’s the JavaScript code:

function hideRecaptcha() {
    const recaptcha = $(".grecaptcha-badge");
    if (recaptcha.length) return recaptcha.css({ display: "none" });
    requestAnimationFrame(() => this.hideRecaptcha());
}

Steps to Implement:

1. Open your website’s JavaScript file or the section where you manage custom scripts.
2. Paste the above code into the file.
3. Save the changes and refresh your website.

The badge will now be hidden from view while still functioning in the background.

Method 2: Hide reCAPTCHA Badge Using CSS

If you don’t have access to JavaScript or prefer a simpler solution, you can use CSS to hide the reCAPTCHA badge. This method is beginner-friendly and works on most websites.

Here’s the CSS code:

body .grecaptcha-badge {
    visibility: hidden;
    pointer-events: none;
}

Steps to Implement:

1. For Non-WordPress Websites:
   • Open your website’s CSS file.
   • Paste the above code at the end of the file.
   • Save the changes and refresh your website.
2. For WordPress Websites:
   • Log in to your WordPress dashboard.
   • Go to Appearance > Customize > Additional CSS.
   • Paste the CSS code into the Additional CSS box.
   • Click Publish to save the changes.

The badge will now be hidden, and users won’t be able to interact with it.

Important Notes

• Compliance with Google’s Terms: While hiding the badge is technically allowed, you must still inform users that your website uses reCAPTCHA. Add a disclaimer in your privacy policy or terms of service to stay compliant.
• Functionality: Hiding the badge does not affect the functionality of reCAPTCHA v3. It will continue to work in the background to protect your website.

Conclusion

Hiding the Google reCAPTCHA v3 badge is a simple process that can improve your website’s aesthetics and user experience. Whether you use JavaScript or CSS, both methods are effective and easy to implement. Just remember to stay compliant with Google’s guidelines by informing users about the use of reCAPTCHA.

If you found this tutorial helpful, feel free to share it with others who might benefit from it. For more web design tips and tricks, visit ShashiDesign.com.