Redirect to browser language

[cedi44 (Cédric Moore)]

Hi guys

I am working on a website which needs multilanguage support.
What I did now is creating the structure for it.

I added all the different language sites inside a folder so that I have mysite.com/en, /fr, /it and /de.

Now what I need to do it to redirect the user to its browser language. Means when he is a german user and he lands on mysite.com, he needs to be redirected to mysite.com/de/homepage.

Does anyone form you guys know how to do this in custom code?
I saw a few posts in the forum here, but none really worked. And I dont want to use tools like localizejs which is very bad for SEO.

Anyone has a plan to reach that?

Thank you very much in advance,
Cédric

[Diarmuid_Sexton]

Hey,

Here’s a solution that I’ve implemented.

Copy all the below text into the footer code of the page / site - whichever you want.

The second piece of code does what you’re looking for. However, you will want to use set a cookie just in case the user actually wants to go to the homepage of the English site - otherwise if they try go back there, it will keep redirecting them to the browser language site. Hope that makes sense.

Let me know if you’ve any questions.

<!-- Cookie Script -->
<script src="https://uploads-ssl.webflow.com/5a9eaaa5685169000102decf/5c93a76c5bef9b99e9537992_jquery.cookie.js.txt"></script>

 var lang = navigator.language;
              if (!$.cookie('language-de-redirect-cookie') && lang.indexOf("de") !== -1) {
              var date = new Date();      
              date.setTime(date.getTime() + 24 * 60 * 60 * 1000);
              $.cookie('language-de-redirect-cookie', true, { expires: date });
              $(location).attr('href', 'https://www.mysite.com/de/homepage');
          }
        	  else if (!$.cookie('language-fr-redirect-cookie') && lang.indexOf("fr") !== -1) {
              var date = new Date();      
              date.setTime(date.getTime() + 24 * 60 * 60 * 1000);
              $.cookie('language-fr-redirect-cookie', true, { expires: date });
              $(location).attr('href', 'https://www.mysite.com/fr/homepage');
          }
       	 else {
          		// do nothing
          		}

And here’s a list of all the browser language codes - https://www.metamodpro.com/browser-language-codes

[cedi44 (Cédric Moore)]

@Diarmuid_Sexton Yeah very nice, and that does also work with the page which is set as homepage in webflow? is it overriding that home page tag somehow?

Thank you very much!

[Diarmuid_Sexton]

I don’t understand what you mean. Can you elaborate or provide an example?

[cedi44 (Cédric Moore)]

@Diarmuid_Sexton Sure!

My question is, if your code is overriding the function of the home page feature in Webflow. See more here about it: Assign a new homepage | Webflow University

The thing is, that we can only choose one page as the main homepage of a project, which is of course correct, because Webflow isn’t supporting multi-language, yet.
But with multiple languages we should actually have one home page for each language. How you solved this in your projects? Does your code just overrides this and ignores it?

[Diarmuid_Sexton]

Yes, put this on your English homepage as this is most likely the page that people might type in to their browser and go to directly - i.e. they type mysite.com (which is the english page) but they speak french (so they need to be redirected to the french page)

Otherwise, most likely a search engine will be directing them to your site and for that you need to setup Hreflang for every page - this will tell google what language each page is in.

[cedi44 (Cédric Moore)]

Okay great, thanks. Will try it out as soon I can. Cheers!

[cedi44 (Cédric Moore)]

@Diarmuid_Sexton I just tried it out and it worked. Thank you very much for your help. Just need one last answer I have 4 languages and your code works now for 2. Which part do I need to duplicate for the other 2 languages?

[dram (Alex Dram)]

The part starting with “else if” and finishing with the closing curly bracket.

[Diarmuid_Sexton]

This part. Just change the language

    	  else if (!$.cookie('language-fr-redirect-cookie') && lang.indexOf("fr") !== -1) {
          var date = new Date();      
          date.setTime(date.getTime() + 24 * 60 * 60 * 1000);
          $.cookie('language-fr-redirect-cookie', true, { expires: date });
          $(location).attr('href', 'https://www.mysite.com/fr/homepage');
      }

[eugene_weglot]

Hey @cedi44,

FYI we’ve just launched a new way to make any Webflow website multilingual that is SEO optimized: https://weglot.com/integrations/translate-webflow/

How it works You integrate Weglot via your DNS subdomains (fr.mysite.com for French / de.mysite.com for German), Weglot will detect all your website content and allow you to translate it.

Why it’s SEO optimized

