Jump to content

Google Programmable Search Engine - On specific page

Recommended Posts

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

Example Image 2.JPG

Link to comment
  • Replies 6
  • Views 635
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.