Localizing Widgets for Global Audiences

Ask the Community General Questions
,
6

Hi there, @muhammad_ali :wave:

If I got you right, you’d like to implement the automatic translation of the page based on the user’s language.

In this case, you need to add the needed languages to your Website Translator widget and add this script to your website’s head:

<script>
        (() => {
                const DEFAULT_LANGUAGE = 'en';

                const url = new URL(location.href);

                const key = Object.keys(localStorage).find((key) => key.startsWith('WebsiteTranslator.language'));
                const hasCachedValue = !!JSON.parse(localStorage.getItem(key) || '{ "value": false }').value;

                const language = navigator.language.split('-')[0];
                if (url.searchParams.has("lang") || language === DEFAULT_LANGUAGE || hasCachedValue) {
                        return;
                }

                url.searchParams.set("lang", navigator.language);
                history.replaceState(null, '', url);
        })();
</script>

If the default language isn’t English, you need to change it in the 3rd line of the code:

image
image570Ă—318 22.8 KB


This way, the language will be pulled from the user’s browser and the page with the widget will be automatically translated to this language (providing you’ve added this language to your Website Translator widget).

We also guess that it would be great to have this feature in the settings, and I’ve added this idea to the Wishlist on your behalf - Automatically translate the page to the language of the user location

Let me know if you have any further questions :slightly_smiling_face:

1 Like