Skip to main content

Raw Embedding

Raw embedding can be used when you want the search UI to be part of the page content. This often used for the more custom search interfaces, some times called "archive views" like an event or product listing with custom filters.

This pattern can be used together with the modal patterns. For example a modal pattern can be used for the global site search and raw embeding for the more specific use cases.

It can be implement by setting modal: false and passing in a custom container to the container option. This just renders the UI into the container without any modal behaviour such as focus trapping or container scrolling.

const ui = new FindkitUI({
    publicToken: "p68GxRvaA",
    container: ".findkit-container",
    instanceId: "my",
    minTerms: 0,
    infiniteScroll: false,
    header: false,
});

Considerations​

  • If you have other FindkitUI instances, for example another one using the modal embedding pattern, you must pass in instanceId to avoid conflicts
  • You may want to disable the automatic result loading on scroll with infiniteScroll: false to allow users to reach the footer.
  • Add fetching indicator

Demo​

Open in anew tabview source code inGithubor edit online inCodesandbox