2 Ways to Get HubSpot Site Search Up and Running

As the web continues to grow, search bars are becoming an expectation.

Visitors are in a hurry. They don’t want to have to search for the content they’re looking for; they want it brought to them.

This isn’t just some millennial entitlement thing either; the ability to effectively search through your website becomes critically important as your page and post counts rise.

At a certain point, some content can easily end up buried. Search can help quickly resurface that information — keeping your visitors happy and on your site.

There are many third-party tools you can use to add search to your site, but within the last year or so, HubSpot has been working on bringing a first-party solution to the table. It comes in two main flavors:

1. The easy-to-set-up Site Search module and template; and
2. The more powerful API that requires a developer to set up and configure.

Let's dive into both of these options:

Site Search Module

If you want to get up and running fast, the Site Search module is what you’re looking for. It comes in two pieces: a results template and a search input.

From the Design manager, create a new template and set its type to "Search Results Page." Simply include whatever modules and styles you need to make this page to match your site and the template is good to go.

via GIPHY

To tell HubSpot to use your new template, navigate to Content Settings > Website > Pages > System Pages; from here, select your new template in the drop-down under "Search Results" and choose the URL you would like to use in the field below it. Save your settings and you’re done.

While this is a great start, a step up would be to include the "Site Search Input" module across all your templates so that visitors are able to start a search from any page. The header/navigation or footer is often a good location to put the search and it’s a common enough location that visitors will know to look there for it.

Advanced Usage (API)

If you’re looking to do something a little more custom, this is the choice for you.

Maybe you want to build a search overlay for the results rather than a dedicated page. Or, maybe you want to include handy type-ahead suggestions as the visitor types. Custom interactions like these are when you would reach for the API.

Unlike the basic set-up, there’s no hand-holding. The API also requires familiarity with JavaScript since you’ll be doing everything in code.

via GIPHY

In addition to being able to create custom search implementations with the API, you’re also able to configure the way results get ranked by boosting results based on recency or popularity. It also gives you the ability to pick and choose which types of content are included in the results (posts, pages, HubDB rows, etc).

Our go-to solution for search which has proven pretty effective is to use the API to provide a live list of results as you type. You can experience this if you use our blog search. In fact, we even have a mini-tutorial on how we built it.

Final Thoughts

It’s worth noting that neither of these solutions are full replacements for dedicated search tools, both lacking some key features that many third-party tools offer. Namely, controls over what gets indexed, fine-grained control over the ranking of results, and importantly fuzzy/typo tolerant search are all missing.

That said, not everyone needs/wants all that (in fact, we use HubSpot’s Site Search for the majority of our clients) and those tools can often be difficult to set up—even for developers. If you’re looking for something simple, to get something up quick, or without dragging in yet another platform into the mix, then HubSpot Site Search is likely a good fit for you.

If you’re looking to get started with HubSpot search, a good place to start is the blog post they used to introduce it, where they go into much more detail about setting it up including some tips and best practices.

If you’re more interested in building something custom via the API, then their API Docs would be your best place to start. Not only do they cover the various arguments you can pass it, but they’ve also got a handy example of a response.