Dev.to

What is hCaptcha?

Understanding the Usage of hCaptcha's API Script with onLoad Parameter In today's digital landscape, securing your website from bots and spam is crucial. One popular tool for this is hCaptcha, a privacy-focused alternative to reCAPTCHA. In this blog post, we'll explore the usage of the hCaptcha API script, specifically the URL: https://js.hcaptcha.com/1/api.js?onload=onLoad This script is essential for integrating hCaptcha into your website to verify human users while enhancing security. What is hCaptcha? hCaptcha is a CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) service designed to prevent automated bots from accessing forms, sign-up pages, and other sensitive areas on websites. Unlike reCAPTCHA, hCaptcha emphasizes privacy and does not track users across the web. Understanding the hCaptcha API Script The script URL: https://js.hcaptcha.com/1/api.js?onload=onLoad serves two primary purposes: Loads hCaptcha’s JavaScript API: This enables rendering of the CAPTCHA widget and handling user responses. Executes a Custom Callback Function (onLoad): The onload parameter allows you to define a function that runs once hCaptcha is fully loaded. How to Use hCaptcha with onLoad Parameter To integrate hCaptcha into your website, follow these steps: 1. Basic HTML Integration Here’s a simple example of embedding hCaptcha in a form: hCaptcha Example function onLoad() { console.log("hCaptcha script has loaded successfully!"); } Submit In this example: The element loads the hCaptcha widget. The script is loaded asynchronously, and once it's ready, the onLoad function is triggered, logging a message. 2. Dynamically Rendering hCaptcha If you need to load hCaptcha dynamically (e.g., inside a modal or after user interaction), you can manually render it using JavaScript: function onLoad() { hcaptcha.render('captcha-container', { sitekey: 'your-site-key' }); } Ensure your HTML has a placeholder for the CAPTCHA: This method ensures that the CAPTCHA only loads when needed, improving page performance. Final Thoughts The hCaptcha API script with the onLoad parameter provides developers with greater control over CAPTCHA rendering and execution. Whether you're embedding it directly in forms or loading it dynamically, this approach enhances security while optimizing the user experience. By leveraging hCaptcha, you not only protect your site from bots but also maintain user privacy. Implement it today to enhance security on your website! Have Questions? Let us know in the comments below or explore hCaptcha’s official documentation for more details!

Mar 6, 2025 - 08:18
 0
What is hCaptcha?

Understanding the Usage of hCaptcha's API Script with onLoad Parameter

In today's digital landscape, securing your website from bots and spam is crucial. One popular tool for this is hCaptcha, a privacy-focused alternative to reCAPTCHA. In this blog post, we'll explore the usage of the hCaptcha API script, specifically the URL:

https://js.hcaptcha.com/1/api.js?onload=onLoad

This script is essential for integrating hCaptcha into your website to verify human users while enhancing security.

What is hCaptcha?

hCaptcha is a CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) service designed to prevent automated bots from accessing forms, sign-up pages, and other sensitive areas on websites. Unlike reCAPTCHA, hCaptcha emphasizes privacy and does not track users across the web.

Understanding the hCaptcha API Script

The script URL:

https://js.hcaptcha.com/1/api.js?onload=onLoad

serves two primary purposes:

  1. Loads hCaptcha’s JavaScript API: This enables rendering of the CAPTCHA widget and handling user responses.
  2. Executes a Custom Callback Function (onLoad): The onload parameter allows you to define a function that runs once hCaptcha is fully loaded.

How to Use hCaptcha with onLoad Parameter

To integrate hCaptcha into your website, follow these steps:

1. Basic HTML Integration

Here’s a simple example of embedding hCaptcha in a form:


 lang="en">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    </span>hCaptcha Example<span class="nt">
    
    


     action="/submit" method="POST">
         class="h-captcha" data-sitekey="your-site-key">
type="submit">Submit

In this example:

  • The
    element loads the hCaptcha widget.
  • The script is loaded asynchronously, and once it's ready, the onLoad function is triggered, logging a message.

2. Dynamically Rendering hCaptcha

If you need to load hCaptcha dynamically (e.g., inside a modal or after user interaction), you can manually render it using JavaScript:

function onLoad() {
    hcaptcha.render('captcha-container', {
        sitekey: 'your-site-key'
    });
}

Ensure your HTML has a placeholder for the CAPTCHA:

 id="captcha-container">