Smart rich text pop-up to direct visitors to correct language

[tette_engage]

I've tried looking for a way to direct website visitors to the correct language, but I can't find a solution. One would be to instantly direct visitors according to their IP, but that apparently requires some 3rd party. ( https://community.hubspot.com/t5/Blog-Website-Page-Publishing/Location-redirection-based-on-IP-addre... )

The solution I'm looking for, as possibly the 'easy' solution, is using a rich text module, as these can have smart rules. BUT! The most appealing result would be that this module would display as a pop-up. --> If a visitor is in Finland and lands on our site (with english as primary language) a pop-up would show "Looks like you're in Finland -> click here to proceed to the finnish site", with also the option to close the window and continue navigating the english site. However, if the visitor is not currently in Finland, the entire pop-up wouldn't show.

Is either option possible?

Regarding pop-ups I found this: https://designers.hubspot.com/blog/how-to-implement-a-modal-on-your-cms-site-pages , but it requires the user to click open the pop-up.

[dennisedson]

Hey @tette_engage!

This is interesting! I have a feeling that the easy solution is also going to take some development chops to accomplish

@stefen , @Kevin-C  how would you guys approach this

[stefen · Accepted solution]

@tette_engage @dennisedson looks like you can detect a users preferred language with javascript via 

navigator.language

 So, you would need a basic if statment in a script that runs on page load to check if that matches the current language on the site (probably easiest way to do that is to check the page's HTML lang attribute). If it does, you're good. If it doesn't, trigger the popup that has the language switcher in it.

[tette_engage]

Alright @stefen I've tried to solve my problem like this:

I made a 'landing index page' ( https://www.keino.io ) that only has two CTAs - one to the EN site and the other to the FI site.

I linked the following javascript, hoping it would redirect people with a finnish browser automatically to https://www.keino.io/fi :

<script type="text/javascript">

var language = navigator.language || navigator.browserLanguage;

//alert(language);

if (language.indexOf('fi') > -1) {
document.location.href = 'https://www.keino.io/en/';
} else {
document.location.href = 'https://www.keino.io/en/';
}
</script>

At the moment (when it begins to work) it should redirect everyone to https://www.keino.io/en , but as nothing happens I suspect I might've done something wrong 🙂 Any advice?

[tette_engage]

Okay, just remove <script type="text/javascript"> and </script> to get that to work 🙂 Now I just need to tweak the script to keep the user at the index page if the language isn't 'fi'..

[cathalhopper]

Hey @tette_engage  - just thought I'd weigh in here if you're still working on that 🙂

There are a few ways to do that logic - a simple way would be having a separate script per page if that's an option
On the EN page have
if  (language.indexOf('fi') > -1) {
document.location.href = 'https://www.keino.io/fi/'; 
}
No need to use an else, if the browser language is fi it will redirect to the finnish page, or just remain on the English page.

And on the flip side you could have on the FI page:
if  (language.indexOf('fi') == -1) {
document.location.href = 'https://www.keino.io/en/'; 
}
If the language of the browser is not FI go to EN page, no need for an else as we're already on the Finnish page

Assuming you're running the same code on both pages instead, which it looks like, you could do something like this instead:

if (document.location.href == "https://www.keino.io/en/" && language.indexOf('fi') > -1) {
document.location.href = 'https://www.keino.io/fi/'; 

// if we go to EN page but browser langauge is FI > go to FI page
}

else if (document.location.href == "https://www.keino.io/fi/" && language.indexOf('fi') == -1) {
document.location.href = 'https://www.keino.io/en/'; 

//if we go to FI page, and browser language is not FI > go to EN page
}

We don't need to have any other statements, because the final alternative is that we're already on the EN page, and the language is not FI, so we don't want to be redirected anywhere, because every other language should be on the EN page

You could spell this better adding in a variable like let browserURL = document.location.href; and then using that variable in your if statements, although there are only two checks so it's not a big deal .

Hopefully this helps 🙂

Cathal

[tette_engage]

Thank you! I removed the else-statement and everything works now 🙂 I appreciate @cathalhopper  your suggestions, but I'm inclined to leave this at the moment as is, because there are lots of people (like myself) who obviously live in Finland, but prefers to have the browser language as english. And if I had a script that 'forced' users to be on EN or FI pages... well I dont think that would be good 🙂 I.e. I want to nudge the users toward the presumably correct content, but not force them to stay there 🙂

[cathalhopper]

Hey @tette_engage , you're absolutely right, that use case hadn't come to mind yesterday at all.

It's great to hear it's working as you'd like, I did want to mention in case you revisited that in the future you could store a cookie that tells if a contact has been redirected or not, and if they have then you do not redirect them again.

You'd have to add in a function to read cookie values to check that, and then add it in in the if statement evaluation which I can see adding up to be a bit of work, but would be one way of managing that if you were to change it in the future 😛

I hope you have a good weekend 🙂

Cathal

[tette_engage]

@cathalhopper wow, really? I need to look into that when I get all our stuff up n running 😛 Thanks!

Have a great weekend!