How to Integrate Google Search in WebHelp Responsive Output

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.

Using a Publishing Template

To integrate the Google Search Engine into your WebHelp Responsive output using an Oxygen Publishing Template, follow this procedure:

Go to the Google Custom Search Engine page using your Google account.
Select the Create a custom search engine button.
Follow the on-screen instructions to create a search engine component for your site.
Important: For the Layout, you must select Results only for the Google Search Engine to work with Oxygen XML WebHelp Responsive.

At the end of this process you should obtain a code snippet that looks like this:

<script async src="https://cse.google.com/cse.js?cx=xxxxxxxxxxxxxxx"></script>
<div class="gcse-searchresults-only"></div>

Create a folder named html-fragments, and in that folder, create a file named google-script.html.
Inside google-script.html, add only the <script> element. The file should look like this:
```
<script async src="https://cse.google.com/cse.js?cx=xxxxxxxxxxxxxxx"></script>
```
In the html-fragments folder, create another file named google-results.html.
Inside google-results.html, add only the <div> element and include the data-autoSearchOnLoad="true" data-queryParameterName="searchQuery" attributes. The file should look like this:
```
<div class="gcse-searchresults-only" data-autoSearchOnLoad="true" 
  data-queryParameterName="searchQuery"></div>
```
Note: For more information about other supported attributes, see Google Custom Search: Supported Attributes.

Open the template descriptor file associated with your publishing template and add the webhelp.google.search.script parameter in the parameters section, setting its value to reference google-script.html. Then add the webhelp.google.search.results parameter, with its value set to google-results.html.

<publishing-template>
  ...
  <webhelp>
    ...                
    <parameters>
    ...
    <parameter 
      name="webhelp.google.search.script" 
      value="html-fragments/google-script.html"
      type="filePath"/>
    <parameter 
      name="webhelp.google.search.results" 
      value="html-fragments/google-results.html"
      type="filePath"/>
    </parameters>
  </webhelp>
</publishing-template>

Open the DITA Map WebHelp Responsive transformation scenario.
Click the Choose Custom Publishing Template link and select your template.
Click OK to save the changes to the transformation scenario.
Run the transformation scenario.
Important: The Google search feature will not work locally, it must be deployed on an HTTP server.

Using a Transformation Scenario in Oxygen XML Editor/Author

To integrate the Google Search Engine into your WebHelp Responsive output using a transformation scenario from within Oxygen XML Editor/Author, follow this procedure:

Go to the Google Custom Search Engine page using your Google account.
Select the Create a custom search engine button.
Follow the on-screen instructions to create a search engine for your site.
Important: For the Layout, you must select Results only for the Google Search Engine to work with Oxygen XML WebHelp Responsive.

At the end of this process you should obtain a code snippet that looks like this:

<script async src="https://cse.google.com/cse.js?cx=xxxxxxxxxxxxxxx"></script>
<div class="gcse-searchresults-only"></div>

Create a file named google-script.html, and add only the <script> element. The file should look like this:
```
<script async src="https://cse.google.com/cse.js?cx=xxxxxxxxxxxxxxx"></script>
```
Create a file named google-results.html, add only the <div> element and include the data-autoSearchOnLoad="true" data-queryParameterName="searchQuery" attributes. The file should look like this:
```
<div class="gcse-searchresults-only" data-autoSearchOnLoad="true" 
  data-queryParameterName="searchQuery"></div>
```
Note: For more information about other supported attributes, see Google Custom Search: Supported Attributes.
Edit the DITA Map WebHelp Responsive transformation scenario and choose a template.
Switch to the Parameters tab and edit the webhelp.google.search.script parameter to reference the google-script.html file. Then edit the webhelp.google.search.results parameter to reference the google-results.html file.
Click Ok and run the transformation scenario.
Important: The Google search feature will not work locally, it must be deployed on an HTTP server.