Search is an important part of websites as it helps your visitors find their desired content quickly. With Kentico Kontent, you can easily integrate external search engines so you don’t need to implement a complicated search algorithm yourself.
In this blog post, we’re going to walk you through a sample integration of the Kentico Kontent with Algolia.
Getting Started with Algolia
The first step in the process is to create an account with Algolia. Once registered, you can log in and find the API keys in your profile. There are three basic pieces of information that you need to use when calling Algolia’s API:
Application ID – to identify the application we want to work with
Search-Only API Key – the API key usable for search queries (can be visible publicly so it can be used in the front end)
Admin API Key – for managing indexes (needs to be kept private so it’s available in the back end only)
We would also recommend going through Algolia’s documentation to get familiar with Algolia’s concepts, API, and prepared UI widgets.
Now there are three basic steps to implementing the code:
Index current data
Ensure indexing when data changes (using a webhook)
Search through the index and display results (when web visitors submit a query)
Index Current Data
Data should be indexed from the back end since indexing uses the private Admin API Key. We’ll use the Algolia.Search NuGet package, to ensure smooth working with Algolia’s API, and the Kentico Kontent Delivery .NET SDK, to acquire the blog post data from the Kentico Kontent app.
Firstly, we prepare a model called BlogPostSearchModelin which we store the data of the blog posts. The model needn’t only contain texts to be indexed—we can add various other data to the Algolia index for use later on in displaying results. By doing this, you can save time and don’t have to first obtain the data from the Kentico Kontent application. For our example, we’ll add the URLSlug field to be able to create links to blog posts.
Then, we prepare the method for creating BlogPostSearchModel objects from data returned by the Delivery API as an object of the ContentItem type.
After that, we create a method that acquires all blog posts using the Delivery API and prepares a list of the BlogPostSearchModel instances leveraging the method above. We use ProjectID to identify the project from which to get blog posts.
This is a basic approach to acquiring data from Kentico Kontent, which we’ve chosen for demonstration purposes. For production code, we would suggest using a strongly-typed-models approach instead, as it is the recommended way of receiving content via the Delivery API.
We’ll also need a method that will sanitize the content of rich text fields, i.e., remove HTML tags and escape any special characters that might cause an error during indexing.
Now we can implement a method for indexing the given blog posts in Algolia’s index—to be used both for initial indexing and future data indexing.
Finally, we can leverage these methods to acquire our current blog posts and index them in Algolia.
Ensure Indexing When Data Changes
Kentico Kontent supports webhooks, which can notify your system whenever you publish new content or edit published content. To enable this, you need to set up a webhook as described in the documentation and implement an MVC action method that will handle the message from the webhook to the system.
This method will handle only HttpPost requests on the particular route specified in the “URL address” field in our webhook setting. (For example, if we use the “webhook” route, the URL should be “https://ourdomain/webhook”.) We should also check that the message wasn’t modified on its way. The signature, sent along with the message, contains a base64 encoded hash of the message. So, first, you need to prepare a method that will compute the expected signature.
Then, we can implement the action method that will handle the webhook messages:
Search and Display Results
We’ll be performing a search on the front-end side so that we can then call Algolia’s servers and receive a response directly without calling back to our servers. This approach should ensure much better performance. We can also leverage existing Algolia widgets for easier implementation of the UI. So, how will we build our UI?
First of all, we need to prepare divs in the index.html that will act as containers for an input field into which users can enter their search queries and other UI parts like paging, statistics, and search results.
The layout of the particular item in results is defined by a template. In this example, the template consists of HTML code placed within the <script> tag (so it’s not rendered to a page) with an ID “hit-template”. There are two types of variables that can be used in the template which Algolia’s script automatically resolves:
Variable within two pairs of curly brackets—these are properties from the index.
Variable within three pairs of curly brackets—where we reference the _highlightResult object which contains properties from the index, with HTML highlights on the matched words.
In this walkthrough, we’ve shown you how easily you can integrate Kentico Kontent with Algolia to enable searching of your website content. This functionality will help improve user experience.
Are you going to give Algolia search a try?
I’ve been leading the Customer Education and Consulting teams at Kontent.ai. My favorite topics are merging technical and marketing communication, UX writing, content modeling, team management, and virtual reality. You can find me at @tomnosek on Twitter or get links to my blog posts at nosek.net.