How to Internationalize your website in 10 minutes

Okay so let me come straight to the point that all of us need to provide multi-language support with our websites at some point of time. In such a competitive time, if we can find a short and effective way to do it without getting into much complexity then we are definitely one step ahead of others. So less of talking now and I will quickly show you how you can provide an easy option to your customers for multi language conversion.

Google provides a website translator plugin using which you can configure and create a script and inject it in your website and you are done. Lets do it step by step.

Step1: Go to : https://translate.google.com/manager/website/ (You need to be logged in through any of your google accounts). Click on “Add to your website now” button.

Step2: Provide your Website information like url and default language and click next.

Step3 : Add some more configuration settings like choosing a specific set of languages. You can also provide option for how to show the language dropdown on your site. When done, click on “Get code”.

Step4: This will generate a code snippet, both html and js which you need to paste in your website where you want to show the language dropdown.

And tada its done!!

If the default styling works for you then its great but if you want to customize it, which I am sure you would want to, then let me help you out in this. So the main challenge here is how to style the elements inside an iframe.

This is a code snippet that you need to include in your script tag.

[js]
window.googleTranslateLoadedCallback = function() {
var iframe = document.querySelector("iframe.goog-te-menu-frame");
var contents = iframe.contentDocument || iframe.contentWindow.document;
var body = contents.querySelector("body");
var linkEl = document.createElement("link");

linkEl.rel = "stylesheet";
linkEl.href = "/styles/googleTranslate.css";

body.appendChild(linkEl);
};
[/js]

And we can call this method inside our googleTranslateElementInit() method like this :

[js]
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: ‘en’, includedLanguages: ‘fr,hi,nl,ru,ta’, layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, ‘google_translate_element’);
window.googleTranslateLoadedCallback();
}
[/js]

In googleTranslateLoadedCallback method, we are injecting a css file dynamically inside the language dropdown iframe. Doing so, we can add all the styling that we want to apply to our language dropdown and there you go. Your customized google translate dropdown is ready to shine on your website.

Note : Injecting an external file in an iframe might not work for some sites other than google translate due to security reasons.