Make Weebly Multilingual (and other web builders)

19.06.2017 11:18:13

This blog post explains how to create a website in multiple languages using Weebly. Actually, the method is quite generic so it should work with other WYSIWYG web builders such us Godaddy, 1and1, Wix, Jimdo, etc. or at least give you a clue about how to solve the same problem on other platforms.

It all started because we wanted to help one of our customers that uses Weebly with our Booking System to have it's site working on multiple languages.

In the case of Weebly, you can only have the menu in one language. That's the way it is.

So, we created some javascript code that lets you change navigation text and links according to your language needs. It's so cool we just want to share it with the world :-)

We also wrote some other javascript to make a homepage redirect which is user friendly and good for SEO.

Step 1: Create all your pages

It's better to have all the pages created before dealing with javascript. Most web builders have an option to show and hide a particular page on the web menu.

You should leave the pages of your main language in the menu, and hide from the menu all pages in all other languages. Here is a screenshot of our customer's website to understand better the process

On this example, the website have 7 pages per language (35 pages in total). The entire navigation is made with the pages in Spanish, and pages in other languages are hidden.
 

Step 2: Update JS code for changing navigation links

 
Here is the javascript code we used in your website. You will have to change it according to your own website, but it is fully commented so you see how it works 
<script>  
     /* add all existing links here: language, uri and anchor. Important to keep the same order...
 the script will replace the first link in the navigation with the firstlink on this list that matches 
the language. Do not need to add links for default language*/  
   var flagSymbol = 'Lang'  
      var linkTranslation = [  
           ['en','/', flagSymbol],  
           ['en','inicio-en.html','Intro'],  
           ['en','jeep-safari-en.html','Jeep Safari'],  
           ['en','vip-tour-en.html','VIP Tour'],  
           ['en','-servicios-en.html','More Services'],  
           ['en','media-en.html','Media'],  
           ['en','contacto-en.html','Contact'],  
           ['en','reservar-en.html','Bookings'],  
           ['de','/', flagSymbol],  
           ['de','inicio-de.html','Startseite'],  
           ['de','jeep-safari-de.html','Jeep Safari'],  
           ['de','vip-tour-de.html','VIP Tour'],  
           ['de','-servicios-de.html','Dienstleistungen'],  
           ['de','media-de.html','Medien'],  
           ['de','contacto-de.html','Kontakt'],  
           ['de','reservar-de.html','Buchungen'],  
           ['fr','/', flagSymbol],  
           ['fr','inicio-fr.html','Intro'],  
           ['fr','jeep-safari-fr.html','Jeep Safari'],  
           ['fr','vip-tour-fr.html','VIP Tour'],  
           ['fr','-servicios-fr.html','+ Services'],  
           ['fr','media-fr.html','Médias'],  
           ['fr','contacto-fr.html','Contactez'],  
           ['fr','reservar-fr.html','Réservations'],  
           ['nl','/', flagSymbol],  
           ['nl','inicio-nl.html','Intro'],  
           ['nl','jeep-safari-nl.html','Jeep Safari'],  
           ['nl','vip-tour-nl.html','VIP Tour'],  
           ['nl','-servicios-nl.html','+ Diensten'],  
           ['nl','media-nl.html','Media'],  
           ['nl','contacto-nl.html','Contact'],  
           ['nl','reservar-nl.html','Boekingen'],  
      ];  
 //detect current language  
 var domain = 'http://'+window.location.host+'/';  
 var currentUri = window.location.href;  
 var lang = "default";  
 function replaceNavLinks() {  
      for (var i = 0, l = linkTranslation.length; i < l; i++) {  
        var uri = domain+linkTranslation[i][1];  
           if (uri === currentUri) {  
             lang = linkTranslation[i][0];  
           }  
      }  
      //find and replace links if NOT default language  
      if (lang != "default") {  
           //new array with links to be added  
           var linksToReplace =[];  
           for (var i = 0, l = linkTranslation.length; i < l; i++) {  
                if (linkTranslation[i][0] === lang) {  
                     var uri2 = linkTranslation[i][1];  
                     var anchor = linkTranslation[i][2];  
                  linksToReplace.push([uri2,anchor]);  
                }  
           }  
           //detect links at navigation and replace them   
           var els = document.getElementById('menu').getElementsByTagName('a');  
           for (var i = 0, l = els.length; i < l; i++) {  
                var el = els[i];  
                el.href = linksToReplace[i][0];  
                el.innerHTML = linksToReplace[i][1];  
           }       
      }       
 }  
 replaceNavLinks();  
 </script>  
What you need to adjust is the highlighted area in Yellow and the area highlighted in Green. 
 
The yellow area is an array with all your websites pages and urls. The scripts first checks if the current url matches any of the urls in the array. If there is a match, checks the language associated to that url and knows to which language it has to change the entire navigation. 
 
The word highlighted in green it's an id you have to find it in the source code of the page.
 
The script will look for links inside a section of your website, e.g.
navigation links are here...

so you need to write the id of the element that contains the navigation links.

Remember to check the mobile version as well, you may choose an id that does not exist on the mobile version (it happened to us with Weebly) so you have to search again until finding an id that exists in both versions.
 

Step 3: Add JS code at the bottom of all pages

Weebly has a section where you can add code in the footer of every page. Do NOT add it on the "design" section because it would not apply to the mobile version. Instead, you have to go to "Settings" then click on the tab for "SEO" and there you will find the section to add code to the footer that applies to both desktop and mobile versions of your website
 

Step 4: Homepage language redirect

Redirecting that home page to a specific language it's a big topic on its own. 
It can be done in many ways, this is the way we think provides the best user experience with little or none side effects:
First we turned the homepage into a simple page with buttons for picking a language:
And then we added the following js code on it.
<script type="text/javascript">  
 var webRef = document.referrer.split('/')[2];  
 if(webRef !='www.example.com') {  
      var userLang = (navigator.language) ? navigator.language : navigator.userLanguage;   
      if (userLang.indexOf('es') > -1) document.location.href = 'inicio.html';   
      else if (userLang.indexOf('de') > -1) document.location.href = 'inicio-de.html';   
      else if (userLang.indexOf('fr') > -1) document.location.href = 'inicio-fr.html';   
      else if (userLang.indexOf('nl') > -1) document.location.href = 'inicio-nl.html';   
      else document.location.href = 'inicio-en.html';  
 }  
 </script>  
What it does is searching for the referrer domain. The first time you arrive on the website, it will redirect according to the browser language, but once you are navigating within the website, if the user clicks again on the languages page, the redirect will not apply, showing the different languages it can choose from.
 

We hope you found this article useful

Let's Get In Touch!


Ready to start your next project with us? That's great! Give us a call or send us an email and we will get back to you as soon as possible!

(+34) 922 394 632