WebHelp Responsive Google Search

[TumasN]

I've been trying to get the search box on our WebHelp Responsive documentation page to work with Google Search and, unfortunately, nothing seems to be working.

Could I ask for an updated guide, from scratch, with details, of how to obtain it, please?
I've followed this guide exactly, with the publishing template, and it's not working: https://www.oxygenxml.com/doc/versions/ ... nsive.html
The result is: when I turn off indexing in Oxygen Feedback (the search in Feedback is not satisfactory for my peers, hence why trying Google instead), I either get the results from the built-in one (with the 5-star rating), or I get an empty page, depending on what is the content of the googlecse.html file (whether it's in the same format as you have in your documentation but with my cx identifier, or whether it's the new format obtained after clicking "Get Code" on the CSE page).
The script obtained from Google using "Get Code" is completely different than the example script. It's:
<script async src="https://cse.google.com/cse.js?cx=xxxxxxxxxxxxxxxxxxxx">
</script>
<div class="gcse-searchresults-only"></div>

Also, are the steps in the link above the *only* steps needed? Is defining the webhelp.google.search.results parameter the *only* required step for the results to be shown just as with the built-in JS search or Oxygen Feedback?

Thanks in advance!

[beniamin_savu]

Hi,

The existing procedure appears to be outdated, I added an issue in our internal issue tracker to update it accordingly. Meanwhile, please follow the updated procedure below to integrate the Google Search Engine into your WebHelp Responsive output using an Oxygen Publishing Template:

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 component for your site.
   Note: For the Layout option, select Results only for the Google Search Engine to work with Oxygen XML WebHelp Responsive.
4. Once created, you should obtain a code snippet similar to this:

   Code: Select all

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

5. Create a folder named html-fragments, and in that folder, create a file named google-script.html
6. Inside google-script.html, add only the <script> element. The file should look like this:

   Code: Select all

   <script async src="https://cse.google.com/cse.js?cx=xxxxxxxxxxxxxxx"></script>
   

7. In the html-fragments folder, create another file named google-results.html.
8. 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:

   Code: Select all

   <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.
9. 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.

   Code: Select all

   <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>
   

10. Open the DITA Map WebHelp Responsive transformation scenario.
11. Click Choose Custom Publishing Template and select your template.
12. Click OK to save changes to the transformation scenario.
13. Run the transformation scenario.

Please note that the Google search feature will not work locally, it must be deployed on an HTTP server.

Best regards,
Beniamin Savu
Oxygen WebHelp Team
http://www.oxygenxml.com

[TumasN]

Awesone, thanks Beniamin! Works perfectly!