Invisible CAPTCHA

Invisible CAPTCHA is a way of connecting the SmartCaptcha widget without the "I’m not a robot" button on the page. Only users whose requests are considered suspicious by SmartCaptcha will see the challenge pop-up window.

The developer chooses when the service will check the user, for example, when clicking the submit button.

Invisible CAPTCHA is only connected using the advanced method.

Connection algorithmConnection algorithm

1. Load the CAPTCHA using the advanced method.

   <script
     src="https://smartcaptcha.yandexcloud.net/captcha.js?render=onload&onload=onloadFunction"
     defer
   ></script>
   

2. Render the CAPTCHA widget in invisible mode.

   <form id="form">
     <div id="captcha-container"></div>
     <input type="submit" />
   </form>
   
   <script>
   const form = document.getElementById('form');
   
   function onloadFunction() {
     if (!window.smartCaptcha) {
       return;
     }
   
     window.smartCaptcha.render('captcha-container', {
       sitekey: '<client_part_key>',
       invisible: true, // Making captcha invisible
       callback: callback,
     });
   }
   
   function callback(token) {
     form.submit();
   }
   </script>
   

3. Call window.smartCaptcha.execute() when SmartCaptcha is to start validating the user. For example, when clicking the submit button.

   <form id="form">
     <div id="captcha-container"></div>
     <input type="submit" onsubmit="handleSubmit()" />
   </form>
   
   <script>
   const form = document.getElementById('form');
   
   function onloadFunction() {
     if (!window.smartCaptcha) {
       return;
     }
   
     window.smartCaptcha.render('captcha-container', {
       sitekey: '<client_part_key>',
       invisible: true, // Making captcha invisible
       callback: callback,
     });
   }
   
   function callback(token) {
     form.submit();
   }
   
   function handleSubmit(event) {
     event.preventDefault();
   
     if (!window.smartCaptcha) {
       return;
     }
   
     window.smartCaptcha.execute();
   }
   </script>
   

Data processing noticeData processing notice

By default, a page with an invisible CAPTCHA renders a shield with a link to the document: Notice on the terms of data processing by the service.

The shield is positioned in the bottom-right corner. To move the shield, use the shieldPosition parameter of the render method. For example:

window.smartCaptcha.render('captcha-container', {
  sitekey: '<client_part_key>',
  invisible: true,
  shieldPosition: 'top-left',
  callback: callback,
});

You can hide the shield by using the hideShield parameter of the render method.

Things to considerThings to consider

• Invisible CAPTCHA requires less memory than normal CAPTCHA because it doesn't load the code that renders the "I’m not a robot" button.

  However, the widget loading time may vary for users. This is why we recommend warning users about the CAPTCHA to avoid any confusion while they are waiting.

• If a page has more than one widget, you need to provide widget ID to the execute method.

  Example

  <script
    src="https://smartcaptcha.yandexcloud.net/captcha.js?render=onload&onload=onloadFunction"
    defer
  ></script>
  
  <script>
    let widgetId;
  
    function onloadFunction() {
      if (!window.smartCaptcha) {
        return;
      }
  
      widgetId = window.smartCaptcha.render('captcha-container', {
        sitekey: '<client_part_key>',
        invisible: true, // Making captcha invisible
        callback: callback,
      });
    }
  
    function callback(token) {
      if (typeof token === "string" && token.length > 0) {
          // Send form to backend
          console.log(token);
          document.querySelector('form').submit()
      }
    }
  
    function handleSubmit(event) {
      if (!window.smartCaptcha) {
        return;
      }
  
      window.smartCaptcha.execute(widgetId);
    }
  </script>
  
  <form id="form">
    <div id="captcha-container"></div>
    <button type="button" onclick="handleSubmit()">Submit</button>
  </form>