Elastic

Teams turn to Elastic when Webflow's native search stops being flexible enough for large content libraries, product catalogs, and knowledge bases.

Webflow's native search caps results at 100 per query and lacks faceted filtering, vector search, and custom relevance scoring. Large content libraries, product catalogs, and knowledge bases outgrow these limits fast.

Connecting Elasticsearch unlocks full-text, semantic, and hybrid search, plus real-time analytics. You can index Webflow CMS content, build custom search UIs, and embed Kibana visualizations on your pages.

It's a strong fit for developers, e-commerce teams tuning product filters, marketers tracking search behavior, and agencies running content-heavy sites.

How to integrate Elastic with Webflow

What is Elastic? Elastic is a search and analytics platform built on Elasticsearch, a distributed, RESTful search engine that handles structured, unstructured, time-series, and vector data. The platform supports full-text search, semantic search, hybrid retrieval, and data visualization through Kibana. Deployment options include fully managed cloud (AWS, Google Cloud, Azure), serverless, and self-managed infrastructure.

Teams connect Elastic with Webflow when they need search capabilities that go beyond Webflow's native widget. Common triggers include growing CMS content libraries that need faceted navigation, product catalogs that require intent-based search, and knowledge bases where visitors search using natural language. Webflow itself runs its native site search on Elastic Cloud, according to the Webflow engineering blog, but that managed instance is inaccessible to developers for customization.

The Elastic-Webflow integration supports 2 approaches:

• Elastic components via Code Embed handle search UI embedding and Kibana dashboard display without backend code.
• The Webflow and Elastic APIs give you full control over indexing, querying, webhook-driven sync, and custom search interfaces, but require server-side development.

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

Embed Elastic components with Code Embed elements

Webflow supports custom HTML, CSS, and JavaScript through Code Embed elements and custom code in head and body tags. You can use these injection points to load Elastic's Search UI library, embed Kibana dashboards, or connect a search input to an Elasticsearch endpoint through a proxy. This approach works for teams that want a custom search experience on their Webflow site without building a full backend integration. A paid Webflow site plan is required for custom code to render on the published site.

There are several embedding paths depending on what you need to display.

Embed a Kibana dashboard

Kibana dashboards display visualizations, charts, and data exploration interfaces stored in your Elasticsearch cluster. Embedding a dashboard in Webflow can avoid client-side credentials when access is configured through Kibana's sharing or authentication settings.

To embed a Kibana dashboard:

1. Open the dashboard in Kibana and click Share then Embed code to copy the <iframe> snippet.
2. In Webflow, open the page where you want the dashboard, click Add Panel (+), select Components, then drag a Code Embed element to the canvas.
3. Double-click the Code Embed element, paste the <iframe> snippet, and click Save and Close.
4. Click Publish to make the embed live.

After publishing, verify that the dashboard loads correctly on the live page and adjust sizing if needed.

The Elastic blog on embedding Kibana dashboards recommends using viewport units (vw/vh) or media queries instead of pixel-based sizing for responsive behavior. This method displays dashboards and visualizations only. It does not provide a visitor-facing search input.

Add the Elastic Search UI library

Elastic's Search UI is a JavaScript library for building complete search interfaces. It works with vanilla JavaScript (no React required), which means you can load it in Webflow via <script> tags without a Node.js build pipeline.

The main security consideration is that connecting Search UI directly to an Elasticsearch cluster from the browser exposes your API key in page source. The Elastic community forum explicitly advises against this approach. For production use, route search requests through a server-side proxy (Cloudflare Workers, Vercel Edge Functions, or AWS Lambda) that holds the Elasticsearch credentials.

To add Search UI to a Webflow page:

1. Build or obtain a Search UI JavaScript bundle configured with the Elasticsearch connector. Host the compiled bundle on an external CDN, since Webflow's Code Embed has a 50,000-character limit per block.
2. In Webflow, go to Site Settings then Custom Code and add CSS <link> tags for Search UI styling in the Head Code section.
3. Add your <script src="..."> reference to the hosted bundle in the Footer Code section.
4. Drag a Code Embed element onto your page and add a container <div> element (for example, <div id="search-ui"></div>) where the search interface will render.
5. Publish the site and test on the live URL. JavaScript does not execute in Webflow's preview mode.

