Setting reCAPTCHA Version 2 set another language other than English
JavascriptRecaptchaJavascript Problem Overview
How can I set this in another language, ie:. French
I've tried:
var RecaptchaOptions = {
lang : 'fr',
};
Which does nothing.
I couldn't find relevant info under API Reference -> Version 2 on Google Docs for reCAPTCHA
Additional information:
I'm using this on rails, with gem "recaptcha"
[Found here][4]
[4]: https://github.com/ambethia/recaptcha/ "Source to Gem"
Javascript Solutions
Solution 1 - Javascript
You just need to specify the parameter "?hl=" in the script's url:
<script src='https://www.google.com/recaptcha/api.js?hl=fr'></script>
Not very well documented, indeed!
find your language code here: https://developers.google.com/recaptcha/docs/language
Solution 2 - Javascript
If you are using the recaptcha gem you need to provide the hl param in recaptcha_tags.
Example:
<%= recaptcha_tags ssl: true, hl: 'it', display: { theme: 'white' } %>
Solution 3 - Javascript
Simple solution
You can do it like this:
HTML
<div id="captcha_container"></div>
<select id="ddllanguageListsGoogleCaptcha"></select>
JS
// Update language captcha
function updateGoogleCaptchaLanguage(selectedLanguage) {
// Get GoogleCaptcha iframe
var iframeGoogleCaptcha = $('#captcha_container').find('iframe');
// Get language code from iframe
var language = iframeGoogleCaptcha.attr("src").match(/hl=(.*?)&/).pop();
// Get selected language code from drop down
var selectedLanguage = $('#ddllanguageListsGoogleCaptcha').val();
// Check if language code of element is not equal by selected language, we need to set new language code
if (language !== selectedLanguage) {
// For setting new language
iframeGoogleCaptcha.attr("src", iframeGoogleCaptcha.attr("src").replace(/hl=(.*?)&/, 'hl=' + selectedLanguage + '&'));
}
}
Solution 4 - Javascript
Yes, the "hl=language code" approach works well. The catch, of course, is to do this to EVERY instance of <script src='https://www.google.com/recaptcha/api.js'></script>
on the page - both the one in the page head AND the one in the body. Only putting hl=... in the body leads to inconsistent results.
Solution 5 - Javascript
Thank you @ali-soltani for snipped! Did the thing! :)
I am providing my "vanilla" version for those who do not use jQuery, to save the few strikes.
function setCaptchaLang(lang) {
const container = document.getElementById('captcha_container');
// Get GoogleCaptcha iframe
const iframeGoogleCaptcha = container.querySelector('iframe');
// Get language code from iframe
const actualLang = iframeGoogleCaptcha.getAttribute("src").match(/hl=(.*?)&/).pop();
// For setting new language
if (actualLang !== lang) {
iframeGoogleCaptcha.setAttribute("src", iframeGoogleCaptcha.getAttribute("src").replace(/hl=(.*?)&/, 'hl=' + lang + '&'));
}
}