Captcha invisible

Introduction

Vous pouvez bénéficier de tous les avantages de hCaptcha en matière de blocage de bots sans avoir à afficher explicitement notre widget de case à cocher. Les interactions avec le client hCaptcha/server se déroulent en arrière-plan, et l'utilisateur ne sera confronté à un défi hCaptcha que s'il remplit les conditions requises.

Invisible vs. Passif

hCaptcha prend en charge les modes invisible et passif, qui peuvent être combinés pour une expérience utilisateur optimale.

« Invisible » signifie qu'aucune case à cocher n'est utilisée. Par exemple, cliquer sur « Envoyer » dans un formulaire pour déclencher la génération d'un jeton hCaptcha peut utiliser le mode « invisible » en configurant cette option comme décrit ci-dessous. Cette option est accessible à tous les utilisateurs.
Le mode « Passif » signifie que, même si la case à cocher est affichée, aucun défi visuel n'est présenté ; autrement dit, seuls des mécanismes passifs de vérification d'humanité sont utilisés. Ce mode est défini par le niveau de difficulté de la clé de site. Il nécessite la consultation du score de risque hCaptcha et est réservé aux utilisateurs Entreprise.

Les utilisateurs de Enterprise peuvent combiner la configuration « Invisible » (sans case à cocher) avec le niveau de difficulté « Passif » afin d'éviter toute interruption. Cependant, il convient de noter que cette option réduit le niveau de protection par rapport à nos modes de défi actifs.

Mode « 99,9 % passif »

Pour les utilisateurs Pro et Enterprise, un mode hybride supplémentaire est disponible :

Le mode « Passif à 99,9 % » soumet les utilisateurs à des tests sélectifs, basés sur une évaluation prenant en compte des milliers de facteurs. L’objectif est de limiter les tests à moins de 0,1 % des utilisateurs, tout en augmentant considérablement le coût d’une attaque.

remarque

Pour vous assurer de votre conformité avec les lois sur la protection de la vie privée en ligne entrant en vigueur dans le monde entier, veuillez inclure le texte et les liens suivants sur la page qui contient un hCaptcha invisible :

This site is protected by hCaptcha and its
<a href="https://www.hcaptcha.com/privacy">Privacy Policy</a> and
<a href="https://www.hcaptcha.com/terms">Terms of Service</a> apply.

Vous pouvez également intégrer à votre politique de confidentialité une mention similaire à celle de here. Veuillez noter que ceci ne constitue pas un avis juridique et que vous devriez consulter un avocat dans les juridictions où vous exercez vos activités si vous avez d'autres questions concernant votre cas d'utilisation spécifique.

Associer automatiquement le défi à un bouton

La méthode la plus simple consiste à attribuer la classe .h-captcha à un élément button ou input. Comme précédemment, vous devez ajouter votre clé de site dans un attribut data-sitekey associé à l'élément <button>. De plus, tous les attributs data-* sont applicables ici.

<button class="h-captcha" data-sitekey="your_site_key" data-callback="onSubmit">
  Submit
</button>

Comme précédemment, le jeton response-token sera envoyé à la fonction de rappel une fois le test hCaptcha réussi. Si vous avez associé le hCaptcha invisible à un bouton d'envoi, vous devez spécifier un jeton data-callback pour gérer la soumission du formulaire. Dans la plupart des cas, il est préférable d'utiliser la fonction de rappel pour soumettre manuellement le formulaire.

<script type="text/javascript">
  function onSubmit(token) {
    document.getElementById('my-form').submit();
  }
</script>

Associez le défi à un bouton ou lancez-le par programmation.

Cela fonctionne exactement comme le rendu explicite du jeton hCaptcha widget described here. La seule différence est que si le jeton data-size="invisible" est présent, le widget sera rendu en arrière-plan et ne s'affichera que lorsqu'un défi sera requis.

Invoquer le défi par programmation

Si vous préférez déclencher le flux de travail hCaptcha via un déclencheur JavaScript (dans des cas comme un clic sur une case à cocher ou un chargement de page), vous devrez utiliser la fonction hcaptcha.execute(widgetID) pour déclencher ce processus sur un widgetID donné.

