Set up your Algolia index

WF-Algolia queries an Algolia index. It does not create or populate one — that part happens in Algolia, and a few of its settings decide which features can work at all.

1. Create an account and an index

Sign up at algolia.com, then create an index from Search → Index. The name you choose is what goes in wf-algolia-index on each search wrapper you build.

2. Get content into it

Three routes:

• The WF-Algolia sync, which pushes your Webflow CMS collections into Algolia and keeps them current as items change.
• The Algolia Crawler, which visits your published pages and indexes what it finds there — for content that is not in the CMS.
• Manual upload, from the Algolia dashboard, for content that does not live in the Webflow CMS.

However the data arrives, one Algolia record should equal one thing a visitor can find — one product, one article, one person.

Field names are your API

Every wf-algolia-text="title" in your Designer refers to a field name on the record. They are case-sensitive, and a mismatch fails silently on that binding alone. Open one record in the dashboard and copy the names exactly.

Reference and multi-reference fields

A Webflow reference field does not hold text. It holds the internal IDs of the items it points at, so a Movies item that references two Actors syncs like this:

{ "name": "Inception", "actor": ["6543ab12f0e...", "6543cd34a1b..."] }

Nobody can search or filter by that. In the app's field mapping (either the setup wizard or Settings → Fields), a reference row carries an Add field from Collection control. Pick the property you actually want indexed and it becomes its own Algolia attribute:

{ "name": "Inception", "actor_name": ["Leo DiCaprio", "Elliot Page"] }

A few things worth knowing:

• You can pull more than one property. Add name and age off the same actor field and you get actor_name and actor_age, independently named and independently toggleable.
• The default name is {field}_{property}, and you can rename it. Two fields pointing at the same collection therefore never collide.
• A single reference gives a single value, not an array: director_name: "Christopher Nolan".
• The reference row itself still works. Leave it on with no properties added and it keeps indexing the raw item IDs, exactly as before.
• Only one level deep. A reference field on the referenced collection is not offered, since it would only produce another column of IDs.

When referenced items change

We copy the actor's name onto the movie's record. If someone later renames the actor, the movie item itself has not changed, and a sync that only looks at what changed will not revisit it.

What refreshes the copy depends on the collection's sync mode, not on who started the sync:

Collection is on	What refreshes an edited referenced value
Manual sync only	Any sync of the collection, scheduled runs included
Webhook sync	Only Force reindex

Webhook sync only looks at items that changed, and editing an actor does not change the movie, so on those collections even a Sync now leaves the copy as it was.

Date fields

Webflow date fields sync as ISO text by default:

{ "name": "Launch party", "starts": "2026-04-28T19:00:00.000Z" }

Algolia cannot filter, range-facet or sort on text, so a date kept this way is for display only. To filter "events after today" or build a date range, set the row's Date format in the field mapping (the setup wizard or Settings → Fields) to a timestamp:

Date format	Syncs as	Use it for
Text (ISO)	"2026-04-28…"	Display only (the default)
Timestamp (seconds)	1777402800	Filters, ranges and sorting
Timestamp (ms)	1777402800000	The same, if your code expects ms

Seconds is what Algolia recommends. A timestamp attribute works in numericFilters straight away (starts > 1777334400); add it to attributesForFaceting only if you want it as a range facet.

The same control appears on a reference row that pulls a date off the referenced item.

On the page, wf-algolia-format="date" and wf-algolia-format="year" read both ISO text and timestamps, so switching a field to a timestamp does not break how it displays. Without a format, a binding shows the raw number.

Changing the format on a webhook-sync collection

On a Manual sync only collection, the next sync rewrites every record in the new format.

On a Webhook sync collection, Save & resync and Sync now only rewrite items that changed in Webflow, so older records keep the previous format and the attribute ends up part text, part number. Numeric filters then miss the older records without any error. Run Force reindex after changing a date format on these collections.

3. Choose searchable attributes

Configuration → Searchable attributes decides which fields the query text is matched against. Order matters — Algolia treats earlier attributes as more important.

A field that is not listed here is still returned on the record and can still be rendered; it just will not be matched against what the visitor typed.

4. Declare your facets

Configuration → Filtering and Faceting → Facets lists the fields you can filter by. A filter group pointed at a field that is not declared here will render and then never narrow anything.

Each facet is declared in one of two modes, and the choice is not cosmetic:

Mode	Use it when	What it becomes
Filter only	Ordinary checkboxes, radios, ranges — nobody types to find a value	the plain attribute
Searchable	The group has a typeahead over its own values, e.g. 1,200 companies	searchable(attribute)

Searching within a facet's values uses a different Algolia API, and that API only answers for attributes declared searchable. This is the single most common reason a filter search box does nothing at all.

index.setSettings({
  attributesForFaceting: ['category', 'searchable(brand)'],
});

Numbers must be numbers

Range and comparison filters compare numerically. A price stored as "49.99" rather than 49.99 will never match a range, no matter how the filter is configured. Fix it at index time, not in Webflow.

5. Create replicas for sorting

Algolia sorts by creating a replica — a copy of the index with a different ranking. One replica per sort order: price ascending, price descending, newest first.

Configuration → Replicas, then set the sort on the replica itself.

Your sort control's option values must match the replica names exactly. A typo produces zero results rather than an error, because Algolia is being asked for an index that does not exist.

6. Collect your keys

Settings → API Keys gives you three things. You need two:

• Application ID → data-app-id
• Search-Only API key → data-search-key

The Admin key never leaves your server

It can delete indices. Anything in a script tag is readable by every visitor, so the Admin key must never appear in Webflow custom code.

Optional extras

Recommend

Algolia's recommendation models must be trained before they return anything, and training needs traffic. A correctly configured recommendation section on a brand-new index renders nothing — that is the model, not your markup.

Insights

Click and conversion tracking is off unless you add data-insights="true". It powers Algolia's analytics and personalization, and it is what makes Recommend models improve over time.

Crawler

Static pages, landing pages and PDFs are not CMS items, so no collection mapping reaches them. Algolia's Crawler indexes them by visiting your published site — see Algolia Crawler.

More than one index

Sites often search several content types. Point individual elements at their own index with wf-algolia-index, or search several at once with a federated dropdown — see Federated search.

Next

• Install the script
• Build your first search
• Verify your setup