Comment masquer le badge Google Invisible reCAPTCHA

Question

Lorsque vous mettez en œuvre le nouveau reCATPTCHA invisible de Google, vous obtenez par défaut un petit badge "protégé par reCAPTCHA" en bas à droite de l'écran qui s'affiche lorsque vous passez dessus.

J'aimerais cacher ça.

Answer 1

Google permet désormais de masquer le badge, à partir de l'écran d'accueil. FAQ :

Je voudrais cacher le badge reCAPTCHA v3. Qu'est-ce qui est autorisé ?

You are allowed to hide the badge as long as you include the reCAPTCHA
branding visibly in the user flow. Please include the following text:

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.

Par exemple :

Vous pouvez donc simplement le masquer en utilisant le CSS suivant :

.grecaptcha-badge { 
    visibility: hidden;
}

Ne pas utiliser display: none; car cela semble désactiver la vérification du spam (merci @Zade)

Answer 2

J'ai testé toutes les approches et :

AVERTISSEMENT : display: none Désactive la vérification du spam !

visibility: hidden et opacity: 0 ne désactivez PAS la vérification du spam.

Code à utiliser :

.grecaptcha-badge { 
    visibility: hidden;
}

Lorsque vous masquez l'icône du badge, Google veut que vous référence leur service sur votre formulaire en ajoutant ceci :

<small>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.
</small>

Answer 3

Définissez le data-badge à l'attribut inline

<button type="submit" data-sitekey="your_site_key" data-callback="onSubmit" data-badge="inline" />

Et ajoutez le CSS suivant

.grecaptcha-badge {
    display: none;
}

Answer 4

Pour le reCaptcha v3 de Google, le FAQ dit :

Vous êtes autorisé à cacher le badge tant que vous incluez la marque reCAPTCHA de manière visible dans le flux d'utilisateurs. Veuillez inclure le texte suivant :

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.

Par exemple :

Note : si vous choisissez de cacher le badge, veuillez utiliser

.grecaptcha-badge { visibility: hidden; }

Il n'est pas clair si cela s'applique à reCaptcha v2. Je suggère de passer à la v3, car l'expérience est meilleure pour vos visiteurs.

Answer 5

Étant donné que le fait de cacher le badge n'est pas vraiment légal selon le TOU, et que les options de placement existantes ne respectaient pas mon interface utilisateur et/ou mon interface utilisateur, j'ai créé la personnalisation suivante qui imite le positionnement fixe, mais qui est rendu en ligne :

Il vous suffit d'appliquer quelques CSS sur le conteneur de votre badge :

.badge-container {
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
  width: 70px;
  height: 60px;
  margin: 0 auto;
  box-shadow: 0 0 4px #ddd;
  transition: linear 100ms width;
}
.badge-container:hover {
    width: 256px;
}

Je pense que l'on ne peut pas aller plus loin légalement.