Attribute reference
Every attribute the script understands, grouped by the component that uses it. There are 85 unique attributes across 29 groups. Click any attribute name or value to copy it.
Groups
Element role
Applies to: every component
Search Input
Role:
Algolia index. Optional - usually inherited from the search-wrapper scope.
Browse Search
Role:
Results Container
Role:
Hide the container when the result set is empty.
Class toggled instead of the hidden attribute when empty.
Autocomplete
Role:
Algolia index for live suggestions.
Maximum suggestions fetched per autocomplete-section (hitsPerPage, default 4). Set on the section that hosts the suggestions.
Pre-fetch and show the suggestion section on empty-input focus (before any typing). Set on the autocomplete-section.
Hide the dropdown when there are no results.
Filter group
Role:
Facet attribute to filter on, e.g. "category".
Algolia index this filter group queries.
Combine selected values with "or" (any match) or "and" (all match).
Initial pre-selected facet value.
Override the display heading shown above this filter group (heading-only).
Label for the "show more" trigger.
Label for the "show less" trigger.
Defer applying selections until a wf-algolia-button="apply" is clicked.
Override the global debounce (ms) for this group's inputs.
Dynamic facet field name. Alternative to wf-algolia-field for dynamically-loaded facet lists.
Hierarchical group identifier; referenced by child groups via wf-algolia-refines.
Names the parent group-id this filter cascades under: this group is a child whose options re-query scoped to the parent group’s current selection. Enables N-level hierarchical (cascading) filters.
How this group behaves until its parent (wf-algolia-refines) has a selection: "hide" (hidden until the parent is picked) or "disable" (greyed/disabled until the parent is picked).
URL template for leaf-item clicks in standalone (non-browse) filter groups.
Cleans the value into a URL-friendly slug before it goes into the link. Example: "Creative & Brand" becomes creative-brand. Off by default.
Hierarchical facet label display: "leaf" renders only the deepest path segment (e.g. "Paid Search" instead of "Paid Media > Paid Search"); "full" renders the whole value (default).
Reorder the filter-items in this group. "alpha" sorts A→Z by the stored value (case-insensitive); "count" sorts by descending result count; "selected-first" floats checked values to the top; "selected-alpha-zero-last" floats selected items up, sorts the rest A→Z, and sinks zero-result values to the bottom; "natural" (default) keeps DOM order. Applied whenever results update - a dynamically-populated list briefly paints in the default count order until the first response sorts it.
Class applied while this filter has zero matching results.
What clicking an item in this filter group does - filter the results, navigate to a link, or nothing.
The control style of this filter group: checkbox, radio, select, range or toggle.
How many filter items to show before the show-more trigger hides the rest.
Set to "local" to match the filter-search input against already-loaded values instead of querying Algolia for facet values.
Set to "true" to keep a selected value visible even when the latest results no longer contain it, so the user can still clear it.
Filter Tags
Role:
Set on the wf-algolia-element="filter-tag-text" element. "leaf" renders only the deepest segment of a hierarchical value in the chip (e.g. "Brand & Positioning" instead of "Marketing > Brand & Positioning"); "full" renders the whole value (default).
Set on the wf-algolia-element="filter-tag-wrapper" element (once for all chips). A JSON object mapping raw Algolia field names to display labels for the {field} token, e.g. {"Categories.lvl0":"Categories","Categories.lvl1":"Subcategories"}. Single-quoted JSON is also accepted (handy inside the double-quoted HTML attribute). Unmapped fields (or an absent/invalid map) render the raw field name. Display-only - the underlying filter is unaffected.
Pagination
Role:
Pagination mode for this browse - set to "load-more".
Hits per page (default 12).
Pixel offset when auto-scrolling on page change.
Comma-separated list of fields this reset or apply button acts on. An empty value is meaningful - it means "clear nothing".
Pagination - Previous
Role:
Pagination - Next
Role:
Pagination - Page Number
Role:
Pagination - Page Info
Role:
Display template for the page indicator. Tokens: {page}, {pages}. Default "Page {page} of {pages}".
Results Count
Role:
Display template for the results count. Tokens: {count}/{total} (the match count, identical on Standard Search); on Browse also {shown} (hits on the current page), {page}, {pages}. Unknown tokens render empty. Default "{count} results" (Standard Search) / "Showing {shown} of {total}" (Browse).
No Results State
Role:
Class toggled instead of the hidden attribute.
Detail Section
Role:
Algolia index to fetch the record from.
Advanced. The record attribute matched when you read the ID from the URL path or a CMS field. Usually "slug". It does not apply to the default "?id=" option.
Read the record ID from the URL path instead of an "?id=" value. Use "path" for the last part of the address, like /products/blue-widget. Leave empty to use "?id=" instead.
Name of the URL value that holds the record ID. Default is "id", so links look like ?id=abc123. Only change this if your links use a different name, like ?product=abc123.
Set the record ID directly, or bind a Webflow CMS field. Use this on a CMS Collection page so each page knows its own record. This overrides the URL path and "?id=" options above.
Recommendation Section
Role:
Recommend model id (e.g. "related-products").
Algolia index queried by the Recommend call.
Read seed objectID from a field on the page.
Set to "path" to read the seed objectID from the URL path (last segment).
Static seed objectID for the recommend call.
Cap on the number of recommendations rendered.
Minimum confidence score (0–100) a recommendation must clear; out-of-range values are ignored.
Facet to scope/return: optional on trending-items (pair with -facet-value), required on trending-facets.
Facet value used with trending-items; must be paired with wf-algolia-facet-name or both are ignored.
User token for recommended-for-you; a literal token or "cookie:NAME" to read it from a cookie.
Comma-separated seed objectIDs for multi-seed recommendations (each objectID bills as one request).
An Algolia filters string applied to the primary recommend query (queryParameters.filters); ignored on trending-facets (that model accepts no queryParameters).
An Algolia filters string for the fallback query (fallbackParameters.filters); not supported on FBT.
Browse Page
Role:
Algolia index this browse queries.
Pagination mode - "load-more", "numbered", or "infinite-scroll".
Hits per page (default 12).
Pixel offset when auto-scrolling on page change.
Mirror state to the URL query string.
Marker for embedded buttons inside browse - reset, apply (deferred commit), or apply-cancel (commit + discard pair).
Static/curated list: bypasses the shared filter state and URL sync entirely (rendered by initStaticLists, not the main browse loop).
Split form - static Algolia field name for the curated list filter (e.g. "categories.lvl0"). Pair with wf-algolia-filter-value which can be CMS-bound per page.
Split form - CMS-bindable facet value for the curated list filter (e.g. "Design"). Bind to the Webflow CMS field; wf-algolia-filter-field holds the static field name.
How comma-separated values within a curated-list filter clause combine: "or" (default) or "and". Numbered suffixes (-match-2, ...) target the matching clause.
How separate curated-list filter clauses combine: "and" (default) or "or". Global on the wrapper - never numbered.
Split form - static Algolia field name for the locked baseline filter (e.g. "categories.lvl0"). Pair with wf-algolia-base-filter-value (comma-separated values allowed). Numbered suffixes -2/-3/… add more clauses.
Split form - CMS-bindable facet value(s) for the locked baseline filter (e.g. "Creative & Brand"). Comma-separated values combine within the field per wf-algolia-base-filter-match.
How comma-separated values within a base-filter clause combine: "or" (default) or "and". Numbered suffixes (-match-2, …) target the matching clause.
How separate base-filter clauses combine: "and" (default) or "or". Global on the wrapper.
Comma-separated list of fields this reset or apply button acts on. An empty value is meaningful - it means "clear nothing".
Mode Toggle
Role:
The Algolia index this toggle activates. Use "all" for federated search across every index.
Class applied while this mode is active.
Sort Dropdown
Role:
Default/primary replica index for the sort widget. NOTE: the per-option replica is taken from each <option value="…"> (the select fires on change and uses option.value), NOT from this attribute - see the info rule below.
Hit Preview
Role:
Algolia index this preview queries.
Facet field the preview is scoped to (e.g. "category").
Facet value the preview filters on (e.g. "Shoes").
Maximum hits to render inside the preview (default 5).
URL template applied to each previewed hit (e.g. "/blog/{slug}").
Sort Buttons
Role:
Replica index for a sort-item child button (empty value = primary index). Authored on each sort-item, not the parent group.
Facet Stat
Role:
Algolia index to query.
Which value to display: an aggregate (min/max/avg/sum) of wf-algolia-field, or count (number of matching records - needs no field).
Numeric field to aggregate for min/max/avg/sum (must be numeric + in attributesForFaceting, e.g. rate). Not needed when wf-algolia-stat="count".
Optional number/date transform: number (thousands grouping), year (4-digit), or rating (★). Independent of prefix/suffix - those now render via the display template.
Text shown before the value (e.g. a currency symbol or unit). Rendered by composing it into the display template as "<prefix>{value}", so it applies with or without a number format. Example: "$" shows 1299 as $1299.
Text shown after the value (e.g. a unit or symbol). Rendered by composing it into the display template as "{value}<suffix>", so it applies with or without a number format. Example: " kg" shows 5 as 5 kg.
How many decimal places to keep on a number. Example: "2" keeps cents, so 1299 shows as 1299.00. Leave blank for whole numbers.
Advanced: full display template with {value}, e.g. "From {value}". If set, it overrides Prefix/Suffix (they are ignored).
Static field to scope the stat (with -value), e.g. categories.lvl0.
Scope value (CMS-bindable), e.g. the category name.
Make the tile navigable. URL template with {value} (the scoped base-filter value) and {field}, e.g. /category/{value}.
Cleans the value into a URL-friendly slug before it goes into the link. Example: "Creative & Brand" becomes creative-brand. Off by default.
Search Wrapper
Role:
Algolia index this search scope queries. Lives on the WRAPPER root, never the input.
Autocomplete Section
Role:
Algolia index for this section. Optional - inherited from the parent wf-algolia-element="autocomplete" wrapper when omitted.
Maximum suggestions fetched for this section (hitsPerPage).
Pre-fetch and show this section on empty-input focus (before any typing).
Autocomplete Template
Role:
Autocomplete Section Label
Role:
Card contents
Applies to: inside a result card
Shows a hit field as this element’s text. The most common card binding. Add a fallback with a pipe, like title\|name, and the first field that has a value is used.
Sets an image’s source from a hit field, so every card shows its own picture. Supports pipe fallbacks, like poster\|thumbnail, and clears Webflow’s lazy-load attributes so the image always loads.
Number/date transform for a text value: "number" (thousands grouping), "year" (4-digit year), or "rating" (★). The "currency" token is deprecated → use "number" with prefix/suffix. Unknown tokens warn.
Text placed before the value, usually a currency symbol or unit. Example: with the number format, "$" shows 1299 as $1299.
Text placed after the value, such as a unit or symbol. Example: with the number format, " kg" shows 5 as 5 kg.
How many decimal places to keep on a number. Example: "2" keeps cents, so 1299 shows as 1299.00. Leave blank for whole numbers.
Renders a hit field as formatted rich text inside this element. Use it for fields that hold HTML, like a body or long description. The markup is cleaned for safety before it is inserted.
Shows Algolia’s shortened, match-highlighted snippet for a field instead of the full value. Best for long text where you only want the part that matched the search.
Turns this element into a link, building its address from a hit field such as a slug. Add a link prefix and suffix to complete the path. If a full-URL link is also set, that one takes priority.
Turns this element into a link using a hit field that already holds a complete web address. Takes priority over the slug-based link when both are set.
Text added to the start of the field value when building the link. Example: "/products/" turns the slug blue-shirt into /products/blue-shirt.
Text added to the end of the field value when building the link, such as a file extension or trailing slash. Example: ".html" turns blue-shirt into blue-shirt.html.
Cleans the value into a URL-friendly slug before it goes into the link. Example: "Creative & Brand" becomes creative-brand. Off by default.
`{field}`-interpolation link engine for the card (e.g. "/{category}/{title}").
Shows or hides this element based on a hit field or a simple condition, like rating >= 4. Use it to reveal a badge or note only when the data qualifies.
Highlights the parts of this text that matched the search, so the query stands out. Applies to a text binding and shows Algolia’s highlighted result instead of the plain value.
Chooses the hit field used for the image’s alt text, which helps accessibility and SEO. List fallbacks with a pipe, like imageAlt\|name\|title. Leave empty for a decorative image.
Sends an Algolia Insights event when the card or link is clicked, so clicks feed analytics and recommendations. The value is the event type, such as click.
A custom name for the click event sent to analytics, up to 64 characters. Use it to label the event in your Algolia Insights dashboard, like Product Clicked.
State classes
Applies to: any element
Class name added while this element is the active one - the current mode, sort or page.
Class name toggled instead of the hidden attribute when the script hides this element. Use it when you style visibility with a Webflow class.
Class name added while this facet value has zero matching results, so you can grey it out instead of removing it.
Show & hide
Applies to: any element
CSS display value to restore when the script un-hides this element. Set it to "flex" or "grid" when your Webflow layout needs one, otherwise it reverts to "block".
Presence-only. Closes the surrounding dropdown as soon as a value is picked.
Every attribute, A–Z
| Attribute | What it does | Used by |
|---|---|---|
| Class applied while this mode is active. | any element, mode-btn | |
| Chooses the hit field used for the image’s alt text, which helps accessibility and SEO. List fallbacks with a pipe, like imageAlt|name|title. Leave empty for a decorative image. | inside a result card | |
| Defer applying selections until a wf-algolia-button="apply" is clicked. | filter-group | |
| Split form - static Algolia field name for the locked baseline filter (e.g. "categories.lvl0"). Pair with wf-algolia-base-filter-value (comma-separated values allowed). Numbered suffixes -2/-3/… add more clauses. | browse, facet-stat | |
| How separate base-filter clauses combine: "and" (default) or "or". Global on the wrapper. | browse | |
| How comma-separated values within a base-filter clause combine: "or" (default) or "and". Numbered suffixes (-match-2, …) target the matching clause. | browse | |
| Split form - CMS-bindable facet value(s) for the locked baseline filter (e.g. "Creative & Brand"). Comma-separated values combine within the field per wf-algolia-base-filter-match. | browse, facet-stat | |
| Marker for embedded buttons inside browse - reset, apply (deferred commit), or apply-cancel (commit + discard pair). | browse | |
| What clicking an item in this filter group does - filter the results, navigate to a link, or nothing. | filter-group | |
| Presence-only. Closes the surrounding dropdown as soon as a value is picked. | any element | |
| Override the global debounce (ms) for this group's inputs. | filter-group | |
| How many decimal places to keep on a number. Example: "2" keeps cents, so 1299 shows as 1299.00. Leave blank for whole numbers. | facet-stat, inside a result card | |
| Marks the "All" option in a radio group (re-selected when the field is cleared). Renamed from wf-algolia-reset (deprecated alias). | filter-group | |
| Static/curated list: bypasses the shared filter state and URL sync entirely (rendered by initStaticLists, not the main browse loop). | browse | |
| CSS display value to restore when the script un-hides this element. Set it to "flex" or "grid" when your Webflow layout needs one, otherwise it reverts to "block". | any element | |
| Marks what this element IS - the role the script binds behaviour to. Every component starts with one. See the role list for accepted values. | every component | |
| Sends an Algolia Insights event when the card or link is clicked, so clicks feed analytics and recommendations. The value is the event type, such as click. | inside a result card | |
| A custom name for the click event sent to analytics, up to 64 characters. Use it to label the event in your Algolia Insights dashboard, like Product Clicked. | inside a result card | |
| Dynamic facet field name. Alternative to wf-algolia-field for dynamically-loaded facet lists. | filter-group | |
| Facet to scope/return: optional on trending-items (pair with -facet-value), required on trending-facets. | recommend | |
| Facet value used with trending-items; must be paired with wf-algolia-facet-name or both are ignored. | recommend | |
| An Algolia filters string for the fallback query (fallbackParameters.filters); not supported on FBT. | recommend | |
| Facet attribute to filter on, e.g. "category". | facet-stat, filter-group, hit-preview | |
| Override the display heading shown above this filter group (heading-only). | filter-group | |
| Comma-separated list of fields this reset or apply button acts on. An empty value is meaningful - it means "clear nothing". | browse | |
| Split form - static Algolia field name for the curated list filter (e.g. "categories.lvl0"). Pair with wf-algolia-filter-value which can be CMS-bound per page. | browse | |
| How separate curated-list filter clauses combine: "and" (default) or "or". Global on the wrapper - never numbered. | browse | |
| How comma-separated values within a curated-list filter clause combine: "or" (default) or "and". Numbered suffixes (-match-2, ...) target the matching clause. | browse | |
| Split form - CMS-bindable facet value for the curated list filter (e.g. "Design"). Bind to the Webflow CMS field; wf-algolia-filter-field holds the static field name. | browse | |
| Display format for the range values. | facet-stat, filter-group, inside a result card | |
| Hierarchical group identifier; referenced by child groups via wf-algolia-refines. | filter-group | |
| Hide the container when the result set is empty. | autocomplete, results | |
| Class toggled instead of the hidden attribute when empty. | any element, no-results, results | |
| Highlights the parts of this text that matched the search, so the query stands out. Applies to a text binding and shows Algolia’s highlighted result instead of the plain value. | inside a result card | |
| URL template applied to each previewed hit (e.g. "/blog/{slug}"). | hit-preview, inside a result card | |
| Maximum suggestions fetched per autocomplete-section (hitsPerPage, default 4). Set on each section, not the wrapper. | autocomplete, autocomplete-section | |
| Maximum hits to render inside the preview (default 5). | hit-preview | |
| Renders a hit field as formatted rich text inside this element. Use it for fields that hold HTML, like a body or long description. The markup is cleaned for safety before it is inserted. | inside a result card | |
| Shows or hides this element based on a hit field or a simple condition, like rating >= 4. Use it to reveal a badge or note only when the data qualifies. | inside a result card | |
| Sets an image’s source from a hit field, so every card shows its own picture. Supports pipe fallbacks, like poster|thumbnail, and clears Webflow’s lazy-load attributes so the image always loads. | inside a result card | |
| Algolia index. Optional - usually inherited from the search-wrapper scope. | autocomplete, autocomplete-section, browse, detail, facet-stat, filter-group, hit-preview, recommend, search-input, search-wrapper, sort | |
| Hierarchical facet label display: "leaf" renders only the deepest path segment (e.g. "Paid Search" instead of "Paid Media > Paid Search"); "full" renders the whole value (default). | filter-group, filter-tag-wrapper | |
| How many filter items to show before the show-more trigger hides the rest. | filter-group | |
| Turns this element into a link, building its address from a hit field such as a slug. Add a link prefix and suffix to complete the path. If a full-URL link is also set, that one takes priority. | inside a result card | |
| Text added to the start of the field value when building the link. Example: "/products/" turns the slug blue-shirt into /products/blue-shirt. | inside a result card | |
| Text added to the end of the field value when building the link, such as a file extension or trailing slash. Example: ".html" turns blue-shirt into blue-shirt.html. | inside a result card | |
| URL template for leaf-item clicks in standalone (non-browse) filter groups. | facet-stat, filter-group | |
| Turns this element into a link using a hit field that already holds a complete web address. Takes priority over the slug-based link when both are set. | inside a result card | |
| Combine selected values with "or" (any match) or "and" (all match). | filter-group | |
| Cap on the number of recommendations rendered. | recommend | |
| The Algolia index this toggle activates. Use "all" for federated search across every index. | mode-btn | |
| Recommend model id (e.g. "related-products"). | recommend | |
| Name of the URL value that holds the record ID. Default is "id", so links look like ?id=abc123. Only change this if your links use a different name, like ?product=abc123. | detail | |
| Advanced. The record attribute matched when you read the ID from the URL path or a CMS field. Usually "slug". It does not apply to the default "?id=" option. | detail, recommend | |
| Read the record ID from the URL path instead of an "?id=" value. Use "path" for the last part of the address, like /products/blue-widget. Leave empty to use "?id=" instead. | detail, recommend | |
| Set the record ID directly, or bind a Webflow CMS field. Use this on a CMS Collection page so each page knows its own record. This overrides the URL path and "?id=" options above. | detail, recommend | |
| Comma-separated seed objectIDs for multi-seed recommendations (each objectID bills as one request). | recommend | |
| How many numbered page buttons surround the current page. | browse | |
| Pagination mode for this browse - set to "load-more". | browse | |
| Hits per page (default 12). | browse | |
| Text shown before the value (e.g. a currency symbol or unit). Rendered by composing it into the display template as "<prefix>{value}", so it applies with or without a number format. Example: "$" shows 1299 as $1299. | facet-stat, inside a result card | |
| An Algolia filters string applied to the primary recommend query (queryParameters.filters); ignored on trending-facets (that model accepts no queryParameters). | recommend | |
| Names the parent group-id this filter cascades under: this group is a child whose options re-query scoped to the parent group’s current selection. Enables N-level hierarchical (cascading) filters. | filter-group | |
| Set on the wf-algolia-element="filter-tag-wrapper" element (once for all chips). A JSON object mapping raw Algolia field names to display labels for the {field} token, e.g. {"Categories.lvl0":"Categories","Categories.lvl1":"Subcategories"}. Single-quoted JSON is also accepted (handy inside the double-quoted HTML attribute). Unmapped fields (or an absent/invalid map) render the raw field name. Display-only - the underlying filter is unaffected. | filter-tag-wrapper | |
| Set to "local" to match the filter-search input against already-loaded values instead of querying Algolia for facet values. | filter-group | |
| Pre-fetch and show a section on empty-input focus (before any typing). Set on each autocomplete-section. | autocomplete, autocomplete-section | |
| Set to "true" to keep a selected value visible even when the latest results no longer contain it, so the user can still clear it. | filter-group | |
| Cleans the value into a URL-friendly slug before it goes into the link. Example: "Creative & Brand" becomes creative-brand. Off by default. | facet-stat, filter-group, inside a result card | |
| Shows Algolia’s shortened, match-highlighted snippet for a field instead of the full value. Best for long text where you only want the part that matched the search. | inside a result card | |
| Reorder the filter-items in this group. "alpha" sorts A→Z by the stored value (case-insensitive); "count" sorts by descending result count; "selected-first" floats checked values to the top; "selected-alpha-zero-last" floats selected items up, sorts the rest A→Z, and sinks zero-result values to the bottom; "natural" (default) keeps DOM order. Applied whenever results update - a dynamically-populated list briefly paints in the default count order until the first response sorts it. | filter-group | |
| Replica index for a sort-item child button (empty value = primary index). Authored on each sort-item, not the parent group. | sort-group | |
| Which value to display: an aggregate (min/max/avg/sum) of wf-algolia-field, or count (number of matching records - needs no field). | facet-stat | |
| Text shown after the value (e.g. a unit or symbol). Rendered by composing it into the display template as "{value}<suffix>", so it applies with or without a number format. Example: " kg" shows 5 as 5 kg. | facet-stat, inside a result card | |
| Shows a hit field as this element’s text. The most common card binding. Add a fallback with a pipe, like title|name, and the first field that has a value is used. | inside a result card | |
| Label for the "show less" trigger. | filter-group | |
| Label for the "show more" trigger. | filter-group | |
| Display template for the page indicator. Tokens: {page}, {pages}. Default "Page {page} of {pages}". | facet-stat, filter-group, page-info, results-count | |
| Minimum confidence score (0–100) a recommendation must clear; out-of-range values are ignored. | recommend | |
| Pixel offset when auto-scrolling on page change. | browse | |
| The control style of this filter group: checkbox, radio, select, range or toggle. | filter-group | |
| Mirror state to the URL query string. | browse | |
| User token for recommended-for-you; a literal token or "cookie:NAME" to read it from a cookie. | recommend | |
| Initial pre-selected facet value. | filter-group, hit-preview | |
| How this group behaves until its parent (wf-algolia-refines) has a selection: "hide" (hidden until the parent is picked) or "disable" (greyed/disabled until the parent is picked). | filter-group | |
| Class applied while this filter has zero matching results. | any element, filter-group |
Renamed attributes
These older names still work, so existing sites keep running. New work should use the current name.
| Old name | Use instead |
|---|---|
wf-algolia-collection | |
wf-algolia-conversion | |
wf-algolia-link-folder | |
wf-algolia-reset | |
wf-algolia-zero-class |