We have had people us ask how they can have Flare’s WebHelp output ‘plug into’ Google translate. Although this is not an ideal solution to get your content translated, it could be “good enough” for a temporary solution or for content that you only need a rough translation.  Google makes it pretty easy for us to do this.  All we have to do is add the script below to a master page and then use that master page in the target. This solution will only work if you have an Internet connection.

You can get a more customized script from Google or use the one below:

<div id="google_translate_element"  style="float: right;"></div><script>
function googleTranslateElementInit() {
 new google.translate.TranslateElement({
 pageLanguage: 'en',
 layout: google.translate.TranslateElement.InlineLayout.SIMPLE
 }, 'google_translate_element');
</script><script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

In this example we will create a new project, add a master page and add the script from Google to it, assign the master page to a target, generate and view the output.

Create a New Project

  1. Create a new project (File > New Project)
  2. Name it whatever you want and pick the location
  3. Click Next
  4. Select the Policy and Procedures Guide template
  5. Click Next
  6. Select MyWebHelp from the list
  7. Click Finish

Create a Master Page

  1. Click on the Project ribbon
  2. Click on New File
  3. From the drop-down in the New File UI, select Master Page
  4. Select the MasterPage.flmsp from the New from template area and name it MP
    Add Master Page
  5. Add the file
  6. Optional: We will now remove some of the other items in this master page.  Right-click on the breadcrumbs proxy and Delete it.  Repeat this for the mini-toc proxy and the topic toolbar proxy
  7. Save all

Add the Script to the Master Page

At this point you should have a master page with just a topic proxy in it.  It should look like this:

Master Page

  1. Open the master page in the text editor by clicking the text editor toolbar button Open Text Editor shown in the image above.
  2. Select and copy the script from the beginning of this post, or get a more customized one from Google. Note: If you get another version of the script from Google, make sure that you type in http: after the src=” and before the // toward the end of the script.
  3. Paste the script into the body of the master page, as shown below:
    Paste Script
  4. Save All
  5. Close the tabs that are named MP.flmsp

Add the Master Page to the Target

All that is left to do is assign the master page to the target, generate and view the results.

  1. Go to the Project Organizer and open the Targets folder
  2. Double-click the WebHelp target
  3.  Go to the Advanced tab and scroll down to the Master Page section
  4. Select the MP master page from the drop-down
    Assign Master Page
  5. Save All
  6. Generate and view the output.
  7. Click on the topic “How to Use This Template
  8. You should see the Google Translation drop-down in the upper right of each topic.  To translate the page, simple click the drop-down and select the desired language.
    Topic with drop-down


About The Author

Jose Sermeno

About Jose Sermeno

With over 10 years of experience in the software industry, Mr. Sermeno brings a wealth of knowledge and expertise to the product evangelist team, helping introduce new users to everything MadCap Software. In his spare time, Jose is the Project Director for San Diego City Robotics, the San Diego community college systems robotics program, and enjoys working in software design and open source hardware development. Prior to joining MadCap in late 2010, Jose ran a Drupal development shop, and was an application manager for Temple University Health System.

Last Modified: October 17, 2014

This entry was posted in MadCap Flare, Tech Comm, Tips & Tricks. Bookmark the permalink.


  • Ken Billing June 7, 2012 at 4:27 PM

    I tried this two projects, one exactly as in your instructions, but both hang upon viewing. Is the script not compatible with HTML5 targets?

  • Ken Billing June 7, 2012 at 4:35 PM

    You can disregard my earlier comment. It works when published to a public website. Thanks!

  • google June 16, 2012 at 10:09 AM

    Great site. Lots of useful info here. I am sending it to several friends ans also sharing in delicious. And of course, thanks in your effort!

  • Don Johnson September 25, 2012 at 9:00 AM

    I’d like to take this to the next level. We do localize our help systems in some languages but it is just too expensive to cover all the languages of our customer base. I’d like to deploy something like this, but it isn’t well-suited for a two-panel Help system: in WebHelp 1.0, I can place a translator widget in both the TOC and the Content, but in the TOC it is enormous and ugly, and the two cannot be synchronized.

    In HTML5 help, which is what I’d rather deploy, I wonder if there is a way to place this widget in the HTML5 skin or somewhere else, so that a single language choice would translate the TOC as well as the content?

  • Mick Lee November 26, 2015 at 6:17 PM

    Hi All

    Thanks heaps for this. It works a treat.

    Now what I would to see if it can stepped up a bit. I’m using the translate component for the text obviously however the screenshots are in English. We have other languages for the software (Spanish, Mongolian etc).

    What I would like to do (hopefully) is add some extra script to the master page created that then tells MadCap to draw from a new Image Folder which then contains screenshots for the relevant language.

    So if Spanish is chosen via Google Translate it triggers a variable change to the Spanish Images.

    Is this possible?

    Thanks very much in advance.

    Mick Lee

Have Something to Say?

Your email address will not be published. Required fields are marked *