Algolia

Algolia is a hosted search engine that indexes your content and serves fast, filtered, instant queries from a global network. Connect it to your site to power multi-attribute filtering, autocomplete, and cross-collection search that native search cannot deliver once a site grows past a few hundred CMS items.

Index CMS items in an Algolia index, then render instant search and faceted filtering through JavaScript widgets while you keep editing content as usual. No-code builders can sync collections through n8n, while full-stack developers connect the Data API and Algolia REST API directly for full control.

How to integrate Algolia with Webflow

What is Algolia? Algolia is a search-as-a-service platform that indexes content and returns search results through hosted APIs. It provides InstantSearch UI libraries, an Autocomplete library, a site Crawler, and analytics for tracking queries and clickthroughs. Teams use it for product discovery and documentation search. Content discovery across large libraries is another common use.

Add Algolia when native search cannot handle cross-collection queries or multi-attribute filtering. Autocomplete on each keystroke is another common trigger. The frontend search UI runs in the browser, while a separate process keeps your Algolia index in sync with CMS changes.

No Algolia app exists on the Webflow Marketplace, so every integration uses custom code, automation, or the APIs directly. The Algolia integration supports these approaches:

• InstantSearch.js and Autocomplete add the search UI to your pages through custom code and Code Embed elements.
• n8n automation connects CMS changes to Algolia index updates without backend code.
• The Data API and Algolia REST API give you a full sync pipeline for bulk indexing and webhook-driven updates, but require server-side development.

Most implementations combine two or more of these methods depending on the complexity of the setup.

Add Algolia search with Code Embed elements

Load the InstantSearch.js library via CDN and place widget containers using Code Embed elements to add Algolia search to a page. This method covers the frontend search experience only. It queries an Algolia index that already holds your data. You need a paid site plan (Basic or above) to publish custom code, and a search-only API key from your Algolia dashboard.

This path handles the visible search interface:

• A search box that returns results on every keystroke
• A hits list that displays matching records, with refinement lists for multi-attribute faceted filtering

Set up the frontend search by loading the CDN scripts and placing widget containers, then add the page-level initialization code:

1. Add the algoliasearch and instantsearch.js CDN <script> tags in Custom code in head and body tags under Site settings > Custom code > Head code.
2. Drag a Code Embed element onto the canvas.
3. Paste <div id="searchbox"></div><div id="brand-list"></div><div id="hits"></div> to position the search interface.
4. Add the InstantSearch initialization script in the page's Before </body> code block. Reference your Application ID, search-only API key, and index name.

A basic widget configuration attaches the search box, hits, and a refinement list to their container selectors:

search.addWidgets([
  instantsearch.widgets.searchBox({ container: "#searchbox" }),
  instantsearch.widgets.hits({ container: "#hits" }),
  instantsearch.widgets.refinementList({ container: "#brand-list", attribute: "brand" }),
  instantsearch.widgets.configure({ hitsPerPage: 8 }),
]);
search.start();

Note the SEO trade-off: InstantSearch renders results with JavaScript, which crawlers may not execute reliably. Native search generates server-rendered results that crawlers can index, so keep native pages for content you need indexed by search engines.

Index content with the Algolia Crawler

If you would rather not maintain extraction code, the Algolia Crawler visits your site, extracts content from the HTML, and pushes it to an index on a schedule. The Algolia Crawler populates an index for a static content site without maintained extraction code. It suits documentation and article libraries where content does not change by the minute.

In the Algolia dashboard, go to Data Sources > Crawler > Add your domain. Create a New Crawler with a name, App ID, start URL, and template, then publish and let the crawler run on its schedule.

The crawler has a 24-hour minimum refresh interval, so newly published CMS content will not appear in search until the next crawl cycle. Your pages must render core content in static HTML, since the crawler needs content accessible without JavaScript rendering. For real-time freshness, use webhook-driven sync instead.

Connect with Zapier, Make, or n8n

