<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=172061883552505&amp;ev=PageView&amp;noscript=1">

Subscribe to Our Blog

Stay up to date with the latest marketing, sales, and service tips.

How To Add A Google Custom Search To Your HubSpot Site

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

  1. Go to Https://cse.google.com
  2. Click the add button at the top
  3. Enter the root URL of the site
  4. Click create at the bottom
  5. From the sidebar, click edit search to expand the options --> then click search features
  6. Click the advanced tab
  7. Scroll to Query Parameter Name and sit it equal to "s" - without quotes.
  8. Click on save
  9. From the sidebar, click "Look and Feel"
  10. [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.
  11. Click the "Layout" tab
  12. Select "Results Only"
  13. Click "Save and Get Code"
  14. Leave this tab open for now

Part 2: Implementing Your Google Custom Search Bar On Your HubSpot Website

  1. In HubSpot, go to Content --> Design Manager
  2. Choose a template to add the search results to. (We recommend a cloned copy of your regular site page for this)
  3. 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)
  4. Copy the code we are providing in this blog post and paste it in this newly created "HubL Template" module. Click "Done" to save
  5. Drag another "HubL Template" module into the main content area of this template
  6. Copy the code from "Part 1: Step 13" above. Paste this code into the second created "HubL Template" module. Click "Done" to save
  7. Click "Publish Changes" to save the template
  8. Go to Content --> Website Pages
  9. Create a new page using the newly created template
  10. In the page editor, click on settings. Set the URL equal to "search" (without quotes)
  11. 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


Download now!

Rob Steffens

Rob Steffens

I am the Director of Sales & Marketing here at Bluleadz. I'm a recent newlywed who enjoys spending time with my wife vegging out and binging our favorite shows or getting some exercise on the Racquetball court.