Adding Google Translate

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

 

 

Created on 13 September 2019 by Michael Christian. Last modified on 2 May 2023

Was this helpful?  

Share