What is hCaptcha?

Mohamed Shiyam — Thu, 06 Mar 2025 06:54:26 +0000

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:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hCaptcha Example</title>
    <script>
        function onLoad() {
            console.log("hCaptcha script has loaded successfully!");
        }
    </script>
    <script src="https://js.hcaptcha.com/1/api.js?onload=onLoad" async defer></script>
</head>
<body>
    <form action="/submit" method="POST">
        <div class="h-captcha" data-sitekey="your-site-key"></div>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

In this example:

The <div class="h-captcha" data-sitekey="your-site-key"></div> 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:

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

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!

DEV Community: Mohamed Shiyam

What is hCaptcha?

What is hCaptcha?

Understanding the hCaptcha API Script

How to Use hCaptcha with onLoad Parameter

1. Basic HTML Integration

2. Dynamically Rendering hCaptcha

Final Thoughts