Inserting Google Translate Widget into the Zendesk Help center

As we know that articles in the Zendesk help center are published for the customer’s help and service. In the meantime, customers can be from different places where the languages may be different. And it is not an easy and professional technique to translate the articles manually. Zendesk authorities have solved this problem by adding a Google Translate widget to your help center. Users can select the language from the Google Translate widget and see the translated articles. Let us see how to insert Google Translate widget into your help center.

How to insert the Google Translate widget in the help center?
Navigate to the following steps for inserting the Google Translate widget in helpcenter.
A. Open the Zendesk help center.
B. Go to the Guide admin page.
C. Click on the Customize design icon. And click on the Edit code button. Here you can edit code for many customizations as we are doing now.
Here are the 4 major steps to do for inserting Google Translate widget into your help center.

1. Insert the script in the Guide document_head.hbs:
Select the document_head.hbs file from the current page and insert the following code. And click on the Publish button.

<!-- 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:
Select the Header.hbs file and add the following code where you want to see the Google Translate widget. And click on the Publish button.

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

Note: In the standard Copenhagen theme, when you added this code to the nav-wrapper it 
will look like this:

<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:
Select the style.css file and add the following code at the bottom. And click on the Publish button.

/**************** 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 Drop-down menu:
Select the script.js file and add the code at the bottom of the javascript file. And click on the Publish button.

// 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();

})();

Save all the code settings and Refresh the help center. You will see a drop-down at the top of help center page. Where you can select your desired language and see the articles in that language.

For further queries regarding the Inserting Google Translate widget to your Help center, please leave a comment below.