Improving Hubspot’s Search Capabilities With Custom Modules

Hubspot’s COS and CMS systems are great tools for implementing a company blog, pages, and calls-to-action (CTAs). However, one place that Hubspot lacks default support for is custom inline searching.

We’re going to focus on the Hubspot provided modules for searching within your blog, their limits, and how we can get past them until a full solution is implemented.

The Limits

Currently, Hubspot’s search modules only support searching through Google. Instead of having the search results display inside of your website–and within your template and design–the search results are sent to Google. So, you have two options: First, you can allow the redirect to Google.com (example below) where it will search your website through theirs. Second, you can allow a “popup” of the same Google search results on your page.

facebook-blog-stat.png

While these default modules are work just fine, there are some limitations to them. Sending your users outside of your website to Google may appear unprofessional or may break the natural flow people take though your site. It’s also good to display search results inline (directly) on your website to prevent users from distraction and keep them focused on the offerings of your pages.

For designers and developers, this can also be a big problem. Designers and developers usually want to present search results and blog posts in a certain way, matching their specific designs and content requirements. Having the ability to structure and customize those search results is a big boost to the presentation and power of your Hubspot website.

What Can Be Done?

Utilizing Hubspot’s HubL language is one of the first tasks. Using its built-in features, we can achieve some of the same results as we would normally be able to with PHP, which Hubspot does not support in its templates. Although the HubL code options provided are somewhat limited, using a mix of a custom HTML form to pass the search criteria and a custom loop to display the blog results on your website based on that criteria, you can achieve great results.

Here is a basic example of what you can achieve with some HubL and Javascript, without much styling:

HubSpot_Search.png

There are two nice things you can do with this. First, you can choose what to search against (titles, content, tags, etc.) from within your own website. This allows you to add or keep any special links or meta you want to display around your search results.

Second, you can use your custom search form to highlight the words searched for in all of the displayed content, or even append special social media buttons or author information around each blog post in your results.

What Else Does This Mean?

This can lead to a variety of outcomes for your current and future projects. The custom-built code and modules can be easily modified to display blog posts around your site in a fully customizable way. This includes features like a grid system for your main blog listings and custom effects and animation on your posts/images. You can even upgrade your search form to include checkboxes or drop downs to easily find and sort different content.

Another important factor to note is the HubL code used. This can be a great example and base for building bigger functions and can lead to some great global modules to use on multiple sites.

 

The Conclusion

What does all of this come down to? Why do you need this, and why is it an important step in Hubspot customization?

Custom search is a lightweight yet powerful feature to add to any Hubspot project. It can drastically improve the presentation of your website and company and provide the feeling of a well-finished product.

We’re going beyond the limits of Hubspot’s built-in modules and bringing more control to the designers and developers working on your project. Hopefully Hubspot continues to improve their HubL support and add new features and tools for all of us.

With a little time (and a little HubL), there’s a chance to accomplish some great things in Hubspot.


If you have questions or inquiries about HubSpot’s search capabilities and how you can implement it within your company or organization, feel free to contact us. We’re happy to listen…