Install and use the Algolia Search and Sync app

Connect your CMS to Algolia to add fast search, autocomplete, and filtering to your site.

Algolia is a third-party search and discovery platform. You can install the Algolia Search and Sync app to connect your CMS Collections to your own Algolia account, keep your search index in sync as your content changes, and build search, autocomplete, and filtering experiences on elements you design — no custom code required. Because searches run against a dedicated Algolia index rather than filtering what's already loaded on the page, results stay fast even for large or deeply nested directories.

How the Algolia Search and Sync app works

The app connects three pieces:

• Your site — holds the elements and styling for your search experience. Every result the app shows is a copy of a template you designed, so your styling carries through.
• Your Algolia index — a searchable copy of your content that Algolia can query in milliseconds
• The search script — a script the app adds to your site's custom code. It reads the Algolia attributes on your published elements, sends queries to Algolia, and renders the results into your templates.

The app's sync keeps your index current. Depending on the sync mode you choose, it can send changes to Algolia as soon as you publish, on a schedule, or whenever you run a sync manually.

What you can build with the app

You can build two kinds of experiences, and most sites use both:

• Search — a search box that queries your index as visitors type. This includes autocomplete and results from several indices in one dropdown (e.g., products and blog posts together).
• Browse pages — a catalog, directory, or listing page that loads with results already showing, with pagination and shareable URLs

You can add these to either type:

• Filters — checkboxes, radio buttons, ranges, toggles, dropdowns, and hierarchical categories (e.g., Clothing > Shoes > Sneakers)
• Sorting — let visitors reorder results
• Detail pages and recommendations — show a single record and related items beneath it

Relevance features like typo tolerance, synonyms, and custom ranking rules are configured in your Algolia dashboard, so you can change how results rank without republishing your site. Some Algolia features, such as semantic search, are only available on specific paid Algolia plans. Learn more about configuring relevance in Algolia.

Install the Algolia Search and Sync app

To install the app:

1. Go to the Algolia Search and Sync app page on the Webflow Marketplace
2. Click Install App
3. Choose the site you want to install the app on
4. Click Authorize App

To launch the app once it's installed:

1. Open the Apps panel
2. Hover over Algolia Search and Sync and click Launch

Learn more about installing and managing apps.

Connect your Algolia account

You'll need your Algolia Application ID and Write API Key. In your Algolia dashboard, you can find your Application ID and Write API Key under Settings > API Keys. If you have more than one Algolia application, make sure you copy the keys for the one you want to connect.

To connect your account:

1. Launch the app
2. Type in your Application ID
3. Type in your Write API Key — not your Admin API Key or Search-Only Key
4. Click Connect

Sync a CMS Collection to Algolia

The app only syncs published items — drafts are skipped. Rich text is converted to plain text before it's indexed.

To set up a sync:

1. Launch the app
2. Click Add collection
3. Choose the CMS Collection you want to sync
4. Click Continue
5. Choose Create new to create an index for the Collection, or Use existing to sync into an index you already have
6. Click Continue
7. Clear the checkbox next to any field you don't want indexed, and rename any Algolia attribute names you want to change
8. Click Continue
9. Turn on Webhook, Scheduled sync, or both — or leave both off to sync manually
10. Click Continue
11. Choose which locales to sync
12. Click Continue
13. Review your setup and click Save collection
14. Click Save & sync to run the first sync now, or Save only to run it later from the dashboard

If you create a new index, the app names it after the Collection slug. You can change the name before you continue.

On the field mapping step, the app selects your fields and suggests Algolia attribute names for you. It also adds two reserved fields to every record — objectID and _wfCollectionId — which it uses to keep your index in sync. You can't edit or remove these.

To check past syncs, expand Recent syncs on the dashboard. Each entry shows the sync type, when it ran, how many items it synced, and whether it succeeded — click an entry for details like how many items were processed, failed, or skipped. To see syncs that are running or queued, click View logs.

Choose a sync mode

Manual sync is always available — click Sync now on the dashboard to run a sync whenever you want. You can also turn on one or both automatic triggers:

• Webhook — sends changes to Algolia within a few seconds of publishing. New and edited items are added when you publish them, unpublished and deleted items are removed, and publishing your whole site reconciles the Collection. Draft edits aren't indexed until you publish them.
• Scheduled sync — runs a full reconciliation on a schedule you choose (e.g., hourly). Schedules use UTC. This is a useful backup if webhook delivery is unreliable.

Sync localized content

If your site has more than one locale, each locale you sync adds one record per item to the same index, tagged with the locale it came from. Your primary locale is always synced.

Map Reference and Multi-reference fields

A Reference or Multi-reference field syncs as the IDs of the items it points to — which visitors can't search or filter by. To index something useful instead, like an author's name, add a property from the referenced Collection when you map the field (in the setup flow, or later in Settings > Fields).

