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 algorithm
-
Load the CAPTCHA using the advanced method.
<script src="https://smartcaptcha.yandexcloud.net/captcha.js?render=onload&onload=onloadFunction" defer ></script> <div id="captcha-container"></div>
-
Render the CAPTCHA widget in invisible mode.
<script> function onloadFunction() { if (!window.smartCaptcha) { return; } window.smartCaptcha.render('captcha-container', { sitekey: '<client_part_key>', invisible: true, // Make captcha invisible callback: callback, }); } function callback(token) { console.log(token); } </script>
-
Call
window.smartCaptcha.execute()
when SmartCaptcha is to start validating the user. For example, when clicking the submit button.<script> function handleSubmit() { if (!window.smartCaptcha) { return; } window.smartCaptcha.execute(); } </script> <form id="form"> <div id="captcha-container"></div> <input type="submit" onsubmit="handleSubmit()" /> </form>
Data 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 parameter shieldPosition
of the render
method, e.g.:
window.smartCaptcha.render('captcha-container', {
sitekey: '<client_part_key>',
invisible: true,
shieldPosition: 'top-left',
callback: callback,
});
You can hide the shield by the hideShield
parameter of the render
method.
Warning
You must notify users that their data is processed by SmartCaptcha. If you hide the notice shield, find another way to tell users that SmartCaptcha processes their data.
Specifics
-
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 a 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, // Make captcha invisible callback: callback, }); } function callback(token) { if (typeof token === "string" && token.length > 0) { // Send the form to the 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>