Script tag reference

The script configures itself entirely from attributes on its own <script> tag. It finds that tag with document.querySelector('script[data-app-id]') — the first match on the page — so a second tag carrying data-app-id is silently ignored.

<script
  async
  type="module"
  src="https://cdn.jsdelivr.net/npm/@candid-leap/wf-algolia@1/dist/index.js"
  data-app-id="YOUR_ALGOLIA_APP_ID"
  data-search-key="YOUR_SEARCH_ONLY_KEY"
  data-index="YOUR_INDEX_NAME"
></script>

Required

Attribute	What it does
	Your Algolia Application ID. Also how the script locates its own tag.
	Search-Only API key. Never the Admin key — the tag is public.

Missing either one throws during startup. The error is caught and logged as [wf-algolia] Initialization failed: followed by the message.

Index

Attribute	Default	What it does
	none	The default index. Any element without its own wf-algolia-index uses it.

Tracking

Attribute	Default	What it does
	off	Enables Algolia Insights click and conversion tracking. Only the exact string true turns it on.
	off	Persists the Insights user token in a cookie. Left off, tracking stays cookieless.

Timing

Attribute	Default	What it does
	250	Milliseconds after the last keystroke before querying.
	data-debounce, else 150	Debounce for the autocomplete dropdown only.

The autocomplete debounce is a fallback chain

The script reads data-autocomplete-debounce first. If it is absent it uses data-debounce. Only if both are absent does it use 150. So setting data-debounce="400" also slows the autocomplete to 400ms unless you set the autocomplete value explicitly.

Class names

Attribute	Default	What it does
	is-active	Class added to a selected filter item.
	is-hidden	Class added to filter items hidden behind "show more".

Both exist so the script can drive classes you have already styled in Webflow rather than imposing its own.

Result rendering

Attribute	Default	What it does
	30	Words per snippet. Floored at 1; a non-numeric value falls back to 30.
	*	Comma-separated fields to snippet, or * for all.
	mark	Element wrapping highlighted matches.

An invalid highlight tag fails quietly

data-highlight-tag is checked against a tag-name pattern. Anything that does not match silently reverts to mark — there is no warning, so a typo looks like the attribute was ignored.

Notes that catch people out

Footer, not Head. The script reads attributes off your elements, so the DOM has to exist when it runs.

type="module" is not optional. The CDN publishes an ES module. Without it the browser throws on the first import.

Booleans are string comparisons. data-insights and data-insights-cookie are on only when the value is exactly true. "TRUE", "1" and "yes" are all off.

Related

• Install the script
• Attribute reference — the wf-algolia-* attributes you put on elements
• CSS hooks