This page explains how to set up the EasyCaptcha widget/checkbox on your site.
To display the captcha, you can use the following options:
- Automatically render the EasyCaptcha
- 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.
- The element that you are rendering
- 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"));