Google Programmable Search Engine - On specific page

Hi, 

I've been building a website and needed a search bar on two pages which will act as resource directories. Currently, we've used an accordion to create a drop down menu. The titles are umbrella terms for different types of wellness practices / integrative healthcares and when you click on one you then get a list of resources in that category.

However, we also want people to be able to type in key words in a search bar so they can get every anxiety resource, for example. The search bar allows people to not be limited to one wellness practice and find everything we have under 'Anxiety.' 

As SquareSpace's search bar feature is down for the time being, their help team suggested we use Google's Programmable Search Engine. While there are clear instructions on adding this search bar to your site's header, I can't find instructions on adding the search bar to 2 specific pages. I've attached a screenshot of the layout with SS's search bar to show how we want it to look with Google's Programmable Search Engine. 

I'm not especially proficient with coding so guidance / advice would be greatly appreciated. 

Thanks, 
Mercy :))

Hi,

Can you post Google Search Engine code?

Hi,

Thanks for your response, please find the code below:

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

Mercy :))

On 5/9/2022 at 3:37 PM, IHS said:

Hi,

Thanks for your response, please find the code below:

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

Mercy :))

Hover Page Name on Pages > Main Navigation or Not Linked > Click Gear icon > Advanced > Paste code on right side

Thank you so much! Trying this now.

I've tried this and it has worked, however it has put the code above my header and it looks wrong / clunky. Do you, by any chance, know if one can choose the specific placement on the page itself?

Thanks, 
Mercy :))

On 5/13/2022 at 5:22 PM, IHS said:

I've tried this and it has worked, however it has put the code above my header and it looks wrong / clunky. Do you, by any chance, know if one can choose the specific placement on the page itself?

 

Thanks, 
Mercy :))

Try edit Page > Add a Code Block (anywhere) > Paste the above code