Swiftype

Webflow's built-in site search covers the basics and stops there. It needs a Premium Site plan or higher, shows at most 60 results on a page with no pagination beyond that, and refreshes its index 12 hours after a full-site publish on Premium or 72 hours on the legacy CMS plan. Publishing a single CMS item does not trigger a reindex at all. You also get no query dashboard inside Webflow and no way to pin a result for a given term, so sites that outgrow those limits reach for a dedicated search product.

Swiftype puts a hosted search index on top of your published pages. Its crawler walks every publicly reachable URL on the domain, and visitors get autocomplete, spelling correction, synonym matching, and per-query result rankings that you control. Dashboards report which queries people run and which results they click, so you can promote or drop a result without republishing the site. For Webflow CMS content that changes between crawls, webhook-driven API indexing keeps the index current.

The pairing suits teams running a help center or a high-volume blog, plus anyone with a large catalog who uses search data to find gaps in their content. Developers get a REST API for real-time indexing and fully custom result rendering.

How to integrate Swiftype with Webflow

What is Swiftype? Swiftype is a hosted site search product that Elastic acquired in November 2017 and still sells as a standalone SaaS, distinct from Elastic's own stack. It indexes content through a web crawler or a documents API, then layers autocomplete, spelling correction, synonyms, search analytics, and per-query rankings on top of that index.

Teams usually add Swiftype once a Webflow site's content library grows past what menus and category pages can surface. Webflow pages render as server-side HTML, so Swiftype's crawler, Swiftbot, reads them without special configuration. Publishing a Webflow site also regenerates sitemap.xml, which the crawler picks up through the Sitemap: directive in robots.txt.

The Swiftype and Webflow integration supports three approaches:

• The JavaScript snippet and Code Embed elements add crawler-based search to any page with no backend.
• Zapier workflows index content the crawler never reaches, such as form submissions and orders.
• The Webflow Data API and Swiftype APIs give you full control over indexing and custom search interfaces, at the cost of server-side development.

Most implementations combine two of these depending on how much of the content is public.

Add Swiftype search with custom code and Code Embed elements

Swiftype's Webflow setup runs through head and body custom code, which needs a paid Workspace plan or an active Site plan. You paste one script into the site head, and Swiftype handles both the crawl and the search interface. Swiftype's design guide documents three display modes, from the out-of-the-box overlay through to a dedicated results page on its own URL.

The pasted snippet on its own already covers most of what teams want from site search.

• Three display modes: Pick the dimmed overlay, results embedded on every page, or a standalone results page, all driven by the same install key.
• Query handling: Autocomplete, spelling correction, synonym matching, and relevance ranking all run server side, so you write no matching logic yourself.
• Search analytics: Dashboards report the queries visitors run and the results they click, including searches that return nothing.
• Result curation: Promote a result to the top of a specific query or remove it from that query, all from the Swiftype dashboard.

Everything past the snippet is placement and styling work.

Install the default search overlay

This is the fastest path and needs no code beyond pasting the snippet. Note that the engine you create here is crawler-based, and the API path further down uses a different engine type, so decide which one you need before you create it.

To set up the integration:

1. Create a crawler-based engine in the Swiftype dashboard by entering your site URL, then name the engine and pick its default language.
2. Click Installation, configure the search field and result container, then click Activate Site Search to get your JavaScript snippet.
3. In Webflow, open Site settings > Custom code and paste the snippet into the Head code field.
4. Publish the site. Custom code effects show up in preview mode, but nothing reaches visitors until you publish.

The snippet looks like this, with your install key in place of the placeholder:

<script type="text/javascript">
  (function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
  (w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
  e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
  })(window,document,'script','//s.swiftypecdn.com/install/v2/st.js','_st');
  _st('install','xxx-xxxx-xxx','2.0.0');
</script>

Once live, a search tab appears in the bottom right of the page with a results overlay, and Swiftbot starts crawling every publicly accessible page on the domain.

Place a custom search input with Code Embed elements

To match your own design instead of the default tab, wire Swiftype to your own input and results container with Code Embed elements. Swiftype's design and customization guide documents the two CSS classes that do the work.

To add a custom search box:

1. Keep the JavaScript snippet from the previous step in your site head code.
2. Drag a Code Embed element to where the search input belongs and add <input type="text" class="st-default-search-input" />.
3. Add a second Code Embed element where results should render and add <div class="st-search-container"></div>.
4. Publish the site.

Each Code Embed element holds up to 50,000 characters, and the Head and Footer code fields in Site settings hold 50,000 characters each as well. If your styling overrides push past that, host the CSS elsewhere and reference it from the head.

Use the jQuery plugin for full-page results and autocomplete

Swiftype's jQuery plugin gives you more control than the CSS-class approach for a small amount of JavaScript. Webflow already loads jQuery on published sites, so add only the Swiftype plugin file and never a second copy of jQuery, which Webflow warns can cause conflicts.

To initialize the plugin:

1. Add the Swiftype plugin script to Site settings > Custom code in the Head code field.
2. Initialize full-page results or autocomplete in a script block against your own input element.

// Full-page search results
$('#st-search-input').swiftypeSearch({
  resultContainingElement: '#st-results-container',
  engineKey: 'swiftype-example-api'
});

// Autocomplete
$('#st-search-input').swiftype({ engineKey: 'swiftype-example-api' });