Pour plus d'informations sur la fonction hcaptcha.execute et l'argument widgetID, vous pouvez consulter la documentation relative à JavaScript API section of the configuration page.

Exemple

Démarrez le processus hCaptcha dans le conteneur div défini, avec un déclencheur onclick sur le bouton

<html>
  <head>
    <script>
      function onSubmit(token) {
        alert('thanks ' + document.getElementById('field').value);
      }

      function validate(event) {
        event.preventDefault();

        if (!document.getElementById('field').value) {
          alert('You must add text to the required field');
        } else {
          hcaptcha.execute();
        }
      }

      function onLoad() {
        var element = document.getElementById('submit');

        element.onclick = validate;
      }
    </script>
    <script src="https://js.hcaptcha.com/1/api.js?onload=onLoad" async defer></script>
  </head>
  <body>
    <form>
      Name: (required) <input id="field" name="field" />
      <div
        id="hcaptcha"
        class="h-captcha"
        data-sitekey="your_site_key"
        data-callback="onSubmit"
        data-size="invisible"
      ></div>
      <button id="submit">submit</button>
    </form>
  </body>
</html>

Exemple de badge flottant

Si vous n'avez pas opté pour l'option de texte simple ci-dessus, vous pouvez préférer utiliser un badge flottant afin de permettre aux utilisateurs d'accéder aux liens vers les conditions d'utilisation et la politique de confidentialité.

Voici un exemple simple de ceci (demo):

<!DOCTYPE html>
<html>
<head>
  <title>hCaptcha Floating Overlay Image Example</title>
  <style>
    .hcaptcha-overlay-badge {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 9999;
      cursor: pointer;
    }

    .hcaptcha-overlay-badge img {
      width: 60px;
      height: auto;
    }

    .hcaptcha-overlay-popup {
      display: none;
      position: fixed;
      bottom: 80px;
      right: 20px;
      background-color: #fff;
      border: 1px solid #ccc;
      padding: 10px;
      width: 300px;
      z-index: 9998;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    }


    .content {
        padding: 10%;
    }
  </style>
