Simplify Bot Prevention For Your Web Apps with EasyCaptchaJS

File Size: 74 KB
Views Total: 1087
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simplify Bot Prevention For Your Web Apps with EasyCaptchaJS

EasyCaptchaJS is a lightweight yet customizable jQuery plugin that makes adding Google reCAPTCHA protection to your websites/web apps a breeze.

Ideal for login forms, sign-up pages, and any place on your website where you need to validate human users and ward off bots. With its intuitive API and auto-initialization options, you can quickly secure sites against bots without the typical reCAPTCHA complexity.

To use the reCAPTCHA API, you will need a site key from Google. Visit the Google reCAPTCHA Admin Console, register your site, and retrieve your site key.

How to use it:

1. Install & download the EasyCaptchaJS via NPM.

$ npm i easycaptchajs

2. Load the EasyCaptchaJS plugin after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/easycaptcha.min.js"></script>

3. Initialize the plugin automatically by add your Google reCAPTCHA site key to the ReCAPTCHA_API_KEY_CLIENT meta tag.


4. Add the data-auto-easycaptcha to the targetElement which will hold the Google reCAPTCHA. The data-okbtn-selector attribute is used to specify the target button which is disabled on page load until your visitors get verified.

<div class="captchaTarget" 
<button type="button" id="submit">

5. You can also initialize the plugin manually by calling the method EasyCaptcha on the target element.

<div id="targetElement"></div>
  // options here

6. All possible HTML data attributes:

<div id="targetElement"
     data-recaptcha-apikey="YOUR SITE KEY" 

7. All possible plugin options.

  ReCaptchaSubmit: {
    success: () => {
    failed: () => {
    expired: () => {
  autoVerification: {
    okBtn: null,
    requiredMsg: "<div class='alert alert-danger'>Please verify that you are not a robot.</div>",
  apiScriptLoading: {
    loadingMsg: '<div class="spinner-border text-primary" role="status"></div>',
    error: () => {},
    errorMsg: "<div class='alert alert-danger'>Error while loading Api Script. <b class='retry-load-api-script clickable'>retry</b></div>",
  theme: 'light', // or 'dark'
  failure: (error) => {

8. API methods.

// Verify the reCAPTCHA checkbox status
// Properties:
// parentElement: The parent element of the EasyCaptcha checkbox
// verified: A boolean indicating whether the reCAPTCHA checkbox has been verified

// Get the reCAPTCHA response token
// Properties:
// parentElement: The parent element of the EasyCaptcha checkbox
// token: The reCAPTCHA response token

// Reset the reCAPTCHA response token

// Destroy the plugin


v1.2.1 (2023-09-02)

  • Bugfixes

This awesome jQuery plugin is developed by HichemTab-tech. For more Advanced Usages, please check the demo page or visit the official website.