javascript - Hvordan skjule Google Invisible reCAPTCHA-merket

Når du implementerer den nye Google Invisible reCAPTCHA, får du som standard et lite "beskyttet av reCAPTCHA"-merke nederst til høyre på skjermen som dukker opp når du holder musen over det.

Jeg vil gjerne skjule dette.

Svar #1

Google tillater nå å skjule merket, fra FAQ-en:

Jeg vil gjerne skjule reCAPTCHA-merket. Hva er tillatt?

Du har lov til å skjule merket så lenge du inkluderer reCAPTCHA-merket synlig i brukerflyten. Vennligst inkluder følgende tekst:

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.

For eksempel:

Så du kan enkelt skjule det ved å bruke følgende CSS :

.grecaptcha-badge { 
    visibility: hidden !important;
}

Ikke bruk display: none; da det ser ut til å deaktivere spamkontrollen (takk @Zade)

Svar #2

Jeg har testet alle tilnærmingene og:

ADVARSEL: display: none DEAKTIVERER spamkontrollen!

visibility: hidden og opacity: 0 deaktiverer IKKE spamkontrollen.

Kode å bruke:

.grecaptcha-badge { 
    visibility: hidden;
}

Når du skjuler merkesymbolet, vil Google at du refererer til tjenesten deres på skjemaet ditt ved å legge til dette:

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

Svar #3

Sett data-badge-attributtet til inline

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

Og legg til følgende CSS

.grecaptcha-badge {
    display: none;
}

Svar #4

For Google reCaptcha v3 sier FAQen:

Du har lov til å skjule merket så lenge du inkluderer reCAPTCHA-merket synlig i brukerflyten. Vennligst inkluder følgende tekst:

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.

For eksempel:

Merk: hvis du velger å skjule merket, vennligst bruk

.grecaptcha-badge { visibility: hidden; }

Det er ikke klart om det gjelder for reCaptcha v2. Jeg foreslår å oppgradere til v3 da det gir en bedre opplevelse for dine besøkende.

Svar #5

Siden det å skjule merket egentlig ikke er legitimt i henhold til TOU, og de eksisterende plasseringsalternativene ødela UI-en og/eller UX-en min, har jeg kommet opp med følgende tilpasning som etterligner fast posisjonering, men som i stedet gjengis inline:

Du trenger bare å bruke litt CSS på merkemaskinens beholder:

.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;
}

Jeg tror det er så langt du kan presse det juridisk sett.

Svar #6

Jeg bestemte meg for å skjule merket på alle sider bortsett fra kontaktsiden min (ved bruk av Wordpress):

/* Hides the reCAPTCHA on every page */
.grecaptcha-badge {
    visibility: hidden !important;
}

/* Shows the reCAPTCHA on the Contact page */
/* Obviously change the page number to your own */
.page-id-17 .grecaptcha-badge {
    visibility: visible !important;
}

Jeg er ikke en nettutvikler, så vær så snill å korrigere meg hvis det er noe som er feil.

REDIGER: Oppdatert til å bruke synlighet i stedet for visning.

Svar #7

Ja, du kan gjøre det. Du kan enten bruke css eller javascript for å skjule reCaptcha v3-badge.

  1. CSS-måten bruker display: none eller visibility: hidden for å skjule reCaptcha-batchen. Det er enkelt og raskt.
.grecaptcha-badge {
    display:none !important;
}
  1. Javascript-måten
var el = document.querySelector('.grecaptcha-badge');
el.style.display = 'none';

Å skjule merket er gyldig, i henhold til Google-policyen og besvart i FAQ her. Det anbefales å vise personvernregler og bruksvilkår fra Google som vist nedenfor.

Relaterte artikler