Invisible Captcha

Introduction

You can get all the bot-blocking benefits of hCaptcha without explicitly rendering our checkbox widget. hCaptcha client/server interactions occur in the background, and the user will only be presented with a hCaptcha challenge if that user meets challenge criteria.

Invisible vs. Passive

hCaptcha supports both invisible and passive modes, and they can be combined for a seamless user experience.

"Invisible" means no checkbox is used. For example, clicking Submit on a form to trigger hCaptcha token generation can use the "invisible" mode by setting this option as described below. This option is available to all users.
"Passive" means that while the checkbox is displayed, no visible challenge is ever shown, i.e. purely passive mechanisms for humanity verification are used. This is set via the sitekey's difficulty level. This mode requires consuming the hCaptcha risk score, and is only available to Enterprise users.

Enterprise users can combine "Invisible" (no checkbox) configuration with "Passive" difficulty to avoid any user interruption. However, note the tradeoff: this comes at the cost of reducing the protection level compared to our active challenge modes.

For both Pro and Enterprise users, an additional hybrid mode is available:

"99.9% Passive" mode will selectively challenge users based on an evaluation derived from thousands of factors. This attempts to minimize challenges to real people to less than 0.1% of users while increasing the costs of an attack in virtually all cases.

info

Enterprise users: please see the Understanding Scores and Modes section for more details on configuring passive modes and selective challenges.

note

To ensure you are in compliance with the online privacy laws coming into force around the world, please include the following text and links on the page that includes an invisible hCaptcha:

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.

You may also wish to integrate a disclosure into your Privacy Policy similar to the one here. Note that this is not legal advice, and you should consult with counsel in the jurisdictions in which you operate if you have further questions about your specific use case.

Automatically bind the challenge to a button

The easiest way to do this is to assign an .h-captcha class to any button or input. Like before, you must add your sitekey in a data-sitekey attribute assigned to the <button> element. Additionally, all of the data-* attributes are applicable here.

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

Just as before, the response-token will be sent to the callback function upon successful completion of the hCaptcha challenge. If you attached the invisible hCaptcha to a submit button, you must specify a data-callback to handle form submission. In most cases, you will want to use the callback to manually submit the form.

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

Programmatically bind the challenge to a button or invoke the challenge

This works without change from the explicit rendering of the hCaptcha widget described here. The only difference is that if the data-size="invisible" is present, the widget will be rendered in the background and only presented when a challenge is required.

Programmatically invoke the challenge

If you would prefer to invoke the hCaptcha workflow via a JavaScript trigger (in cases like a checkbox click, or a page load), you'll need to use the hcaptcha.execute(widgetID) function to trigger that process on a given widgetID.

For more information on the hcaptcha.execute function and the widgetID argument, you can read more on the JavaScript API section of the configuration page

Example

Start hCaptcha process in defined div container, with onclick trigger on button

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

Example of Floating Badge

If you have not opted for the simple text option above, you may prefer to use a floating badge in order to let users reach the terms and privacy links.

Here is a simple example of this (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. Passive​

Automatically bind the challenge to a button​

Programmatically bind the challenge to a button or invoke the challenge​

Programmatically invoke the challenge​

Example​

Example of Floating Badge​