Hiding the Badge

Overview

When using invisible reCAPTCHA, a small badge appears on your page (typically in the bottom-right corner). While this badge is helpful for transparency, you may want to hide it for design or user experience reasons.

You must comply with Google’s terms of service when hiding the badge. This requires displaying specific legal text to users.

Why Hide the Badge?

Design consistency

The reCAPTCHA badge may not fit your site’s design aesthetic, especially on custom-styled forms or landing pages.

Mobile experience

On mobile devices, the badge can overlap with content or interfere with footer navigation.

Custom placement

You may want to display reCAPTCHA branding in a specific location rather than using the default badge position.

Google’s Policy

According to Google’s FAQ, you are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow.

This applies to invisible reCAPTCHA only. The normal and compact sizes cannot have their badge hidden as the widget itself serves as the branding.

How to Hide the Badge

Add the following CSS to your stylesheet:

.grecaptcha-badge {
  visibility: hidden;
}

CSS File
Styled Components
CSS-in-JS

/* styles.css */
.grecaptcha-badge {
  visibility: hidden;
}

import styled, { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  .grecaptcha-badge {
    visibility: hidden;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle />
      {/* Your app components */}
    </>
  );
}

import { Global, css } from '@emotion/react';

function App() {
  return (
    <>
      <Global
        styles={css`
          .grecaptcha-badge {
            visibility: hidden;
          }
        `}
      />
      {/* Your app components */}
    </>
  );
}

Use visibility: hidden instead of display: none to ensure the badge remains in the DOM and doesn’t break reCAPTCHA functionality.

Required Legal Text

When you hide the badge, you must include the following text somewhere visible in your user flow:

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.

Implementation Examples

Below Form
In Footer
As Small Text

import React from "react";
import ReCAPTCHA from "react-google-recaptcha";

function LoginForm() {
  const recaptchaRef = React.useRef();

  const handleSubmit = async (e) => {
    e.preventDefault();
    const token = await recaptchaRef.current.executeAsync();
    // Submit form
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="email" placeholder="Email" required />
        <input type="password" placeholder="Password" required />
        
        <ReCAPTCHA
          ref={recaptchaRef}
          size="invisible"
          sitekey="Your client site key"
        />
        
        <button type="submit">Login</button>
      </form>
      
      <p className="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>
    </div>
  );
}

function Footer() {
  return (
    <footer>
      <div className="footer-content">
        <p>&copy; 2024 Your Company</p>
        <p className="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>
      </div>
    </footer>
  );
}

<div className="form-container">
  <form onSubmit={handleSubmit}>
    {/* Form fields */}
    <button type="submit">Submit</button>
  </form>
  
  <p style={{ 
    fontSize: '12px', 
    color: '#666', 
    marginTop: '10px',
    textAlign: 'center' 
  }}>
    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>
</div>

Complete Example

Here’s a complete example with hidden badge and proper legal text:

import React from "react";
import ReCAPTCHA from "react-google-recaptcha";
import "./styles.css"; // Contains .grecaptcha-badge { visibility: hidden; }

function SignupForm() {
  const recaptchaRef = React.useRef();
  const [loading, setLoading] = React.useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);

    try {
      // Execute invisible reCAPTCHA
      const token = await recaptchaRef.current.executeAsync();
      
      // Submit form data
      const response = await fetch('/api/signup', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          email: e.target.email.value,
          password: e.target.password.value,
          recaptchaToken: token
        })
      });

      if (response.ok) {
        console.log("Signup successful");
      }
    } catch (error) {
      console.error("Error:", error);
    } finally {
      setLoading(false);
      recaptchaRef.current.reset();
    }
  };

  return (
    <div className="signup-container">
      <h2>Create Account</h2>
      
      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <label>Email</label>
          <input type="email" name="email" required />
        </div>
        
        <div className="form-group">
          <label>Password</label>
          <input type="password" name="password" required />
        </div>
        
        <ReCAPTCHA
          ref={recaptchaRef}
          size="invisible"
          sitekey="Your client site key"
        />
        
        <button type="submit" disabled={loading}>
          {loading ? "Creating Account..." : "Sign Up"}
        </button>
      </form>
      
      <p className="recaptcha-notice">
        This site is protected by reCAPTCHA and the Google{" "}
        <a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer">
          Privacy Policy
        </a>{" "}
        and{" "}
        <a href="https://policies.google.com/terms" target="_blank" rel="noopener noreferrer">
          Terms of Service
        </a>{" "}
        apply.
      </p>
    </div>
  );
}

export default SignupForm;

/* styles.css */
.grecaptcha-badge {
  visibility: hidden;
}

.signup-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  width: 100%;
  padding: 12px;
  background-color: #4285f4;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.recaptcha-notice {
  margin-top: 15px;
  font-size: 12px;
  color: #666;
  text-align: center;
  line-height: 1.5;
}

.recaptcha-notice a {
  color: #4285f4;
  text-decoration: none;
}

.recaptcha-notice a:hover {
  text-decoration: underline;
}

Placement Best Practices

Near the submit button: Place the legal text close to where users interact with the form so it’s visible when they submit.

Consistent across pages: If you use invisible reCAPTCHA on multiple pages, ensure the legal text appears consistently in the same location.

Readable size: While the text can be smaller than body text, ensure it’s still readable (at least 10-12px).

Common Mistakes to Avoid

Using display: none: This can break reCAPTCHA functionality. Always use visibility: hidden instead.

Forgetting the legal text: You must include the required text when hiding the badge, or you’ll violate Google’s terms of service.

Hiding text in accordion/modal: The legal text must be visible by default, not hidden behind a click or hover interaction.

Incorrect link URLs: Make sure to use the exact URLs specified by Google for the Privacy Policy and Terms of Service.

Accessibility Considerations

Ensure the legal text links are keyboard accessible and have sufficient color contrast for users with visual impairments.

<p className="recaptcha-notice">
  This site is protected by reCAPTCHA and the Google{" "}
  <a 
    href="https://policies.google.com/privacy"
    target="_blank"
    rel="noopener noreferrer"
    aria-label="Google Privacy Policy (opens in new tab)"
  >
    Privacy Policy
  </a>{" "}
  and{" "}
  <a 
    href="https://policies.google.com/terms"
    target="_blank"
    rel="noopener noreferrer"
    aria-label="Google Terms of Service (opens in new tab)"
  >
    Terms of Service
  </a>{" "}
  apply.
</p>

Summary

To hide the reCAPTCHA badge:

Add visibility: hidden to .grecaptcha-badge in your CSS
Include the required legal text with links to Google’s Privacy Policy and Terms of Service
Ensure the text is visible in the user flow
Test that reCAPTCHA still functions correctly

Get Started

Guides

API Reference

Resources

Overview

Why Hide the Badge?

Google’s Policy

How to Hide the Badge

Required Legal Text

Implementation Examples

Complete Example

Placement Best Practices

Common Mistakes to Avoid

Accessibility Considerations

Summary

Build docs developers (and LLMs) love

Get Started

Guides

API Reference

Resources

​Overview

​Why Hide the Badge?

​Google’s Policy

​How to Hide the Badge

​Required Legal Text

​Implementation Examples

​Complete Example

​Placement Best Practices

​Common Mistakes to Avoid

​Accessibility Considerations

​Summary

Build docs developers (and LLMs) love

Overview

Why Hide the Badge?

Google’s Policy

How to Hide the Badge

Required Legal Text

Implementation Examples

Complete Example

Placement Best Practices

Common Mistakes to Avoid

Accessibility Considerations

Summary