Google Custom Site Search will allow you to create a custom search engine for your individual website, blog and more. Having a Google Custom Site Search installed on your site will provide your individual site visitors with a high quality search experience to help them find what they are looking for, and find it fast.
Follow the video below for a step-by-step tutorial on how to add a Google Custom Site Search to your HubSpot website. You can also view the step by step transcript at the bottom of this post for more help.
How To Add A Google Custom Site Search To Your HubSpot Website: A Video Tutorial
Search Form Code Snippet
How To Add A Google Custom Search To Your HubSpot Site: A Step By Step Transcript
Part 1: Create a Google Custom Search Bar
- Go to Https://cse.google.com
- Click the add button at the top
- Enter the root URL of the site
- Click create at the bottom
- From the sidebar, click edit search to expand the options --> then click search features
- Click the advanced tab
- Scroll to Query Parameter Name and sit it equal to "s" - without quotes.
- Click on save
- From the sidebar, click "Look and Feel"
- [Optionally] Use the "theme" tab to set a pre made theme, or use the "customize" tab to completely customize the style of the search results. Click save when done.
- Click the "Layout" tab
- Select "Results Only"
- Click "Save and Get Code"
- Leave this tab open for now
Part 2: Implementing Your Google Custom Search Bar On Your HubSpot Website
- In HubSpot, go to Content --> Design Manager
- Choose a template to add the search results to. (We recommend a cloned copy of your regular site page for this)
- From the left sidebar (you may need to expand this by clicking the arrow on the left) drag a "HubL Template" module onto your template. Where you place this will be dependent on the design of your website. (We will be using our header as an example)
- Copy the code we are providing in this blog post and paste it in this newly created "HubL Template" module. Click "Done" to save
- Drag another "HubL Template" module into the main content area of this template
- Copy the code from "Part 1: Step 13" above. Paste this code into the second created "HubL Template" module. Click "Done" to save
- Click "Publish Changes" to save the template
- Go to Content --> Website Pages
- Create a new page using the newly created template
- In the page editor, click on settings. Set the URL equal to "search" (without quotes)
- Give your page a title and publish
You should now have a Google Custom Site search with the results displaying at www.yourdomain.com/search