Multiple GCSE's on page at one time.

Question

Using the new GCSE code like so:

                    // google custom search engine for the whole site
                (function() {
                    var cx          


        

Answer 1

I was struggling with this same problem and came across this post on the google product forums.

Basically, the answer is to use a single CSE and differentiate what you're searching using refinements, which allow you to scope the searched URLs using labels in your CSE settings.

Note: make sure to set the refinement to 'search only sites with this label' assuming that's what you want.

Then, in your HTML code, specify the default refinement you want to use for each results box like so:

For my use, I wanted to not display the default refinement tabs (and have the two result boxes look like they were independent) so I used CSS to hide the 'gsc-tabsArea' elements.

More info on v2 CSE API and refinements...

Here's a working codepen: http://codepen.io/mikedaul/pen/xqxYOO?q=flowers

Hope this helps!