WF-Algolia for Webflow

Algolia-powered search, filtering and browse pages for any Webflow site — using HTML attributes only.

No JavaScript to write, no build step, no configuration files.

1. Paste one script tag into your Webflow footer.
2. Add wf-algolia-element="…" attributes to your Designer elements.
3. Publish. The script reads your DOM, queries Algolia, and renders results into the templates you already designed.

What do you want to build?

A search barA box that queries your index as the user types — header search, autocomplete, or a federated dropdown across several indices.

A browse pageA catalog, directory or listing that loads with results already showing — pagination and shareable URLs included.

FiltersCheckboxes, radios, ranges and dropdowns that narrow results — wired with attributes, styled entirely by you.

Something isn't workingWalk the verification checklist, then scan the common issues table for the fix.

New to Algolia? Four words you will meet on every page:

• An index is Algolia's searchable copy of your content.
• A facet is a field you can filter by — category, price, location.
• A hit is one matching result.
• A query is one request to Algolia, sent each time the user types or changes a filter.

Attribute reference → Components → Examples →

---

Search or browse?

They are separate features with separate pages, and most sites use both: search in the nav, browse on the listing pages.

	Search	Browse
Starts when	The user types	The page loads
Before input	Nothing is shown	The first page of results is already there
Root element	wf-algolia-element="search-input"	wf-algolia-element="browse" wrapper
Typical surface	Header search, autocomplete, federated dropdown	Catalog, directory, blog listing, shop
Filters	Rarely	Yes — filters live inside the browse wrapper
Pagination	No	Yes — load more, numbered, or infinite scroll
Shareable URL	No	Optional, via wf-algolia-url-sync="true"
Sorting	No	Yes — switches between replica indices
Start here	Search	Browse

If you want a header box that drops results as someone types, you want search. If you are building a page that should already show results when it loads, you want browse.