Google Translate is a convenient way to ensure content on your site can be translated by users who need a different language on the fly, and as an alternative to having content actually written by native speakers.
Although Google no longer provides new access to use Google Website Translator, you can still implement a drop-down to change the content of Intranet pages:
Step 1: Navigate to Admin > System > Script
A sysadmin can open this area.
Step 2: Paste the following code inside the <head> tag
Please note: If your site is already using Google Analytics code here, place the translate code after this.
<!-- 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 on small screens to avoid usability issues.
Step 4: Click 'Save' to apply.
The feature should now appear clickable on Intranet pages:
Customisation options
1. Position the dropdown
By default, the dropdown will be positioned at the bottom right corner of the screen. 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 languages can be selected by editing the code to include only the two-digit language codes for those you wish users to see available.
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>
<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>
Full list of languages supported by Google Translate
This smaller list is a lot easier to use than all the languages Google has available:
