Skip to main content

How it works

There are three moving parts, and knowing which one you are looking at makes almost every problem easier to place.

The three parts​

Your Webflow site holds the markup and the styling. Every element the script touches is one you drew, and every state it shows is one you designed.

Your Algolia index holds a searchable copy of your content, tuned to answer in milliseconds. It is not your database — it is a projection of it, shaped for search.

The script is the bridge. It reads attributes off your published DOM, turns them into Algolia queries, and renders the answers back into your templates.

What happens on page load​

  1. The browser loads the script from the CDN, deferred until the document is parsed because it lives in your footer.
  2. The script finds its own tag with script[data-app-id] and reads its configuration.
  3. It scans the DOM for wf-algolia-element attributes and builds an internal map of which element plays which role.
  4. Elements that need data immediately — a browse page, a recommendation section — query straight away. A search input waits for typing.
  5. window.WfAlgolia is attached and a ready event fires.

Everything after that is event-driven: someone types, or clicks a filter, or scrolls to the bottom, and the affected surface re-queries and re-renders.

Rendering uses your templates​

The script does not generate markup of its own. It finds the template you marked, clones it once per result, fills the bindings, and inserts the clones.

Clones are marked with the class wf-algolia-injected, which is how they are cleaned up before the next render. This is why your styling survives a re-render: the elements are copies of your design, not a component library's idea of a card.

Where the data comes from​

Getting content into Algolia is a separate job from searching it. Three routes:

  • The WF-Algolia sync mirrors Webflow CMS collections into Algolia and keeps them current as items change.
  • The Algolia Crawler indexes published pages that are not CMS items — static pages, landing pages, PDFs.
  • Direct indexing, for anything else that does not live in the Webflow CMS.

The sync holds your Algolia Admin key server-side. The browser only ever receives the Search-Only key — see Security.

Why nothing crashes​

The script warns instead of throwing. A missing template stops one section from rendering; the rest of the page carries on.

That is the right behaviour for a published site and the wrong behaviour for debugging, which is why the console matters so much here. Every misconfiguration announces itself there and nowhere else.