CSS hooks
The script never ships a stylesheet. Everything you see is your Webflow styling — the script's only visual contribution is adding classes and data attributes you can style against.
That means two things. You can style any state without fighting specificity. And nothing changes appearance until you style it.
Classes you choose
Two class names are configurable on the script tag, because you have probably already designed the states in Webflow.
| Class | Set with | Applied to |
|---|---|---|
is-active | data-activeclass | A selected filter item |
is-hidden | data-hideclass | Filter items hidden behind a "show more" control |
Design a combo class in Webflow with the matching name and it will be applied automatically. If your project already uses different names, point the script at them rather than renaming your classes.
Classes the script owns
These are internal bookkeeping. Style them if it helps, but do not rely on them as an API — they exist so the script can find and clean up its own work.
| Class | Meaning |
|---|---|
wf-algolia-injected | An element the script cloned from one of your templates. It removes these on the next render. |
wf-algolia-focused | The keyboard-focused item in a dropdown |
wf-algolia-page-num | A generated page-number control |
wf-algolia-sentinel | The invisible element infinite scroll watches |
wf-algolia-injectedThe script clears every .wf-algolia-injected element before re-rendering.
Putting that class on your own markup means the script will delete it.
Data attributes on result cards
Every rendered card carries the identity of the record it came from. These are what Insights uses for click and conversion attribution, and they are useful for your own analytics.
| Attribute | Contains |
|---|---|
data-wf-algolia-hit-objectid | The record's objectID |
data-wf-algolia-hit-index | The index the hit came from |
data-wf-algolia-hit-queryid | The query that produced it, when click analytics are on |
data-wf-algolia-hit-position | The 1-based position in the result list |
/* Style the first three results differently */
[data-wf-algolia-hit-position="1"] { … }
Reading them from your own code:
const card = event.target.closest('[data-wf-algolia-hit-objectid]');
const objectID = card?.dataset.wfAlgoliaHitObjectid;
State attributes
| Attribute | Meaning |
|---|---|
data-wf-algolia-active | The element represents the current selection |
data-wf-algolia-disabled | The control is present but cannot act yet |
data-wf-algolia-staged | A selection is staged but not committed, in deferred-apply mode |
data-wf-algolia-local-hidden | Hidden by a client-side filter rather than by a query |
data-wf-algolia-synthesized | Generated by the script rather than cloned from your template |
data-wf-algolia-overlay-result | A result rendered into an overlay surface |
data-wf-algolia-hit-preview | A preview card |
data-wf-algolia-href | The resolved destination for a generated link |
Styling a staged selection, for example:
[data-wf-algolia-staged] {
outline: 1px dashed currentColor;
}
Development helpers
| Attribute | Meaning |
|---|---|
data-wf-algolia-debug | Enables the development linter |
data-wf-algolia-issue | Stamped on an element the linter has flagged |