Simplify CAPTCHA Implementation with EasyCaptchaJs! 🎉🔐

Simplify CAPTCHA Implementation with EasyCaptchaJs! 🎉🔐

Why EasyCaptchaJs? 🤔

Implementing CAPTCHA can be a hassle, but EasyCaptchaJs makes it a breeze! Whether you're looking to prevent spam or enhance security on your forms, this library offers an effortless solution. It's user-friendly, highly customizable, and perfect for any web project. 🚀

What is EasyCaptchaJs? 🌟

EasyCaptchaJs is a lightweight and powerful JavaScript library designed to simplify the addition of CAPTCHA to your web forms. It provides a range of options to customize the look and functionality of your CAPTCHA, ensuring it fits seamlessly into your website’s design. From basic text CAPTCHAs to more complex image-based ones, EasyCaptchaJs has it all. 🎨

Key Features 🔑

1. 
   User-Friendly: Easy to set up and integrate into any web project. 🛠️


2. 
   Customizable: Tailor the CAPTCHA to match your site’s design and needs. 🎨


3. 
   Lightweight: Minimal impact on your site’s performance. ⚡️


4. 
   Flexible: Supports various CAPTCHA types, including text and image-based. 🖼️

How to Get Started? 🛠️

Installation Options 📦

• 
  npm:
  

  npm install easycaptchajs

• 
  CDN:
  

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/easycaptcha.min.js"></script>

• 
  Local Download:
  

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

How to Implement EasyCaptchaJs? 🛠️

Here's a quick guide to get you started:

1. 
   Include jQuery: Ensure you have jQuery included in your project.
   

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

1. 
   Include EasyCaptchaJs: Add the EasyCaptchaJs plugin to your project.
   

   <script src="path/to/easycaptcha.js"></script>

1. 
   Initialize the CAPTCHA: Set up the CAPTCHA in your form.
   

   <script>

     $(document).ready(function() {

       // JavaScript

        const options = {

            ReCAPTCHA_API_KEY_CLIENT: 'YOUR_RECAPTCHA_SITE_KEY',

            ReCaptchaSubmit: {

                success: () => {

                    console.log('reCAPTCHA verification successful!');

                },

                failed: () => {

                    console.log('reCAPTCHA verification failed!');

                },

                expired: () => {

                    console.log('reCAPTCHA verification expired!');

                },

            },

            autoVerification: {

                requiredMsg: $("#msg1"),

            },

            apiScriptLoading: {

                loadingMsg: '<div class="spinner-border text-warning" role="status"></div>',

                error: () => {

                    console.log('Error while loading API script.');

                },

                errorMsg: "<div class='alert alert-danger'>Custom Error while loading API Script. <b class='retry-load-api-script clickable'>retry</b></div>",

            },

        };



        // Initialize EasyCaptchaJs on multiple targets with the shared class name "captchaTarget"

        $('#captcha-placeholder').EasyCaptcha(options);

     });

   </script>

1. 
   Add CAPTCHA Placeholder: Insert a placeholder where the CAPTCHA will appear.
   

   <form id="your-form-id">

     <!-- Your form fields here -->

     <div id="captcha-placeholder"></div>

     <button type="submit">Submit</button>

   </form>

Make CAPTCHA Easy and Fun! 🎉

No more complicated setups or boring CAPTCHAs. With EasyCaptchaJs, you can enhance your website’s security while providing a smooth and engaging user experience. Ready to upgrade your forms? Give EasyCaptchaJs a try today and see the difference! 😃

Check out the EasyCaptchaJs GitHub page for more details and start simplifying your CAPTCHA implementation! 🚀