Hubspot Language Switcher

Develop, Build & Integrate CMS Development
1

Good day fellow developers!

On HubSpot, we saw the following language switcher (click to open) and thought it would be cool to create a custom module that is similar to that one.

There are some challenges, though:

And when somebody is switching from a page in English to Spanish, we would like to make sure they get redirected to the correct page.

I.e.

Home Page | PageGroup (English)
Home Page | PageGroup (Spanish)

Any idea how we can accomplish that?

2

Hi @subin

First you need to pick a default language for your domain. Go to Content » Content Settings » Content Languages and pick a default language.

In your example, if English is default, go to the Spanish version of the page » Edit » Settings and click the Translation Settings link (in your second screenshot).

Pick the “Choose a master” option and set the language of the current page to Spanish in the first field and find the corresponding English page in the second field.

This will have a number of consequences, all of which you can read more about here »

You can then add the language switcher module to your page template (simply follow the guide in the above link). The switcher will only be displayed on pages that have a translated version.

That’s it!

Let me just share the issues I’ve stumbled upon in working with web page translations for my company website. And this might be slightly off topic, but I’ll share it anyway because I feel that the documentation wasn’t clear on the full effects of translating pages.

Setting the default language of your domain will set the language of all your current and new website and landing pages on that domain to the default language. In my case it was Swedish. Everything fine so far. However, when I made English and German translations of the website I realized HubSpot is doing something called “automatic link rewrites”.

I realized that because I had a menu in the top navigation where the user could change the language. Note that this was not the language switcher module described above, it was simply a list of links to the startpage in each of the different languages (Swedish, English, German).

The problem is that the automatic link rewrite changed the URL that my links were pointing to like this:

  • If you were on a Swedish page, e.g. About us, and want to change to German, it would take you to the Swedish startpage.
  • If you were on the German About us page and clicked the link for Swedish, it would take you to the German startpage.

Ok, so I tried making the startpage as separate pages rather than translations, and then the language links worked fine. However, now that they were not translations, they all had the default language: Swedish, and so HubSpot assumes you are only interested in Swedish content. So when you are on the startpage and want to click the About us link, it will be pointing to the Swedish version of that page, whether you’re on the Swedish, English, or German startpage. This meant that all links in our top menu would be pointing to a Swedish page. And there’s no way to turn the link rewrites off.

3

Dear Shamash,

Thank you so much for the comprehensive answer. This has given me a broader perspective on the possibilities. On our end, we will be trying to implement the language functionality the way you’ve described and if stumbled upon any issues (or possible solutions/workaround), will share with you here.

Thanks

4

@subin I actually found and implemented a workaround. Not sure if it’s the best possible solution but it was the best I could come up with at the moment. Maybe you’ll also find it useful ¯\_(ツ)_/¯

I have changed the links in the language menu to point to URL:s that are currently not used by any page. It could be anything really, but I went with istone.com/english, istone.com/deutsch, etc. and then I set up redirects in the COS URL Mapping tool from these URL:s to the actual start page for each language (istone.com/en, isonte.com/de, etc.).

It’s not fool proof (if you would add a page in the future with that URL it would override the redirect) but it works for me at the moment.

Honestly I don’t understand the purpose of the automatic link rewrites so if anyone from HubSpot could explain the thinking behind it I would be happy. But maybe that’s a whole different discussion…

5

I am interested in implementing this as well.

I’m looking to have it in the advanced menu as a button ( EN / FR )

Custom JS implementation should be an easy fix to change the content on the page on-the-fly. That does not of-course result in the most accurate translation but it does provide a reduction in the work needed. The Google translation API costs money, but it should be a good solution and what I plan to implement.

6

This is how we solve that problem on a custom menu:

<a href=“{{ company_domain }}” rel=“alternate” hreflang=“en”>English version</a>

Every language have a code, so you can send any link to a any page on a specific language. In this example we send that link to our english home page.

Captura de pantalla 2018-06-20 a la(s) 18.18.00.png
Captura de pantalla 2018-06-20 a la(s) 18.18.00.png982×150 18.5 KB

I hope this help you guys.

This is the site where we implement that: Froztec: Industrial and commercial refrigeration

7

When you’re in a specific language and you create links, hubspot will automatically append the language code behind the url.

You can actually stop the rewrite of the urls by adding classes to the links/lists like this:

<ul id="language-menu" class="hs-skip-lang-url-rewrite">

This is how I’ve set up my custom language switcher for english, chinese (china), and chinese (HK):

{% set eng_url = "/"~content.slug %}
{% set chinese_trad_url = "/"~content.slug %}
{% set chinese_simplified_url = "/"~content.slug %}
{% if content.translated_content['en'] %}
{% set eng_url = "/"~content.translated_content['en'].slug %}
{% endif %}
{% if content.translated_content['zh-cn'] %}
{% set chinese_simplified_url = "/"~content.translated_content['zh-cn'].slug %}
{% endif %}
{% if content.translated_content['zh-hk'] %}
{% set chinese_trad_url = "/"~content.translated_content['zh-hk'].slug %}
{% endif %}
{% endif %}
<ul id="language-menu" class="hs-skip-lang-url-rewrite">
<li><a data-language="en" href="{{ eng_url }}">English</a></li>
<li><a data-language="zh-cn" href="{{ chinese_simplified_url }}">简体中文</a></li>
<li><a data-language="zh-hk" href="{{ chinese_trad_url }}">繁體中文</a></li>
</ul>