Automation platforms keep your Algolia index in sync with CMS changes without a custom backend. Zapier and Make offer direct connections to Algolia, and n8n is the low-code path named on the official integration page. Algolia does not send outbound webhooks, so sync always runs one way, out to Algolia. The official integration page names n8n as the recommended low-code path. The workflow uses an Algolia-maintained community node to sync a CMS collection to an index without backend code.

Common trigger and action patterns across these platforms include CMS item created or updated → Algolia Add or Replace Record. Form submissions can also create Algolia records.

Zapier's Algolia and Webflow pairing supports Zapier patterns such as New Webflow Form Submission → Algolia Save Record, New Webflow Order → Algolia Add or Replace Record, New Webflow Comment → Algolia Add or Replace Record, and Updated Webflow Order → Algolia Partial Update Record or Batch Indexing. Make combines a Webflow connector and an Algolia connector in a single scenario, such as CMS item created or updated → Algolia Add a new record or Add or update record attributes. Choose n8n or Make when you need conditional logic. Use Zapier for straightforward one-to-one syncs.

Build with the Webflow and Algolia APIs

For full control over indexing and real-time sync, connect the Data API and Algolia REST API directly. This path handles bulk initial indexing and webhook-driven updates. It also gives you control over custom record shaping. You need server-side development, typically a serverless function on Cloudflare Workers or Netlify Functions. Reference implementations live at github.com/Webflow-Examples/algolia-sync for the data pipeline and github.com/Webflow-Examples/algolia-autocomplete for the frontend UI.

Use the Algolia Indexing API to add, replace, and delete records. Use the Data API for CMS Collections and form submissions. Webhooks trigger real-time index updates when items change.

Map the item id field to Algolia's objectID so updates and deletes stay idempotent.

Bulk index CMS content

Start by loading your existing CMS content into an Algolia index before switching on real-time sync. Fetch all items from a collection, shape them into records, then push them in batches.

Run the initial index in four parts:

1. Fetch items with GET https://api.webflow.com/v2/collections/{collection_id}/items.
2. Use offset for pagination since limit caps at 100 per request.
3. Strip verbose HTML from rich text fields to plain text, since Algolia's Build plan caps records at 10 KB.
4. Push records with saveObjects, which chunks into batches of 1,000 automatically, or POST /1/indexes/{indexName}/batch.

Use the item id as the Algolia objectID so re-running the job upserts rather than duplicates.

Sync CMS changes via webhooks

Once the index is populated, webhooks keep it current. Register webhooks with POST /v2/sites/{site_id}/webhooks for the events you care about, then handle each event in your serverless endpoint.

For real-time sync, register the CMS webhooks first, then map each payload to an Algolia operation:

1. Register webhooks for collection_item_created, collection_item_changed, collection_item_deleted, and collection_item_unpublished (scope cms:read).
2. On create or change events, extract payload.id and payload.fieldData, then call saveObjects.
3. Check payload.isDraft to decide whether to index drafts.
4. On delete or unpublish events, call deleteObjects with payload.id as the objectID. These payloads do not include fieldData, only identifiers.

Use webhooks instead of polling the Data API, since frequent polling risks hitting the per-minute rate limits (60 requests/minute on Basic, 120 on CMS and Business plans).

What can you build with the Algolia Webflow integration?

Integrating Algolia with your site lets you build filtered, instant search across your content without replacing the CMS and hosting layer.

• Cross-collection site search: Query multiple CMS collections in a single search box. A media site can search articles and authors together, with topics included in the same query, something native search cannot do.
• Faceted product filtering: Filter an e-commerce catalog by brand and price, then combine those facets with category. Your store can offer the multi-attribute filtering shoppers expect from large retailers.
• Instant autocomplete search: Return dropdown suggestions as visitors type each keystroke. A documentation site can surface matching pages before the user finishes typing.
• Content library discovery: Search large article archives with relevance ranking. Chili Piper migrated 1,000+ blog resources into the CMS and added Algolia search to make them findable.

If you need more control over record shaping or draft filtering, the API integration path covers those cases with full flexibility.