The plugin's renderFunction parameter takes over result rendering entirely, and highlightFields controls which fields get highlighted snippets. One caveat applies to every method in this section: Swiftbot cannot execute JavaScript. Anything a Code Embed fetches and renders in the browser stays out of the index, and content behind a login needs the API path below.

Connect Webflow triggers to Swiftype actions

Automation platforms index content the crawler never sees and push new records in faster than a scheduled recrawl. Zapier connects the two with a Swiftype New Document trigger and a Swiftype Create Document action on the Swiftype side, paired with Webflow's own triggers and item actions.

The pairings worth building first:

• Form submissions: Send the Webflow New Form Submission trigger to Swiftype Create Document so user-submitted content becomes searchable straight away.
• Ecommerce orders: Use the Webflow New Order or Updated Order trigger to write order records into the index as they land.
• Site comments: Route the Webflow New Comment trigger into Swiftype so internal review notes are searchable alongside published pages.
• Reverse sync: Start from the Swiftype New Document trigger and finish with Webflow Create Item or Update Item to mirror indexed documents into a Collection.

The Swiftype pairing lists no site-publish trigger, so whole-site refreshes still depend on scheduled recrawls or the API path below.

Build with the Webflow and Swiftype APIs

The API path handles real-time index sync and fully custom search interfaces. It needs server-side development, because Swiftype's private API key is permissive and must never appear in client-side code. Swiftype's guidance for any CMS points the same direction: "You can use these callbacks to notify Site Search of new content to index." Check which APIs your Swiftype plan includes before you commit to this path, because the published tiers differ on that point.

Four endpoints carry the work:

• Webflow site reads: The Webflow sites endpoint gives you the site IDs you need before anything else can run.
• Webflow collection reads: The collections endpoint exposes the field structure you map onto Swiftype document fields, under the cms:read scope.
• Swiftype indexing: Engine management and document writes run against api.swiftype.com, documented in Swiftype's indexing reference.
• Swiftype queries: Public search runs against search-api.swiftype.com with the read-only Engine Key, which is safe to ship in browser JavaScript.

Client-side queries hit GET or POST /api/v1/public/engines/search.json, with a matching autocomplete endpoint alongside it. Keep the private key on your server and the Engine Key in the browser, and the split stays clean.

Bulk-index Webflow CMS items

This method pushes CMS content directly into Swiftype instead of waiting for a crawl, and it wants an API-based Swiftype engine rather than a crawler-based one.

To implement the sync:

1. List collections with GET /v2/sites/{site_id}/collections using a token that carries the cms:read scope.
2. Page through items with GET /v2/collections/{collection_id}/items, using offset and a limit of at most 100 per request.
3. Map Webflow fields such as name, slug, and body content onto Swiftype document fields, and set each Webflow item id as the Swiftype external_id, which every document requires.
4. Send batches to POST /api/v1/engines/{engine_id}/document_types/{document_type}/documents/async_bulk_create_or_update.
5. Poll GET /api/v1/document_receipts/{receipt_id}.json to confirm each batch actually indexed.

Authenticate Swiftype indexing calls by passing the private API key as auth_token in the JSON body, or as the HTTP Basic auth username on receipt checks. Send every one of these calls from your server.

Sync in real time with Webflow webhooks

Webhooks close the gap between publishing content in Webflow and seeing it in search results. Swiftype exposes no outbound webhooks of its own, so Webflow events drive the sync in one direction.

To set up webhook-driven indexing:

1. Register webhooks with POST /v2/sites/{site_id}/webhooks for the collection_item_created, collection_item_published, collection_item_changed, collection_item_unpublished, collection_item_deleted, and site_publish trigger types, using a token with the sites:write scope.
2. Verify each delivery with the x-webflow-signature header, a SHA-256 HMAC over the x-webflow-timestamp value and the body joined by a colon. These headers arrive on webhooks created through an OAuth app, so plan the registration path accordingly.
3. Route each event to the matching Swiftype call from your handler.

Each Webflow trigger maps to one Swiftype call.

Pull fieldData out of each webhook payload to build the Swiftype document, and reuse the payload id as the document's external_id so later updates and deletes hit the right record.

What you can build with the Swiftype Webflow integration

Swiftype and Webflow together give you analytics-backed site search that someone on the content team can tune, without you running a search backend. Four patterns cover most of what teams ship.

• Documentation and help center search: Build a /help page from a CMS Collection of articles, put the search input in the site nav, and hold the results container in a Code Embed on that page.
• Publication and blog search: Give a high-volume blog a full-page results template driven by the jQuery plugin. Swiftype's Engadget customer page reports an 18% increase in pageviews coming from search results.
• Ecommerce product search: Index a Webflow Ecommerce catalog with the crawler, then add the New Order trigger for order-driven records. Catalog changes reach the index through a recrawl or an API push.
• Cross-domain search across several sites: Give a multi-brand publisher one search box covering separate marketing and docs sites. This sits on Swiftype's higher plan tiers, and each domain must be added to the engine separately, because Swiftbot does not cross domains or subdomains on its own.

If you would rather run the search layer yourself, work through full-text search with Elasticsearch instead. And if an AI assistant does your Webflow work, connect the Webflow MCP server so it can read your collections and field structure and draft the document mapping for you.