This is likely when the widget insert its own header but in your case it might be displayed behind yours while still expanding it.

Try collapsing your "Zendesk Admin header", you'll probably see it.

Hi Darren,

to add additional languages, you can modify the property by adding or removing languages:

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

The list of language parameters can be found here: https://cloud.google.com/translate/docs/languages

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 in the Guide document_head.hbs

1. Access your Guide admin interface
2. Open your theme
3. Access the templates
4. Select the document_head.hbs
5. Add the following code:

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.

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

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

 


   {{#link 'help_center'}}

     

   {{/link}}

 


 


   


   

   

   {{user_info}}

 

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:

1. Access your Guide admin interface
2. Open your theme
3. Access the style.css
4. 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:

1. Access your Guide admin interface
2. Open your theme
3. Access the script.js
4. 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

1. upload it in your zendesk assets
2. 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('');

     } else {

      setTimeout(restyleDropdown, 100);

     }

   }

   restyleDropdown();

})();

Nice one!

I tried to hide more than one category with the {{#isnt name 'Getting Started' 'Product Updates'}}  but I couldn't find the right syntax. 

Only way I manage was like that:

{{#isnt name 'Getting Started'}}
  {{#isnt name 'Product Updates'}}
  {{/isnt}}
{{/isnt}}

Any tip?