You can add more than one property from the same field. The app names each one field_property by default (e.g., author_name), and you can rename it. Only one level of references is supported.

Add the search script to your site

The app adds the search script to your site for you, so you don't need to paste anything. You'll need your Algolia Search-Only Key, which you can find in your Algolia dashboard under Settings > API Keys. This key can only read your index, so it's safe to include on your published site.

To add the script:

1. Launch the app
2. Click the Settings icon
3. Click Search script
4. Paste your key into the Algolia Search-Only Key field
5. Click Save
6. Click Install version [version]
7. Publish your site

Search won't work on your live site until you publish. You can check where things stand in the app under Settings > Search script:

• Before you publish — the app shows "Version [version] is set up, but is not on your live site yet."
• After you publish — the app shows "Version [version] is live on your site."

Update or roll back the search script

Your site stays on the version of the script you installed until you change it — new releases never reach your live site automatically. When a newer version is available, the app's Search script screen shows Update to [version] with a summary of what changed. Click it, then publish your site.

If an update causes a problem, you can go back to an earlier version:

1. Launch the app
2. Click the Settings icon
3. Click Search script
4. Click Change version
5. Choose a version from the Version to install dropdown
6. Click Apply [version]
7. Publish your site

Rolling back also undoes any fixes made since that version, so update again once the problem is resolved.

Build search experiences on your site

Once the script is installed and your index has content in it, you can build your search experience in two ways:

• Build on canvas — tools on the app's dashboard that place elements on the canvas with the right attributes already set. Add an Experience adds a whole feature, Add a Single Piece adds one part, and Apply & Fix wires up an element you built yourself. The elements the app adds are ordinary elements, so you can restyle, move, and delete them like anything else on your page.
• Custom attributes — add wf-algolia-* attributes to elements you've already designed, in Element settings > Custom attributes. Learn more about custom attributes.

Field names in your attributes need to match the field names in your Algolia records exactly — they're case-sensitive. To see every attribute the app supports, click Attribute reference on the dashboard. Learn more about Algolia Search and Sync attributes.

Remove the Algolia Search and Sync app

Removing the app has two parts: you disconnect Algolia inside the app, which removes the search script and deletes your field mappings and sync history, and then you uninstall the app from your site. If you reinstall later, you'll need to set up your mappings again. Your Algolia indices aren't deleted — you can manage them in your Algolia dashboard.

To disconnect Algolia inside the app:

1. Launch the app
2. Click the Settings icon
3. Under Disconnect Algolia from this Site, click Disconnect…
4. Click Uninstall
5. Publish your site

The search script stays on your live site until you publish.

To uninstall the app from your site:

1. Go to Site settings > Apps & Integrations
2. Under Connected apps, click View details next to Algolia Search and Sync
3. Click Uninstall app

Troubleshooting

Search doesn't work on my live site

• Make sure you've published your site since you installed the script
• Check the script's status in the app under Settings > Search script
• If your site uses a Content Security Policy (CSP), add https://cdn.jsdelivr.net to script-src, and https://*.algolia.net and https://*.algolianet.com to connect-src. Learn more about custom security headers.

Some fields show up blank in my results

Field names in your attributes must match the field names in your Algolia records exactly, including capitalization. A mismatch doesn't show an error — that field is left blank. Open a record in your Algolia dashboard and copy its field names into your attributes.

My search form reloads the page when I press Enter

If you added a search input inside a Form Block yourself, give the form the custom attribute wf-algolia-form with the value search, then republish your site. Elements added with the app's Build on canvas tools aren't affected.

FAQs

How much does the Algolia Search and Sync app cost?

The app is free to install. Algolia bills your search usage based on your Algolia plan.

Is the app only available on Enterprise plans?

No — any Webflow customer with an Algolia account can use the app.

Can I search content that isn't in the CMS?

The app's sync only indexes CMS Collections. To index static pages, landing pages, or PDFs, you can use Algolia's own crawler — which runs separately from the app — or upload records from your Algolia dashboard. Learn more about using the Algolia Crawler with the app.

Can I search across multiple Collections at once?

Yes. You can sync several Collections into the same index — on the Target index step, choose Use existing and pick the index. Or you can sync each Collection to its own index and show results from several indices in one search.

Who do I contact for help with the app?

Candid Leap builds and maintains the Algolia Search and Sync app. For help with the app, email algolia-support@candidleap.com. For help with your Algolia account or plan, contact Algolia.

Learn more

Help Center articles:

• Webflow Apps overview
• Site roles and permissions
• Custom attributes
• Custom code in head and body tags
• Site search

External resources:

• Candid Leap documentation
• Algolia documentation