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

Okay, thank you I get it now.

Is there a specific reason that it’s not possible to use the tags with rich text in combination with the CMS? Is it about the other content types that could be embedded in rich text fields?

I guess for longer text it is more convenient for the editor to have separate fields but the ease of use of the tag-solution would be nice to have.

That’s because Webflow creates a div for rich text block, so in the code it looks like this:

Div
Title
Paragraph
Paragraph
/Div

And the code can’t get applied the good way because the content of a rich text block can be anything.

@jgautier You can add the class .english to every plain text element itself and it should work
for Rich Text you need the other script and add the class .english-rich-text to the right text itself.

Look at the Tutorial there is the script :wink:

2 Likes

Hey, Angro. Thanks for this. Works great. Unfortunately, I’m having trouble implementing this on nav links. Using the button method, two of my nav links (with the exact same class) show the [[en]]/[[es]] tag. Have anyone experienced this as well?

EDIT: The problem was that I wrote the language tag on caps. Silly me.

Thanks for this awesome solution, again.

2 Likes

@angro This looks great, thanks for the creative solution.
I’m using the above script (in your original post), and running into a few small limitations I’m hoping are easy to solve, specific to forms.

Is it easy to tweak the code so that it can apply the multilingual logic to submit buttons, and input placeholders? Currently I see the encoded form in both.

INPUT FIELD PLACEHOLDER TEXT

image

image

FORM SUBMIT BUTTON TEXT

image

2 Likes

I had some difficulties with the rich text part of the solution, so I’ve found a different approach that is working better for me in cases where whole elements need to be language-swapped.

e.g.;

  1. All language-specific CMS-bound elements
  2. All language-specific rich text elements
  3. Any localized images or artwork

SOLUTION

In brief, I’m adding an autolang custom attribute to any elements that are language-specific, which specifies the 2-letter iso language code, e.g. autolang="zh", and then showing or hiding those elements accordingly.

For example, I might have…

<img src="english-photo.jpg" autolang="en" />
<img src="japanese-photo.jpg" autolang="jp" />

In the applyLang() function, I’ve added a small snippet to the end which hides every element with an autolang custom attribute, and then shows only the ones for the current language.

// show or hide elements with autolang specifier 
$('*[autolang]').hide();
$('*[autolang="' + user_lang + '"]').show();

This is working great for me because CMS-binding is very tidy, non-localized elements are unaffected, and I don’t need to muck with classes ( IMO; using classes as js selectors makes styling more complicated in Webflow ).

These two solutions are working great together in my project;

  1. For lightweight text items like headings and labels, use the [[en]] style indications. Avoids element duplication and is easier to work with in the designer.
  2. For heavier or more complex items, like rich text elements, CMS-bound elements, and image elements, use the autolang custom attribute approach.

HOW TO USE

Replace your applyLang() function with this variation;

var applyLang = function(){
    globalDict.forEach(function(v){
        $(v.elm).html(v.dict[user_lang]);
    });

    // show or hide elements with autolang specifier 
    $('*[autolang]').hide();
    $('*[autolang="' + user_lang + '"]').show();
}

For any elements you want as language-specific, select the element. For compound elements like Rich Text, make sure to select the whole element…

image

And then add an autolang custom attribute, specifying the language that the element represents.

image

5 Likes

Thanks again to @angro for starting this thread.
I’ve launched my first site using this approach, which is English + Chinese-

https://cb-dairy.webflow.io/

And, to centralize the multilingual code and make it accessible, I’ve dropped it on Git, with source and documentation-

You can easily add it to your site in your site settings, as custom footer code;

<script src="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-multilingual@0.2.0/dist/webflow-multilingual.js"></script>

@angro Let me know if I can add you to the project, you can connect with me at mike@sygnal.com

Important note on Chinese support-

It turns out that a new browser has entered the market that I was unware of, courtesy of Alibaba’s Jack Ma. UC Browser has 5% worldwide market share and 15% of the mobile phone market in China, (appears to be dropping recently).

This current version of the multilingual library doesn’t work with it. There are other major UC Browser limitations, like a lack of CSS grid support, so hopefully UC Browser will either catch up soon, or fall into obscurity.

With this, my current improvements wishlist for the webflow-multilingual library is-

  1. Support for SUBMIT button text
  2. Support for INPUT placeholder text
  3. Support for UC Browser (Chinese)

If anyone more familiar with js than myself is keen to assist, message me!

4 Likes

Nice work!

However, when opening the website, it first shows both languages and the tags. Only after I have selected either of the two languages, it only shows that specific language.

3 Likes

Hello.

I create github repo and nom for this.

I didn’t notice @memetiocan 's repo so if community want to one repo I’d like to do that.

Anyway, my package can support some other feature.

  • Not need jQuery. So maybe outdated browser can not work
  • Support class. Like <p class="wm-en">hello</p>
  • Support language rotate button with data attribute which is standard way
  • Npm CDN. Just add custom code like below
    • <script src="https://unpkg.com/webflow-multilingual/webflow-multilingual.js"></script>

Check this out.

5 Likes

I tried implementing this solution on my website but it doesn’t seem to work, could someone take a look? It would be greatly appreciated!

https://preview.webflow.com/preview/breakfastboys?utm_source=breakfastboys&preview=57ea7e0c9a97190c3af64ff23820dba9

What I have done so far.

I added the script to the “footer code” in the “Custom code”-section in site settings.

Then I added the language shortcodes “[[en]]” & “[[sv]]” to the h3 element in the hero.

Then I tried to add the extension “?lang=en” to the url. But both of the text blocks are still displayed.

What am i missing?

1 Like

I got it to work using the github-solution that “dididi” created.

Hi for text or richtext how do i add a linebreak? all the text in different lines are all sticking together . thank you

Thank you very much, this is great. I’m already using it. thank you to @angro and @memetican.

Going a step further, has anyone find out a solution to implement multilanguage in SEO titles and description? If someone has sorted something out, would be the happiest Webflow user.

@mrmtta If you need to go that far with localization support, you will likely want a localized domain name as well to max out your SEO. I think this is the point when it would make more sense to run separate localized versions of your website.

I have same problem than Joris posted earlier. I guess a problem is when browser’s language is different than the site supports it will show both languages. Any ideas how to fix this?

Hi everyone,

Great workaround! How friendly is it to SEO? Any influence on the score?
thx

This works great for me so far. Only thing I get it work is that if I have a hard line break in my text, only the first line after [[en]] will get recognize and show up in my page. Is there any way to fix this?

I solved this. I use Rich text block instead of normal paragraph block. Works great.

1 Like

I have tried to implement this, but it doesn’t work for me.

I even tried the github and it also didn’t work.

Can you help me out? @angro, anyone?

Anyone else having issues with links in text blocks and rich text blocks? My links disappear if I use a language tag.