Instant Localization: Integrating Google Translate into NetHelp

(Note: This functionality is only available with Doc-To-Help versions 2012 V2 and later, which you can download here.)

A customer of ours recently came to us with a dilemma: She has customers all over the world, but doesn’t have the resources necessary to translate her NetHelp into all the languages her customers require.  She was wondering if NetHelp could be customized to support Google Translate, since it’s a highly flexible and customizable output.  I wouldn’t be writing this post if the answer was “no” so let’s get right down to it.

By adding some code provided to you by Google, adding a Select Language button to your NetHelp output is straightforward enough that I was able to figure it out.  You should have no troubles whatsoever.

  1. If you already have your NetHelp output on the web, you can skip this step.  I built the Software Documentation sample, named the output folder GoogleTranslate, and placed my NetHelp output here.
  2. Getting the code from Google is three quick steps: Go to the Google Translate manager, select the language that you want to be your default (I chose English), then get the code.  Once you have the code, you’re ready to add it to your NetHelp theme.
  3. Click here to download and extract the two files you’ll need to add to your theme, nethelp.gtranslate.js and nethelp.splitter.js.
  4. In Doc-To-Help, go to the Home tab, make sure NetHelp is selected as the Target, and select Add New Theme.  Name your Theme (I called mine GoogleTranslate, which you can download here), and click OK.
  5. Copy nethelp.gtranslate.js and nethelp.splitter.js into your Theme folder, which will be located here: \Documents\My Doc-To-Help Projects\Doc-To-Help\Themes\NetHelp 2.0\Themes\<ThemeName>
  6. In your Theme folder, open the layout.html file to edit it.  This is where you add your code.
  7. Add your meta code before the </head> tag, which is at the beginning of the layout.html file.  It should look like this:
  8. Then add your Google Translate code to the body of the layout.html file.  I wanted the plug-in to appear in the Topic Bar in my NetHelp output, so I placed he code right after the DIV tag with the ID c1topbar.  My code looks like this:

    Note: you also need to replace the “src” value in the last script tag with the value “nethelp.gtranslate.js” (that’s the code called out in red).  I also added a “float left” attribute with a style in the DIV tag called “google_translate_element” (code called out in black) so that the Select Language button was left-justified in the Topic Bar.
  9. Now that the code is added and saved, the Theme is good to go.  Go to the Home tab and click Rebuild.

Once you deploy to your web server, your NetHelp output will display with the Select Language button left-justified in the Topic Bar:

From there, your customer can choose their language and Google Translate it will translate the content for them.  The impressive thing about it is that the other elements of NetHelp that are usually in English (the messages displayed after you search, the labels on the tabs or panes, even the tooltip that pops up when you mouse over one of the buttons) is automatically translated for you as well.

This is a quick, easy, efficient way to to deliver your NetHelp to customers in whatever language they need.  All the links to the topics work and so does search and the index.  You could spend a fortune in localization, or you could let Google translate your content for you, while maintaining the functionality of your NetHelp outputs.  Follow these steps, upload, and your content is localized for virtually any audience in any part of the world.

Try it out and let us know your results!

3 thoughts on “Instant Localization: Integrating Google Translate into NetHelp

  1. Brad Keller Post author

    Sjouke, Yes, the URL is important. Each URL that you enter in the Google Translate Manager has an ID number assigned to it and you need to put that ID number into the Doc-To-Help theme (part of the code you copy and paste).

    The content must be deployed on a web server for Google Translate to pick it up. It will not work if deployed locally.

  2. Sjouke

    Hi Brad,

    Is this feature also supposed to work with D2H 2012 V3 (build749) ?
    When trying to get the code from Google Translate, I need to fill in a specific URL. Is this important? I deliver Help to many customers’ websites …. What kind of url do I have to use in order to deploy it locally op my pc?
    And as far as I could see in the code, there is not a reference to be replaced.

Leave a Reply