How to make a website open in the browser language?

Community resources General
1

I have a website in 4 languages.
How to make a website open in the browser language?
Are there such settings in webflow?
Or how can this be done?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

I do not think that WF offers something like that but it simple to detect with online like this.

<script type="text/javascript">
var userLang = navigator.language || navigator.userLanguage; 
alert ("The language is: " + userLang);
// do something with this data 
// ....
</script>
3

Thanks for the answer!
Can you please clarify, since I don’t know the code well…

If I have 4 languages, I need to duplicate this line 4 times, changing the name of the language and nothing else needs to be added?

4

And also tell me, what does this line mean? Is there anything I need to add here?

5

Hi Nuta, Webflow has automatic routing built in, but it’s part of the Advanced loclization plan.

It’s possible to build your own, as Stan said, but it’s tricky if you’re using localized paths.

image
image880Ă—712 33.8 KB

2 Likes
6

hi @Nuta_Kul I never used WF translations so I really do not know how it will work in WF and what branches WF put on the road to force users to spend more. So I can only suggest.

From what I see from picture it is related to folders, right? This means that URL structure will be something like www.mysite.com/[lang]/ ....

WF copy
WF copy800Ă—864 62.9 KB

So once you have a client language you can grab URL and modify it. here is only theoretical example (hack)

function changeLanguage() {
	const languageMap = {
		en: 'en',
		fr: 'fr',
		es: 'es'
	};
	// get user language ... eg. fr, en, es
	const userLang = navigator.language || navigator.userLanguage;
   
	// get current url eg.// www.mywebsite.com/en/...
	const currentUrl = window.location.href;

	// get language from url (in this case the word after first slash)
	const lang = window.location.pathname.replace(/^\/([^\/]*).*$/, '$1');

	// replace language in url with user language
	window.location.href = currentUrl.replace(lang, languageMap[userLang]);
}

I didn’t provide condition that check if user has one of these languages if condition return false it will return means do nothing so it will keep “en” as default.

but function should run before DOM loaded to prevent flickering from origin language to user language.

Like @memetican mentioned it can be more complex task . :man_shrugging:

editt: one of many sources on internet.

8

I don’t have any Webflow translations and I don’t have a localization plan.
I just have 4 separate pages ready, each of which I manually translated into the desired language.
So I have one page in English, one in Turkish, one in Ukrainian and one in Russian.
A localization plan won’t work for me, since it uses machine translation, and I already have a ready translation.

The main language on my site is English. I just need it so that if a user has a browser language set to, say, Turkish, then the site automatically opens in Turkish right away and the user doesn’t have to manually switch it from English…

9

Just so you know, Webflow Localization offers machine translation ( on most popular locales ), but doesn’t require it. The point is to be able to write your own content and translations freely.

That said, I probably wouldn’t subscribe to 3 locales just for a 4 page site.

Stan’s approach above is the right direction for you. I can’t find my locale-detection scripts, but the basic approach I use is three parts-

AUTO-DETECT

On your default locale pages;

  • User lands on your main English page
  • You check to see if they have a language preference selected already, by checking for a cookie
  • If they do not, you look at the browser language, make a best match to your supported languages, and then set that as their preference

On your alternate locale pages;
I’d just auto set that cookie to the alt locale. Usually people would arrive there from a search engine link, or a partner site, or have manually changed the page- all of those qualify as a locale switch, so I just set the cookie to e.g. Turkish when they look at the Turkish page.

After auto-detect, you have your cookie updated, and you auto-route…

AUTO-ROUTE
On all pages, you can check the current page language, and the cookie. If they do not match, redirect them to the correct page.

LANGUAGE-SWITCHER
I tend to keep this simple, just link to the alt-locale pages you want. The cookie will be updated automatically if they switch the language, and remembered for their next visit.