Automatic language detection and translation based on the user device

Ask the Community Customization
1

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.

1 Like
3

Hi there, @Klayton :wave:

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 :slightly_smiling_face:

1 Like
4

Hi, Max. I would like to translate this page here Viva Bem App

1 Like
5

Thank you!

I’ve forwarded your request to the dev team. I’ll get back to you once the solution is ready :slightly_smiling_face:

1 Like
6

Hi @Klayton :wave:

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 :slightly_smiling_face:

1 Like
8

It worked! Thank you ^^

1 Like
9

Great, you’re welcome :wink: