Google Custom Search revisited

[Ken Billing]

I couldn't find any buzz here on this topic in the past several years so I'm starting a new topic to at least make it visible again.

Has anybody had success replacing Flare's WebHelp search with a Google Custom Search? My application of it would be in a navigation project that links to dozens of child projects where the real content resides. So, the custom search needs to look at all of the child topics indexed by Google. But the implementation of this should be close to the same regardless of the project scope. That is, you get Google to index your content, then you get your WebHelp to invoke your Google Custom Search code and display the results.

I'm working out the kinks now of getting Google to index the content, which is a challenge of its own as others have discussed already. What I'm most interested in with this thread is how to replace the Flare search function with the Google CSE code. I've submitted a support ticket with MadCap and they say that they don't have any info on doing this but logged it as a wish. It might be Flare 16 before we see that come to light.

I'm about ready to start hacking the .js of the target but if anyone's got pointers or warnings before I do, please share 'em.

Oh, and before someone suggests Flare's run-time merging, the project structure is too rigid for our requirements. Otherwise, I'd have already done it.

Thanks!

[NorthEast]

Your should be able to do this by adding a toolbar script - these are run as part of the main help file, so you can use the script to modify/add things to the skin elements.

You could take two approaches:
- Modify the behaviour of the existing search box.
- Hide the existing search box (e.g. using CSS), and add the code for your own search box (wired up as you require).

I replied to your the other post (copied below), with a starting point on how to modify the existing search.

It might work to send the search criteria to a Google Custom Search Engine instead, which is my quest.

I'd suspect you'd need to use something like jQuery preventdefault to change and redirect the default action of the search box/button.

I would try Googling something like 'jquery redirect' with/without 'preventdefault'.

[Ken Billing]

Thanks, Dave. I'll pursue those lines.

[Ken Billing]

Okay, kids, the good news is that it can be done and works.



The bad news is that you have to modify your target output. I tried shimming it into the Flare page template but the compiler chokes on the <gcse:search> element.

Below are the steps to replacing the Flare search engine with a Google CSE. This is one way, there might be others:

1. Build and customize a working custom search engine at google.com/cse. When your search engine looks the way you want and returns results on the CSE preview page, you're ready to plug it into Flare.

2. In your main page (i.e. Default.htm), in the <div id="header"> element, replace the entire <div class="search-bar needs-pie"> element with:

Code: Select all

<div style="width: 300px; float: right;">
    <gcse:search></gcse:search>
</ div>

By default, the Google search box will want to take up the full window width. Adjust the width attribute to the size you want. The float attribute pins it to the right side of the header, assuming you want your logo and site name on the left.

3. Add the code snippet generated for you by Google to Skins\Default\Scripts\toolbar.js. It should look similar to this:

Code: Select all

  (function() {
    var cx = 'YOURCSEID';
    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);
  })();

4. Add the following to the end of Skins\Default\Stylesheets\TextEffects.css to disable the IE "reset" X button in the search box. The Google control already has one, you don't need two:

Code: Select all

/* Disable IE clear X button */
input[type=text]::-ms-clear 
{
	display: none;
}

You should now be able to open your main page and see your shiny new Google search box. When published to a public webserver, it should return the same results as the CSE preview page in step 1. Where it returns the results is up to you and how you set up the CSE. The Overlay option worked fine for me to show the results on top of the current page.

If you rebuild your target, it will overwrite everything that you just did and you will have to repeat it. Fortunately, it's not a lot.

FWIW, MadCap does not endorse or support this trick. Your mileage may vary. I can't provide much help if you have trouble with it but post your questions here and maybe someone else can. If you discover ways of improving on this technique, please post them here too so that everyone can benefit and MadCap can see how many people need something like this. Maybe someday they'll build it into Flare as a configurable option.

Now go get your Google on

[NorthEast]

Thanks for the info - I'll bookmark this as I'll probably use Google custom search at some point.

The bad news is that you have to modify your target output.

You shouldn't have to modify the target output files (or the source of these files, in the program files folder).

You can use some jQuery in the toolbar script to add your own search box (div) to the page, and replace the existing search box; e.g.

Code: Select all

$(document).ready(function(){
	$('div#header>div[data-mc-style="Search Bar"]').replaceWith('<div class="testing" style="width: 300px; float: right;"><gcse:search></gcse:search></div>');

	/* after adding the div, now use a function call to run your Google script */

});

[Ken Billing]

Hey, Dave

I'm not having much luck with the JQuery. It looks like you based your example on a different target type? There is no data-mc-style in my target. Instead, here's the header:

Code: Select all

        <div id="header"><a href="Default.htm"><h1 class="logo"></h1></a>
            <div class="search-bar needs-pie">
                <input id="search-field" class="needs-pie" type="text" placeholder="Search" />
                <div class="search-filter-wrapper">
                    <div class="search-filter"><span>All Files</span>
                        <div class="search-filter-content">
                            <ul>
                                <li>All Files</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="search-submit-wrapper" dir="ltr">
                    <div class="search-submit" title="Search">
                    </div>
                </div>
            </div>
        </div>

Shouldn't this work?

Code: Select all

$(document).ready(function(){
   $('div.search-bar needs-pie').replaceWith('<div class="gcse" style="width: 300px; float: right;"><gcse:search></gcse:search></div>');
});

But it doesn't for me.

[NorthEast]

It worked fine for me, the custom search box appears.
The only thing I noticed was that you'd also have to configure how the results appear - by default, they're placed on top of the help.

Anyway, you could just use $('div.search-bar')

You just want a way to select that particular div (and nothing else), and it looks like there's only one div.search-bar.
My original selector was a bit over elaborate.

Note - if you wanted to include both classes, you would write it as div.search-bar.needs-pie - you chain all the class names together in CSS.

[Ken Billing]

Got it, thanks.

I'm having an issue with the CSE box only activating in IE 10. It's visible but not active in 11 (or in 10 mode) and Chrome. I also tried setting the meta X-UA-Compatible to other than Edge, for example, 10 but that didn't help.

Any ideas? Could this be why MadCap uses PIE?

[arshabhirai]

2. In your main page (i.e. Default.htm), in the <div id="header"> element, replace the entire <div class="search-bar needs-pie"> element with:

Code: Select all

<div style="width: 300px; float: right;">
    <gcse:search></gcse:search>
</ div>

By default, the Google search box will want to take up the full window width. Adjust the width attribute to the size you want. The float attribute pins it to the right side of the header, assuming you want your logo and site name on the left.

3. Add the code snippet generated for you by Google to Skins\Default\Scripts\toolbar.js. It should look similar to this:

Code: Select all

  (function() {
    var cx = 'YOURCSEID';
    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);
  })();

4. Add the following to the end of Skins\Default\Stylesheets\TextEffects.css to disable the IE "reset" X button in the search box. The Google control already has one, you don't need two:

Code: Select all

/* Disable IE clear X button */
input[type=text]::-ms-clear 
{
	display: none;
}

Hi Ken and Dave,
I was testing this and got stuck in Step 2 and 3. I get gcse is an undeclared prefix error when I add this code

Code: Select all

<div style="width: 300px; float: right;">
    <gcse:search></gcse:search>
</ div>

Maybe this will work: <div id="gcse:search" style="width: 300px; float: right;"></div>, but I was not sure where to add the script, so couldn't test it. I could not figure out where Skins\Default\Scripts\toolbar.js is located. Did you mean to create this new path under Projects/Skins... folder and link it back to the Default.htm page?

Would really appreciate some help. Thank you!

[NorthEast]

Would really appreciate some help. Thank you!

Ok, this thread is 4 years old now, and the good news is that since then, MadCap have added support for Google Search in Flare - for HTML5 top nav or side nav.

It's in the help: https://help.madcapsoftware.com/flare20 ... Search.htm

[arshabhirai]

Would really appreciate some help. Thank you!

Ok, this thread is 4 years old now, and the good news is that since then, MadCap have added support for Google Search in Flare - for HTML5 top nav or side nav.

It's in the help: https://help.madcapsoftware.com/flare20 ... Search.htm

Thanks for the prompt response, Dave.
I have been following the steps provided in Flare's help, but ran into some issues and ended up in this thread. I was trying to check how it will look before doing the Google verification. Is that possible or the verification must be done before testing the search? And I am using a free Google account.

Here is a what I did:

I changed the Search Engine type to Google Search and added the Google search context key. When I generated the output, the search box was not usable - the input did not work (couldn't click inside the search box). When I hid Flare's default search box, I didn't seen any search option.

I tried following the steps provided by Ken, but no joy yet. I just started dabbling around with this, and looks like it will take some time to implement this properly.

[NorthEast]

I haven't used Google search in a few years, but I'd assume you have to verify your site and submit it for indexing - you'll not see search results until it's indexed.
Steps are in that help page I linked to: https://help.madcapsoftware.com/flare20 ... Search.htm

You shouldn't have to follow steps in this thread - this thread was written before Google search was included in Flare.

[arshabhirai]

I haven't used Google search in a few years, but I'd assume you have to verify your site and submit it for indexing - you'll not see search results until it's indexed.
Steps are in that help page I linked to: https://help.madcapsoftware.com/flare20 ... Search.htm

You shouldn't have to follow steps in this thread - this thread was written before Google search was included in Flare.

It's kind of working now. I will post my findings once I have more info. Cheers

[arshabhirai]

I didn't realize this earlier, but it looks like Google ads will be displayed with a free account. It's possible to implement an ad-free custom Google search engine using JSON API (a bit of work is involved here as well). However, only 100 search queries per day are free, after which it will cost $5 per 1000 search queries. I wanted to implement something like Oracle Cloud docs https://docs.cloud.oracle.com/iaas/Content/home.htm, but I am not too keen on going this route now. Any thoughts? Or maybe Elastic search is the way to go?