How to set the Google ReCaptcha language from the start and dynamically with JavaScript

ReCaptcha is widely used in many blogs and websites where is necessary to add extra protection against bots that are constantly spamming silly messages on your contact forms. It's quite easy to implement and it's a good option among other open-source options. As not every developer needs to deal with multilanguage websites, it is not easy to find how to change the ReCaptcha language during the initialization or dynamically.

In this short article, I'll explain you how to easily set the initial language of ReCaptcha or change it dynamically with JavaScript only.

Change language on initialization

To simply start ReCaptcha with a specific language, the only thing you need to do is to provide the locale parameter to the request JavaScript file of ReCaptcha. This parameter can be specified through a GET parameter like this, for example, to request the Spanish version of the ReCaptcha file, add the host language parameter (hl) to the requested js file with a value of es:

<script src="https://www.google.com/recaptcha/api.js?hl=es"></script>

Or in German with a value of de:

<script src="https://www.google.com/recaptcha/api.js?hl=de"></script>

After the initialization, the ReCaptcha box should start with the language that you desire.

Change language dynamically

If you want to change dynamically the ReCaptcha language, then you can use the following helper method that will update the ReCaptcha script file according to the language that you want:

/**
 * Change dynamically the language of the ReCaptcha inside the selected container.
 * 
 * @param recaptchaContainer 
 * @param lang 
 */
function setCaptchaLang(recaptchaContainer, lang) {
    lang = lang || "en";

    // 1. Search for the ReCaptcha iframe
    const iframeGoogleCaptcha = recaptchaContainer.querySelector('iframe');

    // 2. Retrieve the current language
    const currentLang = iframeGoogleCaptcha.getAttribute("src").match(/hl=(.*?)&/).pop();

    // 3. Verify if the language that you want to set is different to the current one
    if (currentLang !== lang) {
        // 4. If it is, change it
        iframeGoogleCaptcha.setAttribute(
            "src",
            iframeGoogleCaptcha.getAttribute("src").replace(
                /hl=(.*?)&/,
                'hl=' + lang + '&'
            )
        );
    }
}

The setCaptchaLang method expects 2 arguments, as first, the DOM node of the element that contains the ReCaptcha box and as second parameter, a string with the language code.

For example, considering the following initialization of ReCaptcha:

<div id="recaptcha-container">
    <div style="display:inline-block;">
        <div class="g-recaptcha" data-sitekey="XXXXXXXXXXXX"></div>
    </div>
</div>
<script src="https://www.google.com/recaptcha/api.js?hl=es"></script>

It should be easy to change it from the original language (Spanish) to another language like this:

// To change it to German
setCaptchaLang(document.getElementById("recaptcha-container"), "de");

// To change it to English
setCaptchaLang(document.getElementById("recaptcha-container"), "en");

Language list

For a complete list of the languages supported by ReCaptcha:

You can check the official list of codes on the ReCaptcha website here.

Happy coding ❤️!