WF-Algolia — Deep Dive: CDN Search Script

Boot sequencewindow.Webflow.push() → emit('ready')

1 · Webflow.push()

Boot hook — runs from window.Webflow.push() when the site is ready.

2 · Dev linter

Only if data-wf-algolia-debug="true". DOM validation, console-only.

3 · initConfig

Script-tag data-app-id + data-search-key required — fails loud if missing.

4 · initClient

algoliasearch singleton — search-only key.

5 · scanAttributes

Finds wf-algolia-element markers; detaches + registers templates.

6 · Feature inits

Each experience initializes only if its DOM marker exists.

7 · exposePublicAPI

window.WfAlgolia, then emit('ready').

Configuration cascadeevery setting resolves through the same 4-tier cascade

Element attribute

wf-algolia-* on the element itself.

Nearest ancestor attribute

Closest ancestor carrying the setting.

Script-tag data-*

Site-wide defaults on the embed tag.

Built-in default

Shipped fallback value.

Experiencesinit only if present in DOM

Browse

Pagination modes, URL sync, base filter.

Scoped search

search-input driven.

Merged multi-index search

One query across several indices.

Autocomplete

Multi-section.

Detail page

Seed from URL path / query param / CMS value.

Recommend

Static lists

Hit-preview

Facet-stat

Standalone filter groups

Filter system

State

FILTER_STATE holds active refinements; STAGING_STATE defers apply until commit.

FILTER_STATESTAGING_STATE

Hierarchy

Parent → child groups via wf-algolia-refines; filter:parent-change / filter:parent-stage-change re-scope children.

Widgets

checkboxtoggleselectrangefacet searchshow-moreactive-filter tags/chips

Deep Dive — CDN Search Script