topic Re: How can I get multi-language pages to switch based on browser language settings? in CMS Development

How can I get multi-language pages to switch based on browser language settings?

DigitalCloud — Tue, 13 Jun 2023 09:07:19 GMT

I have a website on HubSpot where I've created multi-language variants on some of the pages. The default pages are for the United Kingdom while the variants are for users in the United States.

I understand that HubSpot does not switch languages automatically based on IP or browser settings. I want the pages to switch to the US version of the page when the user's browser language settings are set to the US. Not every page, however, has a US variant.

I tried to implement this javascript code to achieve that:

// Check if the browser language is supported, otherwise redirect to the default language
if (supportedLanguages.indexOf(userLang) === -1) {
window.location.href = window.location.origin + '/' + defaultLanguage + window.location.pathname;
}
</script>

I tested it by changing my browser language settings to the US and then clicking on the default link. The link loads incorrectly as https://example/en-us/en-us/blog/examplepost instead of https://example/en-us/blog/examplepost

Any help or insight would be much appreciated.

Re: How can I get multi-language pages to switch based on browser language settings?

RDickman — Tue, 13 Jun 2023 12:31:52 GMT

Sure, I can help you with that. Here are the steps on how to get multi-language pages to switch based on browser language settings: Go to the Design tab in HubSpot. Click Edit on the page that you want to add language switching to. In the Code section, add the following JavaScript code:

var userLang = navigator.language || navigator.userLanguage;
var supportedLanguages = ['en-us', 'en']; // Replace with your supported languages
var defaultLanguage = 'en-us'; // Replace with your default language

Use code with caution. Learn more Save your changes. Test the page by changing your browser language settings to a supported language and then clicking on the link. The page should now load in the correct language. Here are some additional things to keep in mind: The JavaScript code above will only work for pages that have a US variant. If you have pages that do not have a US variant, you will need to add a separate JavaScript code snippet for each of those pages. The JavaScript code above will not work for pages that are accessed through a mobile device. If you want to make sure that the language is switched for mobile devices as well, you will need to use a different method, such as using the Accept-Language header. I hope this helps!

Re: How can I get multi-language pages to switch based on browser language settings?

Jaycee_Lewis — Tue, 13 Jun 2023 21:03:48 GMT

Hey, @RDickman It looks like there are some inaccuracies in your reply.

The original code posted by @DigitalCloud, already includes the JavaScript code you mentioned.

Based on my level of understanding, the issue seems to be related to the appending of both the default language ('en-us') and the user's language to the URL, resulting in an incorrect link. @Anton @JBeatty @alyssamwilie @MatthiasWeber @BarryGrennan, do you have any code examples you can share with @DigitalCloud? On how they can tackle this without the unwanted “doubling”?

Regarding the point about mobile devices and the Accept-Language header, the JavaScript method using navigator.language should work for mobile browsers as well as desktop browsers, since this is a standard property of the navigator object in JavaScript.

Lastly, the point about needing a separate JavaScript code snippet for each page that doesn't have a US variant might be misleading. Most scripts should be able to handle this case by checking if the user's language is supported, and falling back to the default language if it isn't.

Again, thanks for your contribution, and I hope this clarifies some points! — Jaycee

Re: How can I get multi-language pages to switch based on browser language settings?

alyssamwilie — Wed, 14 Jun 2023 05:00:59 GMT

The issue is that the code isn't checking if en-us is already in the path, so when it is you end up with the language path in there twice. Here's how I would change the code to get it working properly:

Re: How can I get multi-language pages to switch based on browser language settings?

DigitalCloud — Wed, 14 Jun 2023 08:43:29 GMT

Hi Alyssa

Thank you so much, this is really helpful😊 The only issue is that our default UK pages do not load with the language code in the URL. So for the UK, the page should load as https://example.com/blog/examplepost and the US version should load as https://example.com/en-us/blog/examplepost .

The code currently redirects the US versions correctly, however when the browser language settings are set to UK English or anything else is the URL generates as https://example.com/en/blog/examplepost when it should rather be https://example.com/blog/examplepost.

I would appreciate your help further as every tweak I have tried has not been successful.

Re: How can I get multi-language pages to switch based on browser language settings?

alyssamwilie — Wed, 14 Jun 2023 12:23:15 GMT

No problem. What we can do here is add some more checks in our redirect.

1. If the user language is not one of the supported languages--check if the current path is equal to our split path and, if not, go to the default URL

2. If the user language IS in the supported languages, first check if it's our default language. If it is, then check if the current path is equal to our split path and, if not, go to the default URL. If it's not our default language, go the languaged-path url.

Re: How can I get multi-language pages to switch based on browser language settings?

DigitalCloud — Thu, 15 Jun 2023 07:16:50 GMT

Hi Alyssa

Do I need to add the above snippet to the previous one? When I use it and my browser language settings are set to English(UK) the URL now loads up as https://example.com/en-gb/blog/examplepost , When it should ideally load up as https://example.com/blog/examplepost.

Re: How can I get multi-language pages to switch based on browser language settings?

alyssamwilie — Thu, 15 Jun 2023 11:25:05 GMT

You should replace the previous snippet with the new one.

Does your page have one of it's languages set to English (UK)?

Re: How can I get multi-language pages to switch based on browser language settings?

DigitalCloud — Mon, 19 Jun 2023 07:21:07 GMT

Hi Alyssa,

The snippet works perfectly when my browser settings are set to; English (United States), English, Afrikaans, German etc. The URL only changes when the browser language settings are set to English (United States), Which is exactly what I want.

However, when the browser language settings are set to English (United Kingdom) the URL is generated with the ''en-gb'' language code added to the pathway. The page that I am testing it on is set to be an English-United Kingdom language variant in HubSpot. However, it is a primary page and the URL does not include the language code in it. So it should generate as https://example.com/blog/examplepost. And not https://example.com/en-gb/blog/examplepost.

Re: How can I get multi-language pages to switch based on browser language settings?

alyssamwilie — Tue, 20 Jun 2023 15:16:07 GMT

If English (United Kingdom) is your default language then in the code you need to change the defaultLanguage variable to "en-gb" instead of "en" as en-gb is the locale code for English (United Kingdom), not en.