Video: Create a Search Module on your Site with Content Search API

Hi everyone. In this video I would like to demonstrate a functionality that I'm personally really excited about, and that is the HubSpot Content Search api. The Content Search API allows you to pass a term to the API and it's going to give you all the results. So website, pages, blog post Hopi bureaus where that term is being used, but it's also going to determine what is the best result by checking where the term is being used. So if the term is being used in the page title, in a method description and in different headings, then the API is going to decide that that is probably one of the better results. Now what we see right here is a website page with a default text block module, but also a search bar. And this search bar is generated by using React. By using React. We can make API calls to the content Search API and show the results directly on the website page without having to refresh the page.

So if I'm going to type a term in my search bar and I press on the enter button, then this React application is going to make an API call and it's going to give us all the results where this specific term is being used. Now you see that in our cards, we also highlighted the terms that are available. And this is something really cool that the Content Search API does. It's going to give us all the results with the basic content. So we have the page title, we have, uh, an, an excerpt of the content. We of course have a link to that specific page. But's also going to wrap all the terms in content that are available with a little spa that we can use to give it some additional styling. So that is, that is really nice functionality. Now, if we take a quick look at the API and this is still available in the legacy docs, then you see that you have a lot of options that you can use to fine tune this specific API functionality.

You can pass at the search term. Make sense, right? Um, you can determine which type of content you want to return. So you could also determine that you only want to return block posts. Um, you can determine which domain you want to retrieve results from. A really important program that you can pass to the, uh, content search API is the language because if you have the, uh, search functionality on a Dutch page, you do not want to show all the English pages in the results. You can, uh, specify, uh, where you want to search for. So you can search through the whole page, the title of the description, the html, but you can also limit it to a specific property to fine tune your results. And we have a lot of other different options that we could use. Now what we did is in our module, we added a few settings that is going to allow us to fine tune results based on where this module is being used.

So we could use this on a block page to only return results from a specific block by checking these check boxes and specifying a language or even specifying a path prefix. And this is really nice functionality because you can also limit the results based on the pop prefix. So if you only want results for a knowledge center and you have knowledge center in your sl, you can add a prop pop prefix to limit those results. You can fine tune this search functionality to only show the content that is relevant for the page that this module is on. Now, if we take a look at the code, you'll see that we're going to make a call to the Content Search api, and this is currently the fee two version of the api. Um, the first thing we're doing is we're passing it a portal id. Then we're passing it the search term, and that is the, uh, value that is being bossed.

In the little search form that we have on our page, we're going to pass the language if it's set. So we have a check if it's set, we're going to pass the limit, which is also available in the settings of this specific module. But you can use that and, and implement that anyway you want. Um, we're going to use an offset because on this specific page we have a low more button to limit the results, um, and only show the most relevant cards based on the search term. We have, um, uh, the, uh, type limits implemented. So if someone selected pages and block in, uh, this specific module, we're only going to retrieve site pages and block posts, and in this case also the listing page. But we also include knowledge articles and landing pages. Um, and we have the option to implement multiple Bob prefixes to also decrease the results available based on these settings. Um, now if we take a quick look at the code of the React application, you'll see that we have a basic state and then we have a fetch post functionality. And this fetch post functionality is going to be called each time someone is passing a term on the website. Um, and we're passing it all the options that are set in this specific module. So that's going to fine tune the AP API call.

And by allowing the user to set these options through the module, they can use this functionality on different pages with different results. So this API allows you to create a module, um, or a marker application on your website page, um, where the user can search through your whole website, but you can also limit the functionality to only search for specific content. So this is a great addition to your HubSpot website. Thanks for watching. And if you want to learn more about cool functionalities about hotspot, the api, the CRM or cms, make sure to follow me or Bright Digital. Have a great day.