How to Integrate Google Search in WebHelp Responsive OutputHistory | Edit
You can integrate Google Search into your WebHelp Responsive output.
To enable your WebHelp system to use Google Search, follow these steps:
- Go to the Google Custom Search Engine page using your Google account.
- Press the Create a custom search engine button.
-
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.
A Google Search script 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> - Save the script into a well-formed HTML file called googlecse.html.
-
In Oxygen XML Editor, click the
Configure Transformation
Scenario(s) action from the toolbar
(or the Document > Transformation menu.
- 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.
-
Switch to the Parameters tab and edit the
webhelp.google.search.scriptparameter to reference the googlecse.html file that you created earlier. -
You can also use the
webhelp.google.search.resultsparameter 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.resultsparameter 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>.
-
Create an HTML file with the following content:
- Click Ok.
- Run the transformation scenario.