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

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:

Language Value
Arabic ar
Afrikaans af
Amharic am
Armenian hy
Azerbaijani az
Basque eu
Bengali bn
Bulgarian bg
Catalan ca
Chinese (Hong Kong) zh-HK
Chinese (Simplified) zh-CN
Chinese (Traditional) zh-TW
Croatian hr
Czech cs
Danish da
Dutch nl
English (UK) en-GB
English (US) en
Estonian et
Filipino fil
Finnish fi
French fr
French (Canadian) fr-CA
Galician gl
Language Value
Georgian ka
German de
German (Austria) de-AT
German (Switzerland) de-CH
Greek el
Gujarati gu
Hebrew iw
Hindi hi
Hungarian hu
Icelandic is
Indonesian id
Italian it
Japanese ja
Kannada kn
Korean ko
Laothian lo
Latvian lv
Lithuanian lt
Malay ms
Malayalam ml
Marathi mr
Mongolian mn
Norwegian no
Persian fa
Language Value
Polish pl
Portuguese pt
Portuguese (Brazil) pt-BR
Portuguese (Portugal) pt-PT
Romanian ro
Russian ru
Serbian sr
Sinhalese si
Slovak sk
Slovenian sl
Spanish es
Spanish (Latin America) es-419
Swahili sw
Swedish sv
Tamil ta
Telugu te
Thai th
Turkish tr
Ukrainian uk
Urdu ur
Vietnamese vi
Zulu zu

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

Happy coding ❤️!

This could interest you

Become a more social person