Automatically translate the page to the language of the user location

Wishlist Website Translator
1

It would be amazing to automatically translate the page to the language of the user location

2 Likes
Localizing Widgets for Global Audiences
2

I am asking it from one of my client’s point of view as well, where he is offering PS4 ModKit V2, so as he is offering in more than 1 languages. So, they are requesting the same for their website.

1 Like
3

Hey there i agree! it would be really nice for this widget to automatically translate the websites according to the users location.

1 Like
4

Hi there, @Ignacio_Valdez!

Thank you so much for upvoting the idea and welcome to the Community :wink:

5

For sure a must-have feature, for landing-pages, contact forms, etc is something many need. Currently the only way is to detect user location in the back-end and then redirect to the url with specific language. Of course should be optional with enable/disable system in case someone does not need it.

1 Like
6

Hi there, @user25065 and welcome to the Community :waving_hand:

Many thanks for sharing your thoughts with us! If more users upvote this idea, we’ll try to consider it in the future updates.

As for now, there’s a custom solution from the devs:

(() => {
	const DEFAULT_LANGUAGE = 'it';
	const WIDGET_LANGUAGES = [
		'it',
		'en-GB',
		'de',
		'fr',
		'es-ES',
		'ja',
		'zh-cn',
		'ru',
	];
	const CUSTOM_KEY = 'WebsiteTranslator.isVisited';
	const COOKIE_LIFE_HOURS = 24;
	
	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;
	}
})();

In the DEFAULT_LANGUAGE line, please set the language of your website. In the WIDGET_LANGUAGES line, you should list all language options added to your widget:

image
image606Ă—432 16.1 KB

Once this done, add the resulted code to the Custom JS field on the Settings tab of your widget’s settings :slightly_smiling_face:

Note: This code creates a new cookie “WebsiteTranslator.isFirstVisit”, which remembers users for 24 hours

1 Like