Overview
Google translate provides a convenient way to translate content, although Google no longer provides new access to use Google Website Translator, you can still implement a drop-down to change the content of your intranet page.
Step 1: Navigate to Admin > System > Script
Step 2: Paste the following code inside the <head> tag
Please be aware you may have existing scripts such as Google analytics code, place it at the bottom.
<!-- Google Translate Script -->
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<!-- Google Translate Style -->
<style>
#google_translate_element_position {
position:fixed; bottom:60px; right:15px; z-index:9999999999;
}
</style>
Step 3: Paste the following code inside Before </body> closing tag
<div id="google_translate_element_position" class="hidden-sm hidden-xs"><div id="google_translate_element"></div></div>
This is to hide the Google Translate drop-down for the small screen to avoid usability issues.
Click save and check the homepage.
Customisation options
1. Position the dropdown
By default the dropdown will be position at the bottom right corner this can be changed to suit your needs by changing the value in the CSS inside the <head> tag
Modify CSS inside the <head> tag to the following by replacing bottom:60px; to top:76px; Inside the <head> tag if you wish to position the drop-down in the Top Right corner.
<!-- Google Translate Element for Desktop only -->
<style>
#google_translate_element_position {
position:fixed; top:76px; right:15px; z-index:9999999999;
}
</style>
2. Language Options
You can choose which language to display by adding or removing two digits language code into the above arrays.
Here is an example of adding includedLanguages containing Spanish, French and Italian in the <head> tag
includedLanguages: 'es,fr,it',
<!-- Google Translate Script -->
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'es,fr,it', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
Full list of languages supported by Google Translate
