Edit online

How to Integrate Google Search in WebHelp Classic Output

It is possible to integrate the Google Search Engine into your WebHelp Classic output and you can specify where you want the results to appear in your WebHelp page.

Using Oxygen XML Editor/Author

To integrate the Google Search Engine into your WebHelp output using a transformation scenario from within Oxygen XML Editor/Author, follow this procedure:
  1. Go to the Google Custom Search Engine page using your Google account.
  2. Select the Create a custom search engine button.
  3. Follow the on-screen instructions to create a search engine for your site. At the end of this process you should obtain a code snippet that looks like this:
    <script>   
     (function()  {     
      var cx =
        '000888210889775888983:8mn4x_mf-yg';     
      var gcse = document.createElement('script'); 
      gcse.type = 'text/javascript'; 
      gcse.async = true;     
      gcse.src = (document.location.protocol == 'https:' ?
        'https:' : 'http:') +         '//www.google.com/cse/cse.js?cx=' + cx;     
      var s = document.getElementsByTagName('script')[0]; 
      s.parentNode.insertBefore(gcse, s);   
     }
     )(); 
    </script>
  4. Save the script into a well-formed HTML file called googlecse.html.
  5. In Oxygen XML Editor/Author, click the Configure Transformation Scenario(s) action from the toolbar (or the Document > Transformation menu.
  6. Select an existing WebHelp Responsive transformation scenario (depending on your needs, it may be with or without feedback) and click the Duplicate button to open the Edit Scenario dialog box.
  7. Switch to the Parameters tab and edit the webhelp.google.search.script parameter to reference the googlecse.html file that you created earlier.
  8. You can also use the webhelp.google.search.results parameter to choose where to display the search results.
    1. Create an HTML file with the following content: <div class="gcse-searchresults-only" data-autoSearchOnLoad="true" data-queryParameterName="searchQuery"></div> (you must use the HTML5 version for the GCSE). For more information about other supported attributes, see Google Custom Search: Supported Attributes.
    2. Set the value of the webhelp.google.search.results parameter to the file path of the file you just created. If this parameter is not specified, the following code is used: <div class="gcse-searchresults-only" data-autoSearchOnLoad="true" data-queryParameterName="searchQuery"></div>.
  9. Click Ok and run the transformation scenario.

Using a Script Outside of Oxygen XML Editor/Author

Important: Running WebHelp transformations from a script outside of Oxygen XML Editor/Author requires an additional license and some additional setup:
To integrate the Google Search Engine into your WebHelp Classic output using a script outside of Oxygen XML Editor/Author, follow this procedure:
  1. Go to the Google Custom Search Engine page using your Google account.
  2. Select the Create a custom search engine button.
  3. Follow the on-screen instructions to create a search engine for your site. At the end of this process you should obtain a code snippet that looks like this:
    <script>   
     (function()  {     
      var cx =
        '000888210889775888983:8mn4x_mf-yg';     
      var gcse = document.createElement('script'); 
      gcse.type = 'text/javascript'; 
      gcse.async = true;     
      gcse.src = (document.location.protocol == 'https:' ?
        'https:' : 'http:') +         '//www.google.com/cse/cse.js?cx=' + cx;     
      var s = document.getElementsByTagName('script')[0]; 
      s.parentNode.insertBefore(gcse, s);   
     }
     )(); 
    </script>
  4. Save the script into a well-formed HTML file called googlecse.html.
  5. Use the webhelp.google.search.script parameter in your transformation script and set its value to reference the googlecse.html file that you created earlier.
  6. You can also use the webhelp.google.search.results parameter to choose where to display the search results.
    1. Create an HTML file with the following content: <div class="gcse-searchresults-only" data-autoSearchOnLoad="true" data-queryParameterName="searchQuery"></div> (you must use the HTML5 version for the GCSE). For more information about other supported attributes, see Google Custom Search: Supported Attributes.
    2. Set the value of the webhelp.google.search.results parameter to the file path of the file you just created. If this parameter is not specified, the following code is used: <div class="gcse-searchresults-only" data-autoSearchOnLoad="true" data-queryParameterName="searchQuery"></div>.
  7. Execute the transformation script.