Insert Google Translate widget to your Helpcenter

Posted Oct 24, 2017

If manually translating 250 articles of your help center to 6 different (or more) languages is not an option for you, here is a quick guide on how to insert the free Google translate widget to your help center and providing a “good enough” automated translation.

Keep in mind that Google Translate widget does not cover the translation of search nor of the screenshots (obviously..).

You can check out what it looks like and how it works here: https://support.aodocs.com

Note:
The following steps are done from the newest version of the Guite Theme editor.

We are going to go it in 4 steps:

1. Insert the script to your Help Center

2. Insert the button in the Guide Header

3. Modify the look of the Button

4. Modify the look of the Dropdown menu

1. Insert the script in the Guide document_head.hbs

Access your Guide admin interface
Open your theme
Access the templates
Select the document_head.hbs
Add the following code:

<!-- Load the Google Translate Widget -->

<script type="text/javascript">

function googleTranslateWidgetInit() {

new google.translate.TranslateElement({

pageLanguage: 'en',

includedLanguages: 'es,fr,it,ja,pt,en',

layout: google.translate.TranslateElement.InlineLayout.SIMPLE

}, 'google_translate_element');

}

</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateWidgetInit"></script>

2. Insert the button in the Guide Header

Once this the script is added, the script will launch every time the page loads and adds the widget (we are not done yet). We are going to insert it in the Header of the Guide interface so that it is always visible to the users.

Access your Guide admin interface
Open your theme
Access the templates
Select the header.hbs
Add the following code at the location in the header where you want the widget to be:

<div id="google_translate_element" class="dropdown"></div>

In the standard Copenhagen theme it would look like this when added to the nav-wrapper:

