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.

This guide is for Claromentis 8.7+

 

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>

Customisation option:

By default, the dropdown will be placed at the bottom right corner of your system in fixed position and only visible on desktop. this can be customised by changing positioning value within CSS code.

 

 

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>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'bg,bs,ca,co,zh-CN,cs,cy,da,de,el,en,es,et,fa,fi,fr,fy,ga,gd,gl,he,hu,iw,is,it,ka,la,lb,lt,lv,mk,nl,no,pl,pt,ro,ru,sk,sl,sq,sr,sv,tr,uk,zh', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>

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

Example CSS Inside the <head> tag if you wish to position the drop-down on the Top Right corner

<!-- Google Translate Element for Desktop only -->
<style>
#google_translate_element_position {
position:fixed; top:60px; 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.

Full list of languages supported by Google Translate

 

 

Created on 12 September 2019 by Michael Christian. Last modified on 24 December 2019

Was this helpful?  

1 Like
Share