API Reference

Frontend Widget Setup

This page explains how to set up the EasyCaptcha widget/checkbox on your site.

To display the captcha, you can use the following options:

  1. Automatically render the EasyCaptcha
  2. Manually render the captcha

Automatic EasyCaptcha Rendering

The simplest way to use EasyCaptcha is to include the ez-captcha DIV tag on your page and our script which actually does the process of rendering it. You must provide your site key obtained from our dashboard in the data-sitekey attribute.

<html>
  <head>
    <title>EasyCaptcha Demo</title>
  </head>
  <body>    
    <form action="index.html" method="POST">
      <div class="ez-captcha" data-sitekey="YOUR_SITE_KEY"></div>
      <script src="https://api.easycaptcha.io/static/embed.js"></script>
      <br>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

By default, this widget will include an ez-captcha-response hidden field in your form. You can use the parameter's value to verify their captcha solution via the backend, described on the next page.

Ideally, you should include the provided script tag at the footer of your website.

Explicit EasyCaptcha Rendering

You can also show an EasyCaptcha widget dynamically with the help of explicit rendering,

<html>
  <head>
    <title>EasyCaptcha Demo</title>
  </head>
  <body>    
    <form action="index.html" method="POST">
      <div id="captcha"></div>
      <br>
      <input type="submit" value="Submit">
    </form>
    <script src="https://api.easycaptcha.io/static/embed.js"></script>
    <script>
        easycaptcha.render(document.getElementById("captcha"), {
          sitekey: "YOUR_SITE_KEY"
        });      
    </script>
  </body>
</html>

With the easycaptcha.render() function, you would be able to render a widget manually. The function takes the following parameters.

  1. The element that you are rendering
  2. An array containing the site key

Obviously, you'll also require additional methods to interact with these widgets.

Reset Captcha

So to reset a captcha, you can use the following function. Calling this function would reset the widget, remove any captcha responses.

You should pass the widget element that you want to clear to easycaptcha.reset().

easycaptcha.reset(document.getElementById('captcha'));

Get Solution Response

To get the solution-response from a dynamically created captcha, you can use the following function. You can use this secure response code to verify the user's captcha input via the backend explained in the next page.

easycaptcha.getSolution(document.getElementById("captcha"));