I haven’t used the Website Translator Widget in any project yet, but is it possible to use it in a way that the translation is done automatically by detecting the user’s device language? I would like the widget to remain hidden and, depending on the language the user’s device is set to, translate the content accordingly. For example, if the device language is set to Portuguese, the widget would translate all content to Portuguese as soon as the page is opened on the user’s screen. I want to use three languages: English, Spanish, and Portuguese.
2 Likes
Hi there, @Klayton 
It’s impossible to detect the language of the device, but we can try to create a code that will detect the browser language. For this, you should create and install the widget to your website and share a link with us 
2 Likes
Hi, Max. I would like to translate this page here Viva Bem App
2 Likes
Thank you!
I’ve forwarded your request to the dev team. I’ll get back to you once the solution is ready
2 Likes
Hi @Klayton
Thank you for waiting!
This code should be added to the Custom JS field on the Settings tab of your widget’s settings:
(() => {
const DEFAULT_LANGUAGE = 'pt-BR';
const WIDGET_LANGUAGES = [
'pt-BR',
'en-US',
'es-ES',
];
const CUSTOM_KEY = 'WebsiteTranslator.isVisited';
const COOKIE_LIFE_HOURS = 24;
const TRANSLATE_UNKNOWN_LANGUAGES_TO_ENGLISH = true;
document.documentElement.lang = DEFAULT_LANGUAGE;
const getCookie = (key) => {
const cookies = document.cookie.split(';').map((cookie) => cookie.trim());
const targetCookie = cookies.find((cookie) => cookie.startsWith(`${key}=`));
return targetCookie ? decodeURIComponent(targetCookie.split('=')[1]) : null;
};
const setCookie = (key, value, hours) => {
const date = new Date();
date.setTime(date.getTime() + hours * 60 * 60 * 1000);
document.cookie = `${key}=${encodeURIComponent(value)}; expires=${date.toUTCString()}; path=/`;
};
const startCookieProcess = () => {
if (getCookie(CUSTOM_KEY)) {
return false;
}
setCookie(CUSTOM_KEY, 'true', COOKIE_LIFE_HOURS);
return true;
};
const url = new URL(location.href);
const languageKey = Object.keys(localStorage).find((key) =>
key.startsWith('WebsiteTranslator.language')
);
const hasCachedValue =
JSON.parse(localStorage.getItem(languageKey))?.value || false;
const language = navigator.language.split('-')[0];
if (url.searchParams.has('lang') || hasCachedValue) {
history.replaceState(null, '', url);
return;
}
if (!startCookieProcess()) {
return;
}
if (WIDGET_LANGUAGES.includes(navigator.language)) {
url.searchParams.set('lang', navigator.language);
history.replaceState(null, '', url);
return;
}
if (language === 'en') {
url.searchParams.set('lang', 'en-GB');
history.replaceState(null, '', url);
return;
}
if (language === 'es') {
url.searchParams.set('lang', 'es-ES');
history.replaceState(null, '', url);
return;
}
if (TRANSLATE_UNKNOWN_LANGUAGES_TO_ENGLISH) {
url.searchParams.set('lang', 'en-US');
history.replaceState(null, '', url);
}
})();
Please try it out and let me know if you like the result
3 Likes
It worked! Thank you ^^
2 Likes
Great, you’re welcome 
2 Likes
Hi, Max! 
I have another question: can I change the translation of certain words? For example, on a page where I provide translations in three languages (Portuguese, Spanish, and English), when the Portuguese word “Revindicar” is translated back to Portuguese, the script doesn’t return to “Revindicar” but to “Alegar.” Can’t I specify specific translations for specific parts of the page?
1 Like
Hey @Klayton! Stepping in for Max to answer 
I wanted to let you know that this feature is, unfortunately, unavailable at the moment. However, it’s really popular in our Wishlist: Custom translation 
Drop a vote and get notified of any changes!
Our team keeps this request in mind due to the high demand, so let’s hope that it gets planned for the development soon 
2 Likes
HI Max. I also had this same question, if the translate widget could detect the device’s language and auto translate content to that language. I see you said it can detect the browser language to achieve the same thing, correct? If so, will this code that you supplied work for anyone? I see it calls out PT. All of our pages in our LMS are in English, but we would like them to be translated automatically according to the browser language of the users device and we use the entire language list in the widget - is that possible? Thanks!
1 Like
Hi there, @Jill_Sharlock 
This code should work for your case too. You just need to change the default language and add a full list of the needed languages there:
Give it a try and let me know if it worked 
1 Like
Thank you! I will let you know. Question: do you have a list of all the languages already with their 2 character codes somewhere easily accessible?
1 Like
Hi there, @Jill_Sharlock
Here is a full list of the language codes supported in our app
“af”
“sq”
“am”
“ar-SA”
“ar-EG”
“hy”
“as”
“ay”
“az”
“bm”
“eu”
“be”
“bn”
“bho”
“bs”
“bg”
“ca”
“ceb”,
“ny”
“zh-cn”
“zh-tw”
“co”
“hr”
“cs”
“da”
“fa-AF”
“dv”
“doi”
“nl”
“en-GB”
“en-US”
“en-CA”
“en-AU”
“et”
“ee”
“tl”
“fi”
“fr”
“fy”
“gl”
“ka”
“de”
“el”
“gn”
“gu”
“ht”
“ha”
“haw”
“iw”,
“hi”
“hmn”
“hu”
“is”
“ilo”
“id-id”
“ga”
“it”
“ja”
“jw”
“kn”
“kk”
“km”
“rw”
“gom”
“ko”
“kr”
“ku”
“ckb”
“ky”
“lo”
“lv”
“ln”
“lt”
“lg”
“lb”
“mk”
“mai”
“mg”
“ms”
“ml”
“mt”
“mi”
“mr”
“mni-mtei”
“lus”
“mn”
“my”
“ne”
“no”
“or”
“om”
“ps”
“fa-IR”
“pl”
“pt-PT”
“pt-BR”
“pa”
“qu”
“ro”
“ru”
“sm”
“sa”
“gd”
“nso”
“sr”
“st”
“sn”
“sd”
“si”
“sk”
“sl”
“so”
“es-ES”
“es-MX”
“su”
“sw”
“sv”
“tg”
“ta”
“tt”
“te”
“th”
“ti”
“ts”
“tr”
“tk”
“ak”
“uk”
“ur”
“ug”
“uz”
“vi”
“cy”,
"xh
“yi”
“yo”
“zu”
1 Like
My goodness, thank you so much, Max for supplying this list! You guys are great!
2 Likes
It’s my pleasure 
Hi Max. I tried using the custom JS with the list of languages as specified above to auto translate the pages according to the language set in the browser and while this worked in Chrome, I could not get it to work in Edge. Would you happen to know why or what I could do to fix this so it works in all browsers? Thank you!
1 Like
Could you please send me a link to the page, where your widget is installed? I’ll be happy to look into this