▼
Streaming live at 10am (PST)

Language switching Button/Link that works

#1

Webflow does not support multi-lang and so we will have to do it in a rather manual way. Is there an easy way to add language switching button or links that can stay on the same content but not jumping to home of another language? by javascript or else?

My site’s primary language is English, and will have other languages like Chinese, Japanese and French. The English site is located at root, and pages of other languages are put inside folders. The site structure is as below:

( English, at root )
/ index.html
/ contact-us.html

( Chinese )
/cn/ index.html
/cn/ contact-us.html

( Japanese )
/jp/ index.html
/jp/ contact-us.html

( French )
/fr/ index.html
/fr/ contact-us.html

What I would like to achieve is:
(1) Put the language switch links on every page (as “Symbols”): ENG / 中文 / 日本語 / French
(2) When people visiting /contact-us.html and would like to view it in Japanese, they click the 日本語 link and will go to /jp/contact-us.html but not jump to /jp/index.html.

I came across this problem before and found this post, but no one was responding. So, I started this new post to better address the issue.
https://forum.webflow.com/t/language-switcher-in-javascript-localization/28076

Everyone, Webflow team, @cyberdave, @PixelGeek, @samliew, @Waldo … Any hint to handle language switching links so that changing site language will stay on the same content? A bit urgent.

Thanks a million !!!

#2

Hi, anyone could offer some hints or help?

Thanks.

#3

For what its worth you may try the solution from here. The multilanguage ability is long overdue in the WF :frowning:

#4

Looks amazing, but I think this is not a good solution for larger scale website.

Actually, I think Collection, the use of “Symbols”, and putting pages of different lang in such as “en” “jp” “cn” would be good enough for building a proper multilingual website.

The only problem frustrating me is I cannot find a way to deal with the language selection link/button.

( Cuz clientS keep requesting changing language should stay at the same content but not just jumping to “Home” of the selected language… Nightmare…)

#5

Yes, I can see how this is a hard thing to do. You will have to make pairs of pages for the two languages and then call the corresponding page on each page while pressing the switch. Someone way better than me is needed to come up with the JavaScript necessary for this.

#6

I don’t know about the javascript but I’m doing it by hand. IE adding a link to the other page for each page. For a CMS, you could add a ‘link’ field and bind it. The way you used to have to set up pagination.
A bit of a fiddle but not too much depending on how many pages you’ve got. It’s something people should be able to do themselves in the editor as well.

1 Like
#7

It is a basic function when using Wordpress plugins, such as WPML and Polylang, which allows switching language and keeping corresponding content.

A proper website should behave like this.

#8

@anthonychan2509 I had the same problem and recently came across WeGlot, which does exactly what you want: https://weglot.com/integrations/translate-webflow/

You just need to put a Javascript snippet in Custom Code under Project Settings and it will add a language selector at the bottom right corner of the viewport, which you can later customize with CSS. By default, it will automatically translate the text for each page, but you can also add manual translations for a perfect result.

Once you’re browsing a translated page, just click on any links and it will take you to the corresponding translated page.

There’s also a more complex setup where, by adding some CNAME values, you can also get a subdomain for each of the languages the site is translated to.

I know it sounds like I’m selling something, but I’m not! :smiley: I’m just a regular Webflow user who had the same problem for more than a year trying to add multi-language support to my site, have also tried Localize.js without success, and now I’m happy that WeGlot got me out of the weeds.

I hope it helps!

1 Like
#9

Also @anthonychan2509 if you 1) want to tweak the options for the language switcher, here are the docs, and if you 2) want to hide the built-in language switcher but want to assign its functionalities to other elements on the page with your own HTML, here’s the chapter in the docs.

I know this answer may come late and you must have found a different solution, but I’m sure this will be useful for other members of our community.

#10

Hey Chardot,

I’m Eugene from the Weglot team. Just came across your answer, thank you for recommanding Weglot!!

Have you tried to implement the subdomain integration of Weglot? Let me know if you have any feedback on integrating Weglot on Webflow, we are new to Webflow so any comment would be useful!

Thanks
Eugene

#11

@Chardot
Thanks a lot for your tips, especially from a weglot user!

@eugene_weglot
I did some basic testing. Everything’s really fine and works great. But there is one really really big mistake with the language codes. I raised this issue to your support team but without luck.

It’s not very wrong to use zh for Simplified Chinese, but it is more correct to use “sc”. (zh stands for Chinese, not distinguishing simplified or traditional Chinese, nor Country) Anyway, it’s fine.

But, Traditional Chinese is definitely not “tw”… “tw” stands for Taiwan. It is seriously wrong in Hong Kong and China, no proper corporate client could bear this mistake to put “tw” on the URL for Traditional Chinese. This is the biggest hindrance to me at this moment.

It is more appropriate to use “tc” for Traditional Chinese.

I know Weglot is following the ISO stuff, but I guess it was established too long ago. And I know it is hard to change, but is it possible for Weglot to add the code “tc” soon? I am not sure about other languages, but Chinese is really a special case.

Thanks.

#12

Hi @eugene_weglot, Thanks a lot for the information. It’s useful.

Just see that you posted a message on another post: Language switching Button/Link that works Here copied the same response I made on that post. Thanks.

I did some basic testing. Everything’s really fine and works great. But there is one really really big mistake with the language codes. I raised this issue to your support team but without luck.

It’s not very wrong to use zh for Simplified Chinese, but it is more correct to use “sc”. (zh stands for Chinese, not distinguishing simplified or traditional Chinese, nor Country) Anyway, it’s fine.

But, Traditional Chinese is definitely not “tw”… “tw” stands for Taiwan. It is seriously wrong in Hong Kong and China, no proper corporate client could bear this mistake to put “tw” on the URL for Traditional Chinese. This is the biggest hindrance to me at this moment.

It is more appropriate to use “tc” for Traditional Chinese.

I know Weglot is following the ISO stuff, but I guess it was established too long ago. And I know it is hard to change, but is it possible for Weglot to add the code “tc” soon? I am not sure about other languages, but Chinese is really a special case.

Thanks.

#13

Hi @anthonychan2509,

Thank you for your feedback. Happy that everything is working great!

We are aware of this issue and it is on our roadmap to find a way to fix this but I don’t know when. I’ll let you know when it is fixed.

Eugene