</head>
<body>

  <div class="hcaptcha-overlay-badge">
    <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIzLjAuMiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0ODIuMyA0ODIuMyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDgyLjMgNDgyLjM7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7b3BhY2l0eTowLjU7ZmlsbDojMTA3NEJDO2VuYWJsZS1iYWNrZ3JvdW5kOm5ldyAgICA7fQoJLnN0MXtvcGFjaXR5OjAuNztmaWxsOiMxMDc0QkM7ZW5hYmxlLWJhY2tncm91bmQ6bmV3ICAgIDt9Cgkuc3Qye29wYWNpdHk6MC43O2ZpbGw6IzBDODJCRjtlbmFibGUtYmFja2dyb3VuZDpuZXcgICAgO30KCS5zdDN7b3BhY2l0eTowLjg7ZmlsbDojMEM4MkJGO2VuYWJsZS1iYWNrZ3JvdW5kOm5ldyAgICA7fQoJLnN0NHtmaWxsOiMwQzgyQkY7fQoJLnN0NXtvcGFjaXR5OjAuNTtmaWxsOiMwNDhGQkY7ZW5hYmxlLWJhY2tncm91bmQ6bmV3ICAgIDt9Cgkuc3Q2e29wYWNpdHk6MC44O2ZpbGw6IzA0OEZCRjtlbmFibGUtYmFja2dyb3VuZDpuZXcgICAgO30KCS5zdDd7ZmlsbDojMDQ4RkJGO30KCS5zdDh7b3BhY2l0eTowLjc7ZmlsbDojMDE5RUMwO2VuYWJsZS1iYWNrZ3JvdW5kOm5ldyAgICA7fQoJLnN0OXtmaWxsOiMwMTlFQzA7fQoJLnN0MTB7b3BhY2l0eTowLjc7ZmlsbDojMDBBQkJGO2VuYWJsZS1iYWNrZ3JvdW5kOm5ldyAgICA7fQoJLnN0MTF7ZmlsbDojMDBBQkJGO30KCS5zdDEye29wYWNpdHk6MC41O2ZpbGw6IzAyQjhCRTtlbmFibGUtYmFja2dyb3VuZDpuZXcgICAgO30KCS5zdDEze29wYWNpdHk6MC44O2ZpbGw6IzAyQjhCRTtlbmFibGUtYmFja2dyb3VuZDpuZXcgICAgO30KCS5zdDE0e2ZpbGw6IzAyQjhCRTt9Cgkuc3QxNXtvcGFjaXR5OjAuNztmaWxsOiMzMUJEQkE7ZW5hYmxlLWJhY2tncm91bmQ6bmV3ICAgIDt9Cgkuc3QxNntvcGFjaXR5OjAuODtmaWxsOiMzMUJEQkE7ZW5hYmxlLWJhY2tncm91bmQ6bmV3ICAgIDt9Cgkuc3QxN3tmaWxsOiMzMUJEQkE7fQoJLnN0MTh7b3BhY2l0eTowLjU7ZmlsbDojNDdDMEI0O2VuYWJsZS1iYWNrZ3JvdW5kOm5ldyAgICA7fQoJLnN0MTl7b3BhY2l0eTowLjc7ZmlsbDojNDdDMEI0O2VuYWJsZS1iYWNrZ3JvdW5kOm5ldyAgICA7fQoJLnN0MjB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHJlY3QgeD0iMzAxLjUiIHk9IjQyMiIgY2xhc3M9InN0MCIgd2lkdGg9IjYwLjMiIGhlaWdodD0iNjAuMyIvPgo8cmVjdCB4PSIyNDEuMiIgeT0iNDIyIiBjbGFzcz0ic3QxIiB3aWR0aD0iNjAuMyIgaGVpZ2h0PSI2MC4zIi8+CjxyZWN0IHg9IjE4MC45IiB5PSI0MjIiIGNsYXNzPSJzdDEiIHdpZHRoPSI2MC4zIiBoZWlnaHQ9IjYwLjMiLz4KPHJlY3QgeD0iMTIwLjYiIHk9IjQyMiIgY2xhc3M9InN0MCIgd2lkdGg9IjYwLjMiIGhlaWdodD0iNjAuMyIvPgo8cmVjdCB4PSIzNjEuOCIgeT0iMzYxLjgiIGNsYXNzPSJzdDIiIHdpZHRoPSI2MC4zIiBoZWlnaHQ9IjYwLjMiLz4KPHJlY3QgeD0iMzAxLjUiIHk9IjM2MS44IiBjbGFzcz0ic3QzIiB3aWR0aD0iNjAuMyIgaGVpZ2h0PSI2MC4zIi8+CjxyZWN0IHg9IjI0MS4yIiB5PSIzNjEuOCIgY2xhc3M9InN0NCIgd2lkdGg9IjYwLjMiIGhlaWdodD0iNjAuMyIvPgo8cmVjdCB4PSIxODAuOSIgeT0iMzYxLjgiIGNsYXNzPSJzdDQiIHdpZHRoPSI2MC4zIiBoZWlnaHQ9IjYwLjMiLz4KPHJlY3QgeD0iMTIwLjYiIHk9IjM2MS44IiBjbGFzcz0ic3QzIiB3aWR0aD0iNjAuMyIgaGVpZ2h0PSI2MC4zIi8+CjxyZWN0IHg9IjYwLjMiIHk9IjM2MS44IiBjbGFzcz0ic3QyIiB3aWR0aD0iNjAuMyIgaGVpZ2h0PSI2MC4zIi8+CjxyZWN0IHg9IjQyMiIgeT0iMzAxLjUiIGNsYXNzPSJzdDUiIHdpZHRoPSI2MC4zIiBoZWlnaHQ9IjYwLjMiLz4KPHJlY3QgeD0iMzYxLjgiIHk9IjMwMS41IiBjbGFzcz0ic3Q2IiB3aWR0aD0iNjAuMyIgaGVpZ2h0PSI2MC4zIi8+CjxyZWN0IHg9IjMwMS41IiB5PSIzMDEuNSIgY2xhc3M9InN0NyIgd2lkdGg9IjYwLjMiIGhlaWdodD0iNjAuMyIvPgo8cmVjdCB4PSIyNDEuMiIgeT0iMzAxLjUiIGNsYXNzPSJzdDciIHdpZHRoPSI2MC4zIiBoZWlnaHQ9IjYwLjMiLz4KPHJlY3QgeD0iMTgwLjkiIHk9IjMwMS41IiBjbGFzcz0ic3Q3IiB3aWR0aD0iNjAuMyIgaGVpZ2h0PSI2MC4zIi8+CjxyZWN0IHg9IjEyMC42IiB5PSIzMDEuNSIgY2xhc3M9InN0NyIgd2lkdGg9IjYwLjMiIGhlaWdodD0iNjAuMyIvPgo8cmVjdCB4PSI2MC4zIiB5PSIzMDEuNSIgY2xhc3M9InN0NiIgd2lkdGg9IjYwLjMiIGhlaWdodD0iNjAuMyIvPgo8cmVjdCB5PSIzMDEuNSIgY2xhc3M9InN0NSIgd2lkdGg9IjYwLjMiIGhlaWdodD0iNjAuMyIvPgo8cmVjdCB4PSI0MjIiIHk9IjI0MS4yIiBjbGFzcz0ic3Q4IiB3aWR0aD0iNjAuMyIgaGVpZ2h0PSI2MC4zIi8+CjxyZWN0IHg9IjM2MS44IiB5PSIyNDEuMiIgY2xhc3M9InN0OSIgd2lkdGg9IjYwLjMiIGhlaWdodD0iNjAuMyIvPgo8cmVjdCB4PSIzMDEuNSIgeT0iMjQxLjIiIGNsYXNzPSJzdDkiIHdpZHRoPSI2MC4zIiBoZWlnaHQ9IjYwLjMiLz4KPHJlY3QgeD0iMjQxLjIiIHk9IjI0MS4yIiBjbGFzcz0ic3Q5IiB3aWR0aD0iNjAuMyIgaGVpZ2h0PSI2MC4zIi8+CjxyZWN0IHg9IjE4MC45IiB5PSIyNDEuMiIgY2xhc3M9InN0OSIgd2lkdGg9IjYwLjMiIGhlaWdodD0iNjAuMyIvPgo8cmVjdCB4PSIxMjAuNiIgeT0iMjQxLjIiIGNsYXNzPSJzdDkiIHdpZHRoPSI2MC4zIiBoZWlnaHQ9IjYwLjMiLz4KPHJlY3QgeD0iNjAuMyIgeT0iMjQxLjIiIGNsYXNzPSJzdDkiIHdpZHRoPSI2MC4zIiBoZWlnaHQ9IjYwLjMiLz4KPHJlY3QgeT0iMjQxLjIiIGNsYXNzPSJzdDgiIHdpZHRoPSI2MC4zIiBoZWlnaHQ9IjYwLjMiLz4KPHJlY3QgeD0iNDIyIiB5PSIxODAuOSIgY2xhc3M9InN0MTAiIHdpZHRoPSI2MC4zIiBoZWlnaHQ9IjYwLjMiLz4KPHJlY3QgeD0iMzYxLjgiIHk9IjE4MC45IiBjbGFzcz0ic3QxMSIgd2lkdGg9IjYwLjMiIGhlaWdodD0iNjAuMyIvPgo8cmVjdCB4PSIzMDEuNSIgeT0iMTgwLjkiIGNsYXNzPSJzdDExIiB3aWR0aD0iNjAuMyIgaGVpZ2h0PSI2MC4zIi8+CjxyZWN0IHg9IjI0MS4yIiB5PSIxODAuOSIgY2xhc3M9InN0MTEiIHdpZHRoPSI2MC4zIiBoZWlnaHQ9IjYwLjMiLz4KPHJlY3QgeD0iMTgwLjkiIHk9IjE4MC45IiBjbGFzcz0ic3QxMSIgd2lkdGg9IjYwLjMiIGhlaWdodD0iNjAuMyIvPgo8cmVjdCB4PSIxMjAuNiIgeT0iMTgwLjkiIGNsYXNzPSJzdDExIiB3aWR0aD0iNjAuMyIgaGVpZ2h0PSI2MC4zIi8+CjxyZWN0IHg9IjYwLjMiIHk9IjE4MC45IiBjbGFzcz0ic3QxMSIgd2lkdGg9IjYwLjMiIGhlaWdodD0iNjAuMyIvPgo8cmVjdCB5PSIxODAuOSIgY2xhc3M9InN0MTAiIHdpZHRoPSI2MC4zIiBoZWlnaHQ9IjYwLjMiLz4KPHJlY3QgeD0iNDIyIiB5PSIxMjAuNiIgY2xhc3M9InN0MTIiIHdpZHRoPSI2MC4zIiBoZWlnaHQ9IjYwLjMiLz4KPHJlY3QgeD0iMzYxLjgiIHk9IjEyMC42IiBjbGFzcz0ic3QxMyIgd2lkdGg9IjYwLjMiIGhlaWdodD0iNjAuMyIvPgo8cmVjdCB4PSIzMDEuNSIgeT0iMTIwLjYiIGNsYXNzPSJzdDE0IiB3aWR0aD0iNjAuMyIgaGVpZ2h0PSI2MC4zIi8+CjxyZWN0IHg9IjI0MS4yIiB5PSIxMjAuNiIgY2xhc3M9InN0MTQiIHdpZHRoPSI2MC4zIiBoZWlnaHQ9IjYwLjMiLz4KPHJlY3QgeD0iMTgwLjkiIHk9IjEyMC42IiBjbGFzcz0ic3QxNCIgd2lkdGg9IjYwLjMiIGhlaWdodD0iNjAuMyIvPgo8cmVjdCB4PSIxMjAuNiIgeT0iMTIwLjYiIGNsYXNzPSJzdDE0IiB3aWR0aD0iNjAuMyIgaGVpZ2h0PSI2MC4zIi8+CjxyZWN0IHg9IjYwLjMiIHk9IjEyMC42IiBjbGFzcz0ic3QxMyIgd2lkdGg9IjYwLjMiIGhlaWdodD0iNjAuMyIvPgo8cmVjdCB5PSIxMjAuNiIgY2xhc3M9InN0MTIiIHdpZHRoPSI2MC4zIiBoZWlnaHQ9IjYwLjMiLz4KPHJlY3QgeD0iMzYxLjgiIHk9IjYwLjMiIGNsYXNzPSJzdDE1IiB3aWR0aD0iNjAuMyIgaGVpZ2h0PSI2MC4zIi8+CjxyZWN0IHg9IjMwMS41IiB5PSI2MC4zIiBjbGFzcz0ic3QxNiIgd2lkdGg9IjYwLjMiIGhlaWdodD0iNjAuMyIvPgo8cmVjdCB4PSIyNDEuMiIgeT0iNjAuMyIgY2xhc3M9InN0MTciIHdpZHRoPSI2MC4zIiBoZWlnaHQ9IjYwLjMiLz4KPHJlY3QgeD0iMTgwLjkiIHk9IjYwLjMiIGNsYXNzPSJzdDE3IiB3aWR0aD0iNjAuMyIgaGVpZ2h0PSI2MC4zIi8+CjxyZWN0IHg9IjEyMC42IiB5PSI2MC4zIiBjbGFzcz0ic3QxNiIgd2lkdGg9IjYwLjMiIGhlaWdodD0iNjAuMyIvPgo8cmVjdCB4PSI2MC4zIiB5PSI2MC4zIiBjbGFzcz0ic3QxNSIgd2lkdGg9IjYwLjMiIGhlaWdodD0iNjAuMyIvPgo8cmVjdCB4PSIzMDEuNSIgY2xhc3M9InN0MTgiIHdpZHRoPSI2MC4zIiBoZWlnaHQ9IjYwLjMiLz4KPHJlY3QgeD0iMjQxLjIiIGNsYXNzPSJzdDE5IiB3aWR0aD0iNjAuMyIgaGVpZ2h0PSI2MC4zIi8+CjxyZWN0IHg9IjE4MC45IiBjbGFzcz0ic3QxOSIgd2lkdGg9IjYwLjMiIGhlaWdodD0iNjAuMyIvPgo8cmVjdCB4PSIxMjAuNiIgY2xhc3M9InN0MTgiIHdpZHRoPSI2MC4zIiBoZWlnaHQ9IjYwLjMiLz4KPHBhdGggY2xhc3M9InN0MjAiIGQ9Ik0xNTguOCwyMjIuMWwxNi44LTM3LjZjNi4xLTkuNiw1LjMtMjEuNC0xLjQtMjguMWMtMC45LTAuOS0xLjktMS43LTIuOS0yLjRjLTQuNy0yLjktMTAuMy0zLjUtMTUuNS0xLjgKCWMtNS44LDEuOC0xMC44LDUuNy0xNCwxMC44YzAsMC0yMyw1My43LTMxLjYsNzcuOFMxMDUsMzA5LjIsMTM4LDM0Mi4zYzM1LDM1LDg1LjcsNDMsMTE4LDE4LjdjMS40LTAuNywyLjYtMS41LDMuOC0yLjVsOTkuNi04My4yCgljNC44LTQsMTItMTIuMiw1LjYtMjEuNmMtNi4zLTkuMi0xOC4xLTIuOS0yMywwLjJsLTU3LjMsNDEuN2MtMS4xLDAuOS0yLjcsMC44LTMuNi0wLjNjMCwwLDAtMC4xLTAuMS0wLjFjLTEuNS0xLjgtMS43LTYuNSwwLjYtOC40CglsODcuOS03NC42YzcuNi02LjgsOC42LTE2LjgsMi41LTIzLjZjLTYtNi43LTE1LjUtNi41LTIzLjIsMC40bC03OS4xLDYxLjljLTEuNSwxLjItMy43LDEtNC45LTAuNWMwLTAuMS0wLjEtMC4xLTAuMS0wLjIKCWMtMS42LTEuOC0yLjItNC43LTAuNC02LjVsODkuNi04Ni45YzcuMS02LjYsNy41LTE3LjcsMC45LTI0LjdjLTMuMi0zLjMtNy42LTUuMi0xMi4yLTUuMmMtNC43LTAuMS05LjIsMS43LTEyLjYsNWwtOTEuNiw4NgoJYy0yLjIsMi4yLTYuNSwwLTctMi42Yy0wLjItMC45LDAuMS0xLjksMC44LTIuNmw3MC4xLTc5LjhjNy02LjUsNy40LTE3LjQsMC45LTI0LjRzLTE3LjQtNy40LTI0LjQtMC45Yy0wLjMsMC4zLTAuNiwwLjUtMC44LDAuOAoJTDE3MS41LDIyNS45Yy0zLjgsMy44LTkuNCw0LTEyLjEsMS44QzE1Ny43LDIyNi40LDE1Ny40LDIyMy45LDE1OC44LDIyMi4xeiIvPgo8L3N2Zz4K" alt="Protected by hCaptcha">
  </div>
  <div class="hcaptcha-overlay-popup">
    This site is protected by hCaptcha and its
    <a href="https://www.hcaptcha.com/privacy">Privacy Policy</a> and
    <a href="https://www.hcaptcha.com/terms">Terms of Service</a> apply.
  </div>

  <!-- Rest of your page content -->

  <div class="content">
      <h1>Floating Overlay Image Example</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, sapien sit amet aliquam lacinia, quam odio rhoncus nisi, nec malesuada velit velit id velit. Sed auctor, est eget malesuada luctus, risus nulla ullamcorper tellus, id consectetur tellus elit in tellus. Donec aliquet, sapien eget eleifend consectetur, sapien metus aliquam sapien, eget bibendum velit odio vel sapien. Sed euismod, sapien eget malesuada aliquam, sapien sapien aliquam sapien, eget aliquam sapien sapien eget sapien. Nulla facilisi. Sed euismod, sapien eget malesuada aliquam, sapien sapien aliquam sapien, eget aliquam sapien sapien eget sapien. Nulla facilisi.</p>
      <p>Sed euismod, sapien eget malesuada aliquam, sapien sapien aliquam sapien, eget aliquam sapien sapien eget sapien. Nulla facilisi. Sed euismod, sapien eget malesuada aliquam, sapien sapien aliquam sapien, eget aliquam sapien sapien eget sapien. Nulla facilisi. Sed euismod, sapien eget malesuada aliquam, sapien sapien aliquam sapien, eget aliquam sapien sapien eget sapien. Nulla facilisi.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, sapien sit amet aliquam lacinia, quam odio rhoncus nisi, nec malesuada velit velit id velit. Sed auctor, est eget malesuada luctus, risus nulla ullamcorper tellus, id consectetur tellus elit in tellus. Donec aliquet, sapien eget eleifend consectetur, sapien metus aliquam sapien, eget bibendum velit odio vel sapien. Sed euismod, sapien eget malesuada aliquam, sapien sapien aliquam sapien, eget aliquam sapien sapien eget sapien. Nulla facilisi. Sed euismod, sapien eget malesuada aliquam, sapien sapien aliquam sapien, eget aliquam sapien sapien eget sapien. Nulla facilisi.</p>
      <p>Sed euismod, sapien eget malesuada aliquam, sapien sapien aliquam sapien, eget aliquam sapien sapien eget sapien. Nulla facilisi. Sed euismod, sapien eget malesuada aliquam, sapien sapien aliquam sapien, eget aliquam sapien sapien eget sapien. Nulla facilisi. Sed euismod, sapien eget malesuada aliquam, sapien sapien aliquam sapien, eget aliquam sapien sapien eget sapien. Nulla facilisi.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod, sapien sit amet aliquam lacinia, quam odio rhoncus nisi, nec malesuada velit velit id velit. Sed auctor, est eget malesuada luctus, risus nulla ullamcorper tellus, id consectetur tellus elit in tellus. Donec aliquet, sapien eget eleifend consectetur, sapien metus aliquam sapien, eget bibendum velit odio vel sapien. Sed euismod, sapien eget malesuada aliquam, sapien sapien aliquam sapien, eget aliquam sapien sapien eget sapien. Nulla facilisi. Sed euismod, sapien eget malesuada aliquam, sapien sapien aliquam sapien, eget aliquam sapien sapien eget sapien. Nulla facilisi.</p>
      <p>Sed euismod, sapien eget malesuada aliquam, sapien sapien aliquam sapien, eget aliquam sapien sapien eget sapien. Nulla facilisi. Sed euismod, sapien eget malesuada aliquam, sapien sapien aliquam sapien, eget aliquam sapien sapien eget sapien. Nulla facilisi. Sed euismod, sapien eget malesuada aliquam, sapien sapien aliquam sapien, eget aliquam sapien sapien eget sapien. Nulla facilisi.</p>
      <!-- Repeat the paragraphs multiple times for scrollable content -->
  </div>


    <script>
        // let hCaptcha badge text appear for 3s on hover or tap
        const overlayBadge = document.querySelector('.hcaptcha-overlay-badge');
        const overlayPopup = document.querySelector('.hcaptcha-overlay-popup');
        let timeoutId;

        function debounce(func, delay) {
            return function() {
                const context = this;
                const args = arguments;
                clearTimeout(timeoutId);
                timeoutId = setTimeout(function() {
                    func.apply(context, args);
                }, delay);
            };
        }

        function hidePopup() {
            overlayPopup.style.display = 'none';
        }

        const debouncedHidePopup = debounce(hidePopup, 3000);

        overlayBadge.addEventListener('mouseenter', function() {
            overlayPopup.style.display = 'block';
            clearTimeout(timeoutId);
        });

        overlayBadge.addEventListener('mouseleave', debouncedHidePopup);
        overlayBadge.addEventListener('touchstart', function() {
            overlayPopup.style.display = 'block';
            clearTimeout(timeoutId);
            timeoutId = setTimeout(hidePopup, 3000);
        });
    </script>

</body>
</html>

Introduction​

Invisible vs. Passif​

Mode « 99,9 % passif »​

Associer automatiquement le défi à un bouton​

Associez le défi à un bouton ou lancez-le par programmation.​

Invoquer le défi par programmation​

Exemple​

Exemple de badge flottant​