Best practice is to add CSS in the head section and JavaScript in the footer section so scripts run after HTML elements load, as noted in the Webflow custom code tips guide.

Use a serverless proxy for secure search

Place a serverless function between the browser and Elasticsearch. The proxy holds API credentials as environment variables, so they never appear in client-side code.

To set up a proxy-based search flow:

1. Deploy a serverless function (Cloudflare Workers is well-documented for this via the Searchkit library) that accepts search queries and forwards them to your Elasticsearch cluster.
2. Store your Elasticsearch API key as an environment variable in the serverless platform, not in the function code.
3. In Webflow's Footer Code section, add JavaScript that sends search queries to your proxy endpoint and renders results into a container element on the page.

document.getElementById('search-input').addEventListener('input', async (e) => {
  const res = await fetch('https://your-worker.workers.dev/search?q=' + e.target.value);
  const data = await res.json();
  // render data.hits into #results
});

Co-locate the proxy in the same cloud region as your Elasticsearch cluster to minimize latency. This approach provides full search functionality with the strongest security posture.

Build with the Webflow and Elastic APIs

For full control over indexing logic, search behavior, and real-time sync, build a custom integration using both APIs. This approach requires server-side development (Node.js, Python, or any language that can make HTTP requests) and a hosting environment for your middleware.

The available APIs include:

• Elasticsearch REST APIs handle document indexing, search queries, bulk operations, and ingest pipelines
• Webflow Data API handles CMS collections and items, form submissions, and site publishing
• Webflow webhooks trigger real-time events when CMS items change, forms submit, or sites publish

This is the most flexible integration path for bidirectional sync, custom relevance scoring, ingest pipeline processing, and full Query DSL access.

Bulk sync CMS content to Elasticsearch

The initial index population pulls all published CMS items from Webflow and writes them to Elasticsearch in batch. This is the foundation for any custom search implementation.

To run an initial bulk sync:

1. Call GET /v2/sites/{site_id}/collections to discover all collection IDs and their field schemas.
2. Paginate through published items using GET /v2/collections/{collection_id}/items/live with limit=100 and incrementing offset. The Webflow API returns a maximum of 100 items per request.
3. Transform each item's fieldData into a flat JSON document suitable for your Elasticsearch index mapping.
4. Send the batch to Elasticsearch using POST /_bulk with each Webflow item id mapped as the Elasticsearch _id for deterministic updates.

curl -X POST \
  -H "Authorization: ApiKey $ELASTIC_API_KEY" \
  -H "Content-Type: application/x-ndjson" \
  -d 

The `/_bulk` endpoint requires NDJSON format: each action line followed immediately by the source document, with a trailing newline. Do not pretty-print the JSON. Run this sync as a background job, not a browser-side script, since a 5,000-item collection requires at least 50 sequential API calls.

#### Set up real-time sync with webhooks

After the initial bulk sync, use Webflow webhooks to keep the Elasticsearch index current as CMS content changes.

To register webhooks for CMS sync:

1. Register webhook endpoints for the events you need by calling `POST /v2/sites/{site_id}/webhooks`. The key CMS events are `collection_item_created`, `collection_item_changed`, `collection_item_deleted`, and `collection_item_published`.

bash
curl -X POST "https://api.webflow.com/v2/sites/{siteid}/webhooks" \ -H "Authorization: Bearer YOURACCESSTOKEN" \ -H "Content-Type: application/json" \ -d '{"triggerType": "collectionitem_created", "url": "https://your-middleware.com/webhook/cms-sync"}'

2. In your middleware, validate the `x-webflow-signature` header using HMAC-SHA256 and return HTTP 200 immediately, before any async Elasticsearch operations. Webflow retries failed webhook deliveries up to 3 times at 10-minute intervals.
3. Fetch complete item data with `GET /v2/collections/{collection_id}/items/{item_id}`, since webhook payloads contain only `name` and `slug` in `fieldData`.
4. Index the complete document to Elasticsearch using `PUT /{index}/_doc/{item_id}` for new items or `POST /{index}/_update/{item_id}` for partial updates.

