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.
The zero-results class
A third hook is configurable too, but per element rather than on the script tag — which is why it is not in the table above.
wf-algolia-zeroclass sets the class applied to a facet value while it has zero
matching results, so you can grey it out instead of removing it. Put it on a
filter group to cover its items, or on a single element.
<div
wf-algolia-element="filter-group"
wf-algolia-field="brand"
wf-algolia-zeroclass="is-empty"
>
…
</div>
The default is not uniform, so it is worth knowing which case you are in:
| Where | Default when you omit the attribute |
|---|---|
| Filter item, filter input | is-disabled |
| Facet count badge | none — the hook is opt-in |
A count badge has no "disabled" state, so it gets no default; set the attribute explicitly if you want a badge to react to an empty facet.
Cascading filters add is-disabled to a child group whose parent selection
leaves it empty, under wf-algolia-when-parent-empty="disable". That one is a
fixed internal default — wf-algolia-zeroclass does not change it. See
Cascading filters.
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 |