How to integrate Google Search in WebHelp Responsive output using a publishing template

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

To integrate the Google Search Engine into your WebHelp Responsive output using an oXygen Publishing Template, 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. Open the template descriptor file associated with your publishing template and add the webhelp.google.search.script parameter in the parameters section with its value set to reference the googlecse.html file that you created earlier. 
    <publishing-template>
...
<webhelp>
...                
<parameters>
<parameter name="webhelp.google.search.script" value="resources/googlecse.html"/>
</parameters>
</webhelp>
  6. You can also use the webhelp.google.search.results parameter to choose where to display the search results.
    • 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.
    • 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. Open the DITA Map WebHelp Responsive transformation scenario.
  8. Click the Choose Custom Publishing Template link and select your template.
  9. Click OK to save the changes to the transformation scenario.
  10. Click OK and run the transformation scenario.