• You have a unique URL for each language
• The translations are applied “server-side” so the content in the HTML is the translated content
• Weglot automatically adds hreflangs to link between all the different translated pages
• Weglot detects all your content including metadata, images, alt tab so you can translate everything.

We are new to Webflow so any feedback would be greatly appreciated.

[pavel_saboit (Pavel Tybl)]

Hi,
I havent found our solution on the forums yet, so I am posting it here.
We are using similar multi-language approach with automatic redirect based on the browser language setting on our website.

In our case, we have separate subfolders for EN and DE versions, where visitor in browser in german is redirected to DE version of the website. However, we ran into a problem when this german user wants to switch back to english , because the language switch button leads to the homepage again, where the user would again be automatically redirected back to the german version of the website.

We solved it by using a language variable stored in browser’s localStorage. On click on the language switcher, we set a constant to the buttons text. And when a user enters the homepage we either:
– send him to the DE page (if the const is not set or if its set to DE AND the browser is in DE)
– or do nothing. (when const is EN or browser is not in german)

All you need is 1 script on homepagehead section:

<script type="text/javascript">
var language = window.navigator.language;

const userLanguage = localStorage.getItem('language');

const isGerman = language == "de" || language == "de-AT" || language == "de-LI" || language == "de-CH" || language == "de-LU"; 

if(!userLanguage && isGerman){
	window.location.href = "/de/home";
} else if(userLanguage == 'de' && isGerman){
	window.location.href = "/de/home";
}

One script in “before /body tag” of each subpage:

<script type="text/javascript">

const languageBtn = document.getElementById('languageBtn');

function handleBtnClick() {
console.log(languageBtn.innerText)
localStorage.setItem('language', languageBtn.innerText);
}
languageBtn.addEventListener('click', handleBtnClick);
window.unload = () => {
languageBtn.removeEventListener('click', handleBtnClick);
}
</script>

and set ID “languageBtn” on the language switch button in the main menu.

Hope that helps someone.

[Andrew_Morawski]

Works great! Thanks!

[Marco_Crtost]

Hi, I find this is the solution I need. But I have a problem… Because I have another type of language switch…

I tried on mine but is not working… I’m using a Weglot element (the free version has no auto-redirect…

<script type="text/javascript">
var language = window.navigator.language;

const userLanguage = localStorage.getItem('language');

const isGerman = language == "de" || language == "de-AT" || language == "de-LI" || language == "de-CH" || language == "de-LU"; 

if(!userLanguage && isGerman){
	window.location.href = "https://de.website.com";
} else if(userLanguage == 'de' && isGerman){
	window.location.href = "https://de.website.com";
}
</script>


<script type="text/javascript">

const languageBtn = document.getElementById('wg-selector-2');

function handleBtnClick() {
console.log(languageBtn.innerText)
localStorage.setItem('language', languageBtn.innerText);
}
languageBtn.addEventListener('click', handleBtnClick);
window.unload = () => {
languageBtn.removeEventListener('click', handleBtnClick);
}
</script>

So I replaced the “languageBtn” ID to “wg-selector-2”

This is the template from weglot:
https://preview.webflow.com/preview/weglot-ui-kit?utm_medium=preview_link&utm_source=showcase&utm_content=weglot-ui-kit&preview=56d9a9d3787934aedee444217e6f2482

https://weglotuikit.finsweet.com/

Any idea?

[pavel_saboit (Pavel Tybl)]

You need to set the ID in the Element settings tab.
If you did that, i am not sure, because I am not familiar with Weglot.

[Marco_Crtost]

Thank you Pavel for your time. I tried, but nothing… If I’ll find a solution I’ll post here

[pbstasiak (Peter Stasiak)]

Hey I have used your solution on my website, and it seems to be working. however I have discovered quite significant lag in loading the website. it takes good 2 second to load it. I have animation on the load and non of them are showing due to the lag. I just winder, did I do something wrong or are there any ettigns which can speed thing up? cheers

[Andrew_Savsunenko]

Hey guys. For those who don’t want to mess a lot, here is the thing:

var lang = navigator.language;
const ls = localStorage.hasOwnProperty(‘languageState’);

if (lang==“uk-UA” && !ls){
window.location.href = ‘https://www.mysite/ua’;
localStorage.setItem(‘languageState’, 1);
}

basically, i just needed to redirect the user for the first time visit and that is it. So if the users browser is set to UA and it visit us for the first time, we would redirect him to /ua homepage, but if then he will change locale, etc. We give him the full freedom. Also, the native webflow locale switch work fine, so there is no problem with it.

Enjoy!

ps: for the proper check, run this on console, to get rid of languageState object.
localStorage.removeItem(“languageState”)