[TUTORIAL] Full Multi Language Site - Easy to set-up and to use!

Yep, I did everything that was shared, but it doesn’t work.

Can you share a read-only link?

Yes, ofcourse :slight_smile: https://preview.webflow.com/preview/janco-volk-rolfing-amsterdam?utm_source=janco-volk-rolfing-amsterdam&preview=79fe305ecb9615b9fad1bd0223662718

I need help with rich text block. Everything works except the rich text block.

First Problem:
As you can see in the screenshot, [[zh]] and [[en]] was added to the DOM. I don’t understand why. I can still switch the language, but [[zh]] and [[en]] will be added. They are not in CMS content.

Here is the read only link https://preview.webflow.com/preview/kingge?utm_source=kingge&preview=d77ed693d08aafb6c371a62708bf4be6.

Also the published link https://kingge.webflow.io/product/zh-yuan-zhu-xing-ntc-wen-du-chuan-gan-qi-en-cylindrical-ntc-temperature-sensor

Second Problem:
When you open my website, you can see all the texts in both languages showed up for a split of a second, then only the right language show. It’s quite annoying. Does anyone know how to solve this?

EDIT 1: The script really doesn’t like image in rich text. I tried to solve the first problem, but I have no luck. Either it will show all images from both rich text blocks, or it will show the images from correct language block, but with [[zh]][[en]] around it.

I sort of solved the second problem. Basically a white page is shown while the text is translating for a brief second so users don’t see both languages. It’s really a nasty hack, but I guess it sort of get the job done.

Hey mate, did you have any luck fixing this? I’m dealing with the same issue and have no idea how to solve this.


I actually ended up re-doing the whole thing. Was planning on doing a post about it, and it needs some cleanup before working on more than two languages, but this is the idea:

  1. Paste attached code in the Footer Code section of your site’s settings
  2. Change the DEFAULT_LANG to your own language (in ISO 639-1)
  3. Edit the languages in getELementsByClassName in changeLangTo(lang). (These are the class names we’ll be using later)
  4. Save
  5. In the Designer, structure content into div blocks depending on which language content they contain. No [[en]]English[[sv]]Svenska-stuff. So if you’ve got a text block and a button that have different text for different languages, wrap them together in a div block and give that div block the class english, then you make a duplicate with the translated content and give it the class swedish.
  6. Make sure to never style the swedish and english classes, cause they will be used for a wide variety of content

Changing language

  1. Make a button or link block
  2. Under Custom Attributes in the Settings (cog wheel), press the plus sign and set Name to whenClick and Value to setLang('en').
  3. Make sure to replace the en above with the ISO 639-1 code for whichever language you want to change to


<!-- Multi-lang support from gkdc.design -->
<!-- Based on work by forum.webflow.com/u/angro -->
      $(document).ready(function() {
          var anchors = document.getElementsByTagName('*');
          for(var i = 0; i < anchors.length; i++) {
              var anchor = anchors[i];
              anchor.onclick = function() {
                  code = this.getAttribute('whenClick');
          if (getLangFromStorage() && typeof getLangFromStorage() !== 'undefined') {
            user_lang = getLangFromStorage();
          else {
            user_lang = getLangParam() || getLangFromStorage() || user_lang;
                localStorage.setItem('lang', user_lang);
  	// SET DEFAULT LANGUAGE (ISO 639-1). IF UNSURE, SEE en.wikipedia.org/wiki/List_of_ISO_639-1_codes
    var DEFAULT_LANG = "sv";
    var LANG_REG_EXP = /\[\[([a-z]{2})\]\]([^\[]+)/g;
    var isStorageEnabled = ! (typeof localStorage == 'undefined');
    var user_lang = (navigator.userLanguage||navigator.browserLanguage||navigator.language||DEFAULT_LANG).substr(0,2);

    var getLangParam = function(){
      var arr = /lang=([a-z]{2})/g.exec(location.search);
      return arr ? arr[1] : null;

    var getLangFromStorage = function(){
      return isStorageEnabled ? localStorage.getItem('lang') : undefined;

    function setLang(lang){
      user_lang = lang;
          localStorage.setItem('lang', user_lang);
  	// RENAME swedishElements/englishElements IF YOU FEEL LIKE IT
  	// CHANGE WHAT'S INSIDE THE getElementsByClassName to your languages
  	// This needs a cleanup to support more than two languages, sorry about that
    function changeLangTo(lang){
      if (lang === "sv") {
        var swedishElements = document.getElementsByClassName("swedish");
        for (var i = 0, len = swedishElements.length; i < len; i++) {
          swedishElements[i].style.display = "block";
        var englishElements = document.getElementsByClassName("english");
        for (var i = 0, len = englishElements.length; i < len; i++) {
          englishElements[i].style.display = "none";
      if (lang === "en") {
        var swedishElements = document.getElementsByClassName("swedish");
        for (var i = 0, len = swedishElements.length; i < len; i++) {
          swedishElements[i].style.display = "none";
        var englishElements = document.getElementsByClassName("english");
        for (var i = 0, len = englishElements.length; i < len; i++) {
          englishElements[i].style.display = "block";

Thank for your work. I just want to ask if this works with images in rich text block. The original solution doesn’t work really well with images in rich text block.

That’s the beauty with this solution. It works by hiding and showing divs, so anything you can throw in a div (which in web development is more or less everything) will either show or hide based on the language preferences.

In practice, you could duplicate your entire site in one go, on version stacked atop another, and then just wrap each in a div with the respective language names, and it would show and hide based on language. But I’m not sure I’d recommend that.

Awesome, I will try it out later. You really save my day.

Mate this worked beautifully. I appreciate your help. Links are working fine :slight_smile: Thanks heaps.

1 Like

Really appreciate all this work and clear explanation thanks !

I have managed now to create a spanish/english site with static pages, but the its become very difficult to work with. Having a duplicate of each text element means the visual editor is very crowded. I have 2 navbars now that sit on top of each other.

Can someone recommend how to work this way ? I can no longer preview the page as the text elements take up more room than they will when I publish.


1 Like

Hi angro, and everyone else in this thread. Thanks so much for setting this up, it’s been extremely helpful.

I was hoping to get some help, because for some reason, the script never runs properly for my site the first time it’s loaded. See below

But if I refresh the page a second time. Everything works as intended. Is anyone else having this issue, and does anyone have suggestions on how to fix this?

Omg thank you so much for this. I’ll try to implement this next week, it’s exactly what i needed.

Where did you put the script? Try put it before tag

Is anyone here who figured out how to do it up for hire? I tried for a few times but not sure where went wrong. I am willing to pay someone to resolve for me. Please reply if interested. Thx

Will the button way work if I export this from webflow and upload to my personal host?

Thanks in advance.

I worked on this for like a month for my site. But now being ready to publish, but it’s very buggy. Some parts just don’t translate even though the code was put in properly. And some only partly and sometimes the code shows on the published website.

Could someone help me figure this out please?

The solution that started this thread doesn’t handle objects within objects (links in rich text blocks for example). See my post above for another solution.

There’s not really any solution to having everything being displayed double. On potential work-around is to set one language-class to display: none while editing, and then remembering to set it back when publishing.

I can’t read your post above, it seems to be withdrawn.