Custom Fields

Custom fields are additional information saved within the indexed page which are returned when the pages are searched. These can be used to render additional content directly on the search results view such as product prices and images on E-commerence sites, author names on blogs etc.

Custom fields are defined using the customFields entry in the Crawler Meta Tag.

The fields are accessible in the Hit slot override.

import { FindkitUI, html } from "@findkit/ui";

const ui = new FindkitUI({
    publicToken: "<TOKEN>",
    slots: {
        Hit(props) {
            const fields = props.hit.customFields;

            return html`
                <h2>${props.hit.title}</h1>
                <img src="${fields.thumbnail?.value}" />
            `;
        },
    },
});

In the target page head:

<script id="findkit" type="application/json">
    {
        "customFields": {
            "thumbnail": {
                "type": "keyword",
                "value": "https://example.com/image.jpg"
            }
        }
    }
</script>

Demo

Here's an example where we render the embedded example links directly on the search results. The custom fields are created using the Docusaurus MDX support.

Open in a new tab view source code in Github or edit online in JSBin or Codesandbox