Skip navigation

Integrate search into your app

Jan Cerman
8 min read
Download PDF

If your app deals with a lot of content, it might be a good idea to let your users search for it.

Table of contents

    Key points

    • The recommended approach is to use a dedicated external search service. It works for small and large projects and can scale as you go.
    • An easier alternative to a manually-built external search index is an index automatically built by crawling your website. But it provides worse search performance.
    • For smaller projects, your app can load all content and use in-app filtering for search.

    Integrate an external search service

    External search services can provide advanced features such as typo tolerance or custom ranking of the search results. They also often come with SDKs and tutorials to help you integrate them within your app.

    When integrating an external search service, you need to:

    1. Design the index. Ask yourself what data and in what structure you want in the index.
    2. Create a service that reacts to content changes and propagates them to the index.
    3. Initialize the index with initial data.

    If you want to build a simple index over your site’s content quickly, you can use a service (such as Algolia crawler) that automatically crawls your site and builds a search index over its content. It is less flexible than a manually designed index but can be sufficient in certain cases with less work.

    1. Design the index

    Define what content you want to search for. You might have multiple types of content like articles, products, and more. Think about the search experience you want to build.

    What do you include in the index? Consider the following guidelines:

    • Include the data you want to display in the search results. This avoids fetching content items for each search result.
    • If you want a faceted search, include any metadata you want to use for facets. Consider all information that might be relevant such as taxonomies, languages, collections, and so on.
    • If your searchable piece of content is made of multiple linked content items, include the data of the linked items so that your search record is complete.
    • Include the identifiers of all content items to be able to update the index when content items change.

    To find more about designing a search index, check Algolia's guide about preparing data for a search index.

    2. Create a service that reacts to content changes

    To ensure the search index stays up to date, you need to react to the content changes made in your Kontent.ai project. You can automate the process of updating your search index by either setting up webhooks and responding to notifications, or asking for the latest changes at your own pace with Sync API.

    • With webhooks, you provide a URL such as https://myapp.com/update-search-index and you get notifications to that URL right after any content changes. Based on the notifications, you decide whether to add new content or remove records from your search index.
    • With Sync API, you ask the API if there were any recent changes to the content you’re interested in. If there are changes to the process, you decide whether to add new content or remove records from your search index. And after a while, you ask again.

    Syncing changes in linked items

    If there’s a change in a linked content item that isn’t searchable on its own, you first need to check if the item belongs to any searchable content item.

    To find which search records to update, you need to query your search index for the content item’s identifier. Once you know which records are affected, you can update them with fresh content.

    3. Initialize the index

    If you already have content items that you would like to have in the search index, you will need to insert them into the index before you can start using it. It can be similar in functionality to the endpoint that syncs changes, but it needs to go through all items in your Kontent.ai project and sync all of them.

    You’ll call this endpoint only manually when initializing the index and occasionally when you want to rebuild the index from scratch. For example, when you want to change the data saved in the index for each item.

    Examples of external search integration

    You can start your integration with one of our example integrations.

    For more integration examples, check the following guides.

    Algolia

    Hawksearch

    Use in-app filtering

    In-app filtering can work well for smaller web applications and single-page applications. For example, if you have a smaller project (up to 100 content items) and don’t need a robust search, you can save the content items from your Kontent.ai project in your app’s memory and filter the content during runtime.

    With this approach, you gain control over the search index and its content. Using an existing search library (e.g. Fuse.js) in your app can help. However, it also means that to change the search behavior, you often need to adjust your code manually or replace the search library with another one.

    When you need to add a search to your app, an external search service fits the bill in most cases. After you complete the initial integration with the service and add logic for reacting to content changes, you get a search with an index that’s automatically updated.

    What's next?