This webhook flow keeps the Elasticsearch index aligned with Webflow CMS changes while reducing unnecessary polling.

#### Index form submissions

Webflow form submissions can be piped into Elasticsearch for lead analytics, support ticket tracking, or behavioral analysis.

To set up form indexing:

1. Register a webhook for `form_submission` events pointing to your middleware endpoint.
2. Create an Elasticsearch [ingest pipeline](https://www.elastic.co/docs/manage-data/ingest) to normalize form data before indexing:

bash
PUT ingest/pipeline/webflow-forms{ "description": "Process Webflow form submissions", "processors": [ { "rename": { "field": "payload.data", "targetfield": "formfields" } }, { "set": { "field": "source", "value": "webflow" } }, { "date": { "field": "payload.submittedAt", "targetfield": "@timestamp" } }
]
}

3. Index each submission with the pipeline applied: `PUT /webflow-forms/_doc/{submission_id}?pipeline=webflow-forms`.

Form data indexed in Elasticsearch can power Kibana dashboards that surface zero-result searches, conversion rates by form, and submission trends over time.

#### Serve search results through a proxy

Elasticsearch API calls from a Webflow-hosted site typically go through a server-side proxy. Browser-to-Elasticsearch calls usually fail by default because CORS is [disabled by default](https://www.elastic.co/docs/solutions/elasticsearch-solution-project/search-applications/search-application-security) on Elasticsearch, and exposing Private or Admin API keys in client-side code is unsupported.

To implement search:

1. Deploy a serverless function that accepts search queries from the browser and forwards them to your Elasticsearch cluster. Store the API key as an environment variable.
2. Call the Elasticsearch [Search API](https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-search) from the proxy: `GET /{index}/_search` with your Query DSL payload.
3. Return results to the browser and render them in a Code Embed container on your Webflow page.

For pages that display results from multiple content types (blog posts, products, help articles), use the [Multi-Search API](https://www.elastic.co/docs/api/doc/elasticsearch/operation/operation-msearch) (`GET /_msearch`) to execute multiple queries in a single request.

## What can you build with the Elastic Webflow integration?

Integrating Elastic with Webflow lets you add production-grade search, analytics, and content discovery to your site without migrating away from Webflow's CMS or hosting.

- **Faceted product search:** Build a product catalog page with real-time filters for price, brand, color, and size. Elasticsearch [aggregations](https://www.elastic.co/search-labs/tutorials/search-tutorial/full-text-search/facets) generate dynamic filter counts that update as visitors narrow their selections, going well beyond what a [Collection List](https://help.webflow.com/hc/en-us/articles/33961294051347-Collection-list) filter can handle natively.
- **Knowledge base with semantic search:** Create a help center where visitors search using natural language queries like "how do I reset my password" instead of exact keyword matches. Elasticsearch's [hybrid search](https://www.elastic.co/search-labs/blog/hybrid-search-ecommerce) combines keyword precision with vector-based semantic understanding to surface relevant articles even when the wording does not match.
- **Search analytics dashboard:** Embed a Kibana dashboard on an internal page that shows what visitors search for, which queries return zero results, and where content gaps exist. Elastic's behavioral analytics tracks `trackPageView`, `trackSearch`, and `trackSearchClick` events, as described in the [Elastic Search Labs e-commerce article](https://www.elastic.co/search-labs/blog/hybrid-search-ecommerce).
- **Real-time content index for large CMS libraries:** Sync large volumes of Webflow CMS items to Elasticsearch using webhook-driven indexing, then serve search results with sub-second response times and full Query DSL control. Webflow CMS limits vary by plan and can become restrictive for very large libraries, while Elasticsearch handles the search layer without the native widget's 100-result limit.

If you need more control over relevance scoring, cross-collection queries, or multi-source data aggregation, the API integration path covers those cases with full flexibility.{"index":{"_index":"webflow-cms","_id":"580e64008c9a982ac9b8b754"}}\\n{"name":"Pan-Galactic Gargle Blaster","slug":"pan-galactic","body":"..."}\\n' "$ELASTICSEARCH_URL/_bulk"

The /_bulk endpoint requires NDJSON format: each action line followed immediately by the source document, with a trailing newline. Do not pretty-print the JSON. Run this sync as a background job, not a browser-side script, since a 5,000-item collection requires at least 50 sequential API calls.

Set up real-time sync with webhooks

After the initial bulk sync, use Webflow webhooks to keep the Elasticsearch index current as CMS content changes.

To register webhooks for CMS sync:

1. Register webhook endpoints for the events you need by calling POST /v2/sites/{site_id}/webhooks. The key CMS events are collection_item_created, collection_item_changed, collection_item_deleted, and collection_item_published.

CODEBLOCK_2

2. In your middleware, validate the x-webflow-signature header using HMAC-SHA256 and return HTTP 200 immediately, before any async Elasticsearch operations. Webflow retries failed webhook deliveries up to 3 times at 10-minute intervals.
3. Fetch complete item data with GET /v2/collections/{collection_id}/items/{item_id}, since webhook payloads contain only name and slug in fieldData.
4. Index the complete document to Elasticsearch using PUT /{index}/_doc/{item_id} for new items or POST /{index}/_update/{item_id} for partial updates.

This webhook flow keeps the Elasticsearch index aligned with Webflow CMS changes while reducing unnecessary polling.

Index form submissions

Webflow form submissions can be piped into Elasticsearch for lead analytics, support ticket tracking, or behavioral analysis.

To set up form indexing:

1. Register a webhook for form_submission events pointing to your middleware endpoint.
2. Create an Elasticsearch ingest pipeline to normalize form data before indexing:

CODEBLOCK_3

3. Index each submission with the pipeline applied: PUT /webflow-forms/_doc/{submission_id}?pipeline=webflow-forms.

Form data indexed in Elasticsearch can power Kibana dashboards that surface zero-result searches, conversion rates by form, and submission trends over time.

Serve search results through a proxy

Elasticsearch API calls from a Webflow-hosted site typically go through a server-side proxy. Browser-to-Elasticsearch calls usually fail by default because CORS is disabled by default on Elasticsearch, and exposing Private or Admin API keys in client-side code is unsupported.

To implement search:

1. Deploy a serverless function that accepts search queries from the browser and forwards them to your Elasticsearch cluster. Store the API key as an environment variable.
2. Call the Elasticsearch Search API from the proxy: GET /{index}/_search with your Query DSL payload.
3. Return results to the browser and render them in a Code Embed container on your Webflow page.

For pages that display results from multiple content types (blog posts, products, help articles), use the Multi-Search API (GET /_msearch) to execute multiple queries in a single request.

What can you build with the Elastic Webflow integration?

Integrating Elastic with Webflow lets you add production-grade search, analytics, and content discovery to your site without migrating away from Webflow's CMS or hosting.

• Faceted product search: Build a product catalog page with real-time filters for price, brand, color, and size. Elasticsearch aggregations generate dynamic filter counts that update as visitors narrow their selections, going well beyond what a Collection List filter can handle natively.
• Knowledge base with semantic search: Create a help center where visitors search using natural language queries like "how do I reset my password" instead of exact keyword matches. Elasticsearch's hybrid search combines keyword precision with vector-based semantic understanding to surface relevant articles even when the wording does not match.
• Search analytics dashboard: Embed a Kibana dashboard on an internal page that shows what visitors search for, which queries return zero results, and where content gaps exist. Elastic's behavioral analytics tracks trackPageView, trackSearch, and trackSearchClick events, as described in the Elastic Search Labs e-commerce article.
• Real-time content index for large CMS libraries: Sync large volumes of Webflow CMS items to Elasticsearch using webhook-driven indexing, then serve search results with sub-second response times and full Query DSL control. Webflow CMS limits vary by plan and can become restrictive for very large libraries, while Elasticsearch handles the search layer without the native widget's 100-result limit.

If you need more control over relevance scoring, cross-collection queries, or multi-source data aggregation, the API integration path covers those cases with full flexibility.
```