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/easycaptchajs@1.2.1/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! 🚀