To integrate Algolia InstantSearch into a Webflow website, you’ll need to connect Webflow's CMS to Algolia’s search index and embed custom JavaScript for InstantSearch UI. Here's a step-by-step approach.
webflow-products
).tag section of the Embed Code area.
https://cdn.jsdelivr.net/npm/instantsearch.js@4
https://cdn.jsdelivr.net/npm/algoliasearch@4
#searchbox
#hits
const searchClient = algoliasearch('YourAppID', 'YourSearchOnlyAPIKey');const search = instantsearch({ indexName: 'webflow-products', searchClient,});search.addWidgets([ instantsearch.widgets.searchBox({ container: '#searchbox', placeholder: 'Search...', }), instantsearch.widgets.hits({ container: '#hits', templates: { item: ` <div> <h2>{{title}}</h2> <p>{{description}}</p> </div> `, }, }),]);search.start();
YourAppID
, YourSearchOnlyAPIKey
, and webflow-products
with your real values.#hits
container using Webflow Designer.<img src="{{imageUrl}}" loading="lazy">
in the template string.refinementList
, rangeSlider
, or menu
widgets.#category
or #price-slider
, then update the JS with additional widgets.To integrate Algolia InstantSearch into Webflow, you need to (1) export or sync CMS data to Algolia, (2) embed Algolia libraries and containers into your Webflow page, and (3) initialize and configure InstantSearch with custom JavaScript. This setup creates a fast, dynamic search experience on your Webflow site.