<header class="header">

 <div class="logo">

   {{#link 'help_center'}}

     <img src="{{logo_url}}" alt="{{t 'logo'}}">

   {{/link}}

 </div>

 <div class="nav-wrapper">

   <div id="google_translate_element" class="dropdown"></div>

   <span class="icon-menu"></span>

   <nav class="user-nav" id="user-nav">

     {{link 'community'}}

     {{link 'new_request' class='submit-a-request'}}

   </nav>

   {{user_info}}

 </div>

</header>

3. Modify the look of the Button

Then you will probably want to customize the look and feel of the Google Translate widget from the CSS file.

Here is I have configured it:

Access your Guide admin interface
Open your theme
Access the style.css
Add the following code at the bottom of the CSS file

/**************** Google Translate widget ***********/

iframe.goog-te-menu-frame.skiptranslate {

 margin-top: 2px;

 width: 175px;

 border-radius: 5px;

 box-shadow: 0 6px 12px rgba(0, 0, 0, .175);

 animation: bounce .6s ease-out;

}

.goog-te-gadget-simple {

 background-color: transparent !important;

 white-space: nowrap !important;

 border-color: white !important;

 border-radius: 4px !important;

 font-family: $font_2 !important;;

 font-size: 14px !important;

}

.goog-te-menu-value {

 color: $color_1 !important;

 text-decoration: none !important;

 float: right;

 vertical-align:middle!important;

}

.goog-te-menu-value span {

 color: $color_1 !important;

 text-decoration: none !important;

}

.goog-te-menu-value:hover {

 color: $color_1 !important;

 text-decoration: none !important;

}

.goog-te-banner-frame {

display: none !important;

}

/* add the following (remove it from the comments) if you want to customize the icon of the widget.

/*.goog-te-gadget-icon {

 background: url("url for the icon") 0 0 no-repeat !important;

}*/

4. Modify the look of the Dropdown menu

Also you will perhaps want to customize the look of the drop-down (it is an iFrame)

For that you will need to add some javascript:

Here is I have configured it:

Access your Guide admin interface
Open your theme
Access the script.js
Add the following code at the bottom of the Script file

Note:
In the following example the style to inject in the iFrame is store as a Zendesk Asset:
//p4.zdassets.com/hc/theme_assets/549775/200068704/google-translate-override.css

To customize it:
1. create your own .css file

upload it in your zendesk assets
Replace the href value with your asset link

// Customize the Google Translate dropdown style

 // (A bit tricky as the dropdown is wrapped in an iframe asynchronously loaded)

(function() {

   var $previewFrame = $('#preview-frame');
   

   function restyleDropdown() {
    

     // In case of Zendesk preview mode, another iframe is wrapping the whole page

     var $dropdownIframe = $previewFrame.length === 1

    ? $previewFrame.contents().find('.goog-te-menu-frame.skiptranslate')

    : $('.goog-te-menu-frame.skiptranslate');

     if($dropdownIframe.length) {

      $dropdownIframe

         .contents()

         .find('head')

         .append('<link rel="stylesheet" type="text/css" href="//p4.zdassets.com/hc/theme_assets/549775/200068704/google-translate-override.css"/>');

     } else {

      setTimeout(restyleDropdown, 100);

     }

   }

   restyleDropdown();

})();

35 comments

Date

Newest

Kristi Connolly

Mar 10, 2025

The Google Translate widget is no longer free for commercial use. What's the process now?

Viktor Osetrov

Jul 28, 2023

Hello Vivian,

Did you try updating entire HTML blocks via div or span class?
For example, <span class=”notranslate”><p>Don’t Translate Me</p></span>
Please follow Help center templating cookbook and Customizing your help center theme

Hope it helps,

Vivian Piloto

Jul 28, 2023

Hi 1263659888089

Thanks for the tip! I read this and tried the class but the thing is that in this solution i I'll have to put the "notranslate" in every article one by one in the article HTML right? I was wondering if there's a solution were I can put the code in the Theme and block for all the pages since there are more than 300 articles in my Helpcenter.

Viktor Osetrov

Jul 28, 2023

Hello Vivian,

Thanks for your feedback. For disabling Google Translate from translating specific words or blocks you should modify Help Center CSS. For example, you can built-in the CSS class “notranslate” which will prevent Google from translating any words wrapped within that class.

Hope it helps,

Vivian Piloto

Jul 27, 2023

Hi!

That's an awesome post. Thanks for the tips and great explanation.

I'm heaving some trouble here and was wondering if somebody can help me.

I just implemented in my site but i need to block the translations for some words that appears constantly like products name. How can I do that? Which code or function is better? I want something that i can apply directly in the Theme, and not in every article HTML.

Gaurav Singh Rana

Jun 11, 2022

Go to our help center of edistera and you can try it out.

(I have one small issue that I must have the "open a ticket" page in Hindi, however I do not want to offer google translation of the articles to Hindi, so I didn't add Hindi to the google translate options, but I did add it in the built in Zendesk language menu all the way on the right. If I didn't need that support ticket page in Hindi I would completely remove that built in Zendesk language menu option). Let me know what you think.

thanks

Brett Bowser

Feb 18, 2021

Hey Carl,

I was able to find an external article that may help embed Google Translate into your website: How to Put Google Translator Tool on Your Blogs and Websites

That article was recently updated so hopefully that gets you what you're looking for!

carl long

Feb 13, 2021

Why I added the code according to the steps, but Google Translator does not appear

Ron de Vries

Nov 12, 2020

Hi Kay,

Dankjewel! :)

I'll check that out when we're onboarding our Spanisch customer.

Regards,

Ron

Kay

Nov 12, 2020

Hi Ron! Another Dutchy here.. 🇳🇱

You can safely hide the web widget based on a URL (or any other JS variable).

if (window.location.href.indexOf('.es') > -1) {
  zE('webWidget', 'hide');
}

Ps. if you use chat in the widget, make sure the widget is not hidden on pages when a chat has started or the customer won't be able to keep chatting everywhere.

Didn't find what you're looking for?

New post

Insert Google Translate widget to your Helpcenter

1. Insert the script in the Guide document_head.hbs

2. Insert the button in the Guide Header

3. Modify the look of the Button

4. Modify the look of the Dropdown menu

35 comments

Didn't find what you're looking for?

Common topics

Role-based guides

Additional resources