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.
The thing you said about display:none, is this something you are saying while I am working in the editor? Cause thats not what I am talking about. I am talking about codes showing up in the published site.
I’ve written an entire guide above. Post 50 in this thread.
@angro @gkj Thanks for providing this solution. I got it to work, but I get some weird flickering when loading and refreshing the site. Any idea what’s wrong here?
https://www.useloom.com/share/d3023f7ace2446cb815f8c3079c32887
Thanks a lot in advance.
Just recognized it’s also happening on your example: http://multilinguale.webflow.io/
@Rodolfo_Sarno Any chance you could share the exact custom code? I’m not getting it to work, driving me nuts
To all, especially @angro @memetican @dididi @gkj, thanks a lot for all your work and support!
As being excited but still pretty new to Webflow, I really appreciated finding your solution(s) and let me complete our multilingual projects.
As I found replacing text nodes depending on tags [[lang]] was a bit “complicated and heavy” for simply switch elements on the page, I’ve work a bit on adapting/optimizing the script to make it work only for replacing elements only based on “classes” basis (and not at all on the principle of tags [[lang]]).
So here is my code (inspired by yours and simplified) to manager multilingual content, to paste on Footer Code:
<script>
// Define default language
var defaultLanguage = "fr";
// Detect storage
var storage = ! (typeof localStorage == 'undefined');
// Determine language
var language = (navigator.userLanguage||navigator.browserLanguage||navigator.language||defaultLanguage).substr(0,2);
// Detect sent language
var sentLanguage = function(){
var arr = /lang=([a-z]{2})/g.exec(location.search);
return arr ? arr[1] : null;
}
// Detect stored language
var storedLanguage = function(){
return storage ? localStorage.getItem('lang') : undefined;
}
// Set language
var setLanguage = function(lang){
language = lang;
if(storage){
localStorage.setItem('lang', language);
}
applyLanguage();
}
// Apply language
var applyLanguage = function(){
// Show/Hide elements depending on class
if(language === "en") {
$(".french").hide();
$(".english").show();
}
if(language === "fr") {
$(".english").hide();
$(".french").show();
}
// Show/Hide elements with autolang specifier
$('*[autolang]').hide();
$('*[autolang="' + language + '"]').show();
}
$(function(){
// Define language
language = sentLanguage() || storedLanguage() || language;
// Detect stored language
if(storage){
localStorage.setItem('lang', language);
}
// Switch language on click
var anchors = document.getElementsByTagName('*');
for(var i = 0; i < anchors.length; i++) {
var anchor = anchors[i];
anchor.onclick = function() {
code = this.getAttribute('whenClick');
eval(code);
}
}
applyLanguage();
});
How it works: duplicate all elements you need to have in two languages and applied them the needed language class.
This script manages:
.english and .french) applied to elements (whatever it is a text, div, section…), so you can manage multilingual content on every type of element, everywhere in the site (excepts for placeholders on inputs), so working only with text fields is not mandatory, and even image switching with autolang attribute (but I did not test/use it)whenClick attribute and setLanguage('XX') value to any element (button/link are not mandatory)?lang=XX)One more thing : to manage multilingual content on “mandatory” buttons needed by Webflow (“Submit Button” in form, cart, etc.), where you can’t insert 2 different texts with language class to each of them, you can add a class to the element Submit Button (or similar) to apply position: absolute, height: 100%, width: 100%' and z-index: 1 to place the mandatory button on all the surface of the button. Don’t forget also to apply position: relative to the div surrounding the Submit Button.
Then, just add the needed element/text with language class on each inside the button to make it multilingual.
One more… more… thing : to manage multilingual switch works good with Webflow pagination which makes the page reload and not staying in the same section, so I’ve use the solution provided by @forresto (Seamless pagination with "pjax") but this tweak was making the language resetting to default one, not showing the current language selected… a mess.
So I’ve added the following code after the one about multilingual:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>
<script>
var containerSelector = '#ajax';
$(document).pjax(
'.w-pagination-wrapper a',
containerSelector,
{
container: containerSelector,
fragment: containerSelector,
scrollTo: false,
timeout: 0,
}
);
$(document).on('pjax:end', function() {
Webflow.require('ix2').init();
applyLanguage();
});
</script>
I’ve used the code given then just add the applyLanguage to make it work after the pagination changes.
Hope this will help!
Hey @jensvahle
I’ve managed to implement it using the same custom code @gkj shared above (Post 50).
The trick is how you set up your classes and layer them. You have to duplicate the divs and give them a class name to the correspondent languages.
Cheers
Looks so simple but its not working for me 
https://multilanguage-test.webflow.io/?lang=de
But gkj’ s solution is working great !
BTW this is, in my opinion, a very bad approach for SEO optimization. You end up with two H1 tags and its one the most important SEO rule to have a only one H1 tag on a page.
Where exactly do i set the language class to display: none?
Thank you so much for the solution though, works perfectly!
Hi guys.
I’m also trying to get this solution to work in my website but with no luck.
I’ve installed all the snippets but both [[pt]] and [[en]] are showing and the buttons doesn’t work.
Can you please help me?
Here is the link to my website:
Read-only version:
https://preview.webflow.com/preview/yellownew?utm_source=yellownew&preview=5c95c0e864f0f326e35e59164ecf8de9
Thank you very much.
This is absolutely awesome! Thanks so much to everyone who contributed—I will be implementing on a very large CMS site (5000+ CMS items) in the next few days, fingers crossed! 
I just discovered this post, but I have been reading Google search help on the topic which leads me to believe that multiple languages on one page is not a good approach.
Google recommends using different URLs for each language version of a page rather than using cookies or browser settings to adjust the content language on the page.
I am no expert, so please advise me if I am off track,
The script-using solutions described here are useful to address an urgent need, but even before being not ideal (polite way to say bad, in this case, actually) for SEO, they’re an accessibility nightmare.
In short, a prerequisite for your page to be compliant with screen readers is that it must work with JS (and CSS) deactivated.
Multilanguage implies localization, not simply translation. Localization concerns:
Localization is big, vast, and the one who should handle it is Webflow, because anyone else is hardly in the appropriate position to do so. Hopefully this is coming within a year.
Hey guys,
I’m Eugene from Weglot (a multilingual solution to translate any website). First of all, congrats for the creative ways you found to do a multilingual website with Webflow!
We recently launched a new way to make any Webflow website multilingual. It’s simple to install, SEO compliant and easy to manage. We got our first few users and the feedback are great.
We’ve just set up a demo website here: https://www.weglot-translate-wbflow.com/
And a simple setup guide here: https://weglot.com/integrations/translate-webflow/
To go more into details a little bit, here is the way Weglot works: Weglot scans your website content, send it to our translation API and the API sends back the translations. This makes it very light and fast. You have 2 ways of implementing it:
You can try Weglot for free and we also have a free plan for small websites translated in 1 language.
We are new to Webflow so we’d be happy to have your feedback!
Cheers,
Eugene
Hi,
Thanks! It works well and I had almost fully implemented it in my project. Then I found out that unfortunately it doesn’t work in combination with tabs.
Hello,
This looks really nice and indeed, less of a hack and better for SEO. But will this also work with a webflow Ecommerce site? So will i have a complete functioning shop, in both languages?
And will this also translate things that you need to fill in, in the webflow settings. Like the order button or the text shown when a product is out of stock? In other words, will it literally translate all text that is visible for a visitor?
Thanks in advance!
Oh and another question: will this also work with complete seperate url’s intead of subdomains? So for instance: www.website.nl for Dutch and www.website.com for Englisch?