Skip to main content

Client

Quick Start​

For example, on a login form.

Frontend Code Example
<html>
  <head>
    <script src="https://static1.aicaptcha.net/v1/api.js" async defer></script>
  </head>
  <body>
    <form method="POST" action='/API'>
      <input type="text" name="email" placeholder="Email" />
      <input type="password" name="password" placeholder="Password" />
      <div class="ai-captcha" data-sitekey="your_site_key"></div>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Load AI Captcha Asynchronously​

Include the AI Captcha JavaScript resource somewhere in your HTML page. The <script> must be loaded via HTTPS and can be placed anywhere on the page. It's fine to put it inside the <head> tag or right after the .ai-captcha container.

<script src="https://static1.aicaptcha.net/v1/api.js" async defer></script>

When loading AI Captcha asynchronously, keep in mind that AI Captcha cannot be used until it has finished loading and onload callback to prevent race conditions. The onload callback is executed when AI Captcha finishes loading. The onload callback should be defined before loading the AI Captcha script. For example:

<script>
  const onloadAPICallback = function() {
    console.log("AI Captcha has loaded!");
    // you can reset or render AI Captcha
  };
</script>
<script  src="https://static1.aicaptcha.net/v1/api.js?onload=onloadAPICallback" async defer></script>

Prepare HTML Container​

Insert an empty HTML element (usually a <div>) at the location where the captcha needs to be integrated. For convenience, we may refer to this element as a 'div' later. The element must have class ai-captcha and a data-sitekey attribute.

<div class="ai-captcha" data-sitekey="your_site_key"></div>

Get the User's Response​

For web users, you can get the user’s response token in one of three ways:

  • When the user submits via the form, the data-captcha-response POST parameter
  • After the user completes the challenge, use aiCaptcha.getResponse(opt_widget_id) method to obtain
  • If data-callback is specified in the aicaptcha tag attribute or in the callback parameter of the aiCaptcha.render method, obtain it through the callback function string parameter

Different Ways to Loading AI Captcha​

Automatically Render the AI Captcha Widget​

The easiest method for rendering the AI Captcha widget on your page is to include the necessary JavaScript resource and an ai-captcha tag. The ai-captcha tag is a DIV element with class name ai-captcha and your site key in the data-sitekey attribute:

<html>
  <head>
    <title>login form demo </title>
    <script src="https://static1.aicaptcha.net/v1/api.js" async defer></script>
  </head>
  <body>
    <form method="POST" action="">
      <input type="text" name="email" placeholder="Email" />
      <input type="password" name="password" placeholder="Password" />
      <div class="ai-captcha" data-sitekey="your_site_key"></div>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

When a challenge is successfully passed, a hidden token will automatically be added to your form that you can then POST to your server for verification. You can retrieve it on the server side with POST parameter aicaptcha-response.

The script must be loaded using the HTTPS protocol.

Automatically Render the AICaptcha Widget (Normally)​

<html>
  <head>
    <script src="https://static1.aicaptcha.net/v1/api.js" async defer></script>
  </head>
  <body>
      <div class="ai-captcha" data-sitekey="your_site_key" data-callback="SuccessCallback"></div>
  </body>
  <script>
  const SuccessCallback = function(e) {
    console.log("AI Captcha Success response!");
    //  pass this response to your server for verification
  };
</script>
</html>

Explicitly Render the AI Captcha Widget​

Another way to render the AICaptcha widget is to defer the rendering. This can be achieved by specifying your onload callback function and adding parameters to the JavaScript resource.

<html>
  <head>
    <!-- explicit rendering -->
    <script src="https://static1.aicaptcha.net/v1/api.js?onload=onloadCallback&render=explicit" async defer></script>
  </head>
  <body>
      <div id='container'></div>
      <div id='submit'>submit</div>
  </body>
  <script>
    let AIcaptcahWidgeID = null
    function onloadCallback () {
      // render invisible widget
      AIcaptcahWidgeID = window.aiCaptcha.render('container', {
        // options
        sitekey: 'your_site_key',
        size: 'invisible',
        'callback': SuccessCallback, // success callback function 
        'error-callback': ErrorCallback,
        // other callback function check docs        
      })
    }
  function SuccessCallback(e) {
    console.log("AI Captcha Success response!", e);
    //  pass this response to your server for verification
  };
  function ErrorCallback (err) {
     console.log("AI Captcha error callbacl");
  }
  document.getElementById('submit').addEventListener('click', function() {
      // Trigger the AI Captcha
      if (AIcaptcahWidgeID === null) {
        console.error('Widget not yet initialized');
      } else {
        window.aiCaptcha.execute(AIcaptcahWidgeID);
      }
  })
</script>
</html>