Slater Search embed

One search box across your whole Webflow site — every enabled collection and your static pages — relevance-ranked, wired up with HTML attributes. No JavaScript to write.

Slater Search builds on Slater Data: the same script, the same list keys, the same data binding. If you are embedding a single CMS list rather than site-wide search, start with the Slater Data guide instead.

Site-wide search and AI search need the Search plan. Every new site starts on a 14-day trial with full Search access.

1. Load the script

One tag, once per site, before </body>. It is the same script that powers list embeds, so if you already use Slater Data you have it.

<script src="https://api.slater.app/embed/v1/slater-search.js" defer></script>

2. Add a search block

Three things: a wrapper carrying a key, an input pointed at that key, and at least one template card. The results container defaults to the wrapper itself, so the input and the results can live side by side.

<div data-slater-search-list="site">
  <input type="text" data-slater-search="site" placeholder="Search…" />

  <a data-slater-template data-slater-item-href>
    <h3 data-slater-bind-text="name"></h3>
    <p data-slater-bind-text="matchedContext"></p>
  </a>
</div>

Attribute	On	Value	Required
`data-slater-search-list`	a wrapper element	the block's key — shares one namespace with list keys, so don't reuse one	yes
`data-slater-search`	`<input>`	the same key	yes
`data-slater-template`	a card inside the results container	no value for the default card	yes — templates are removed from the DOM on load, so mark placeholders freely

Results carry name and matchedContext (a snippet around the match) on every collection and static page, so one template covers the whole site. For per-collection cards, see global site search.

3. Add the surrounding states

A search block idles until the visitor types enough characters. Author both an idle and an empty element — they never show at the same time, and a failed request shows neither, so "no results" is only ever a true statement about your data.

<div data-slater-initial="site">Start typing to search the site.</div>
<div data-slater-empty="site">No results.</div>
<span data-slater-count="site"></span>
<button data-slater-load-more="site">Load more</button>

Optional configuration

Attributes cover most cases; a config block is handy for defaults. Put it before the script tag — attributes always win.

<script>
  window.SlaterSearchConfig = {
    // siteId is auto-read from <html data-wf-site> if you omit it.
    search: {
      site: {
        minLength: 2,       // characters before the first request
        initialLimit: 20,   // results on first load / per page
        loadMoreAmount: 20  // results added per Load More click
      }
    }
  };
</script>

Where to go next

Global site search covers per-collection templates, deep links to a results page, and filtering the collections a block searches. Typeahead adds inline word completion to any input.

The shared foundations — finding your field slugs, binding each field type into a card, and the full attribute index — live in the Slater Data guide, and apply unchanged here.