Swiftype
Connect Swiftype with Webflow to get autocomplete search, faceted filtering, and relevance tuning managed through dashboard controls without code deployments.
How to integrate Swiftype with Webflow
Site search needs autocomplete, relevance tuning, and analytics that go beyond basic text matching. Swiftype provides these capabilities through crawler-based indexing and dashboard controls that let you configure search behavior without code changes.
Integrate Swiftype with Webflow using JavaScript widgets for quick setup, or build API connections for real-time CMS synchronization and member-protected content indexing.
Native features, direct embeds and widgets
Swiftype provides search widgets with dashboard-controlled styling and behavior that embed directly into Webflow using custom code.
The search widget supports three implementation styles:
- Overlay: Results appear in popup
- Inline: Results display on same page
- Result page: Dedicated results page
You control styling and behavior through the Swiftype dashboard without updating your Webflow site code.
Start by creating a Swiftype account and search engine using your published Webflow site URL. The platform's web crawler (Swiftbot) automatically discovers and indexes your pages through internal links or custom sitemaps. After configuring your search interface in the Swiftype dashboard, you receive a JavaScript installation snippet that you add to your Webflow site.
Add the installation code through Site Settings > Custom Code > Head Code for site-wide search, ideally immediately after the opening <head> tag, using asynchronous loading for optimal performance. Or place search boxes and result containers using Code Embed elements from the Add panel.
Widget capabilities include:
- Overlay search widget displays results in a popup and requires only a search input field
- Inline search widget keeps users on the current page and shows results below your search box with
<div id="st-results-container"></div> - Result page widget separates search UI from results display and redirects to a dedicated page configured in the dashboard
- Dashboard controls for autocomplete, relevance tuning, synonyms, and visual styling mean no code deployments for search updates
- Crawler control using data attributes like
data-swiftype-index="false"to exclude specific page elements from indexing
Swiftype offers multiple plan tiers with different crawl frequencies. Higher-tier plans provide more frequent automatic crawls and additional manual recrawl allowances. Crawler-based indexing works well for static marketing sites but doesn't capture frequently updated CMS content in real time.
Build with Webflow and Swiftype APIs
API-based integration indexes Webflow CMS content in real time and provides programmatic control over search behavior. This approach works when you need member-protected content indexed (which the crawler can't access), immediate search updates when CMS items change, or custom search experiences beyond standard widget capabilities.
Use Webflow's Data API to detect content changes and Swiftype's Site Search API to index documents.
Core API capabilities include:
- Webhook-triggered indexing using Webflow webhooks for
collection_item_created,collection_item_updated,collection_item_deleted, andcollection_item_publishedevents - Document management through bulk indexing endpoints that accept up to 100 documents per request
- Custom schemas defining which CMS fields to index and how to weight them for relevance
- Real-time synchronization with sub-second latency when using webhook-triggered Lambda functions
Both Webflow and Swiftype enforce rate limits that vary by plan tier. Consult the current documentation for both platforms when planning your integration architecture.
Real-time CMS synchronization
Crawler-based indexing creates delays between publishing CMS content and search availability. Sync Webflow CMS collections to Swiftype using event-driven architecture that indexes content within seconds of publication. This pattern works for blogs, product catalogs, knowledge bases, or any CMS-powered content that needs immediate search availability.
Implementation steps:
- Create webhook in Webflow using
POSTtohttps://api.webflow.com/sites/{site_id}/webhookswith your function URL as the destination - Validate webhook signatures in your function to prevent unauthorized requests
- Transform Webflow's
fieldDataobject to match your Swiftype search engine schema - Call Swiftype’s bulk create or update endpoint to index the document
- Return HTTP 200 only after successful indexing to trigger automatic retries for failures
- Monitor failures through CloudWatch logs and configure alerts for repeated errors
For high-volume sites, use a queue-based pattern to buffer webhook events and batch process them. This reduces API calls by sending up to 100 documents per request instead of one at a time, and provides fault tolerance through SQS message persistence. Configure your SQS queue with a dead letter queue (a separate queue that captures failed messages for debugging) to capture failed indexing attempts for later investigation.
This approach provides sub-second search updates but requires managing rate limits on both platforms.
Authenticated content search
Index member-only content that Swiftype's crawler cannot access by using Swiftype's JSON API to pull data directly from Webflow's CMS API and push it to the search index.
Use Webflow's Collections API to fetch protected CMS items. For member-protected search with Swiftype Site Search, implement application-level filtering that returns all results from the search API and filters based on user permissions in your application code.
Your middleware (the server layer between Webflow and the search platform) needs separate authentication for both platforms: OAuth 2.0 bearer tokens for Webflow with appropriate scopes (cms:read for fetching collections) and API keys for Swiftype. No SSO integration exists between the platforms, so you manage authentication independently.
Key considerations:
- Swiftype plan tiers have different document limits and API call quotas
- Documents larger than 100 KB require truncation or selective field indexing to stay within Swiftype's limits
- Webflow rate limits vary by plan tier and may impact synchronization speed for large CMS collections
- Implement exponential backoff when you receive HTTP 429 responses from either platform's rate limiter
Custom search UI with headless CMS
Build custom search interfaces by using Swiftype as a headless search backend through direct API access, while serving content through Webflow.
This pattern works when you want search results styled exactly like your Webflow components, need to combine search with other data sources, or want mobile app search powered by the same Webflow content. Make client-side requests to Swiftype's public search endpoint at https://search-api.swiftype.com/api/v1/public/engines/search.json using your engine key, then render results using Webflow's CMS collections or custom JavaScript.
The public search endpoint accepts GET or POST requests with parameters for query string (q), filters, pagination (per_page, page), and field selection (fetch_fields, search_fields). Responses return JSON with matched documents, relevance scores, and highlighted snippets.
For server-side rendering or private search implementations, use the authenticated endpoint at https://search-api.swiftype.com/api/v1/engines/{engine_id}/search.json with your API token. This gives you access to analytics APIs for tracking which queries users run, clickthrough rates, and no-result queries that indicate content gaps.
What you can build
Integrating Swiftype with Webflow lets you build search experiences with autocomplete, faceted filtering, and relevance ranking managed through dashboard controls or API connections.
- Knowledge base with contextual help: Reduce support ticket volume with searchable documentation where users find answers through autocomplete suggestions and filtered results by content type or date, using Swiftype's overlay or inline widget styles while help articles live in Webflow CMS collections
- E-commerce product finder: Build product catalogs where customers filter by specifications, price ranges, or availability using Swiftype's faceted search, indexing product data from Webflow CMS or external APIs with automatic spelling correction and synonym matching
- Multi-language content portal: Serve global audiences with search that understands language-specific relevance for 13+ languages including English, French, Chinese, Japanese, and Russian, while content teams manage localized versions in Webflow CMS collections
- Member portal with gated search: Build membership sites where search results respect access controls using API-based indexing, since the crawler cannot access member-protected pages
Frequently asked questions
Create a Swiftype account and search engine using your published Webflow site URL through the Swiftype quick start process. After creating your engine and selecting your default language, navigate to the Installation section in the Swiftype dashboard to configure your search interface style (overlay, inline, or dedicated results page). Click Activate Site Search to generate your JavaScript installation snippet.
Add the installation script to Webflow by opening Site Settings > Custom Code and pasting the code in the Head Code section for site-wide search. For search boxes and result containers, drag an Embed element from Webflow's Add panel to your canvas and paste the HTML snippets provided by Swiftype.
The crawler troubleshooting guide identifies several common causes. Pages not appearing in search typically result from discovery issues (pages aren't linked internally), configuration problems (blacklist rules accidentally excluding content), or technical barriers (JavaScript-rendered content, incorrect canonical tags, or robots.txt blocking Swiftbot).
Check that your pages are published and publicly accessible, contain proper
<title>and<body>tags, and link to each other through your site navigation. Review your crawler rules under Domains > Manage Crawl Rules in the Swiftype dashboard to ensure you haven't accidentally excluded content. For pages that should be indexed but aren't discovered, manually submit them using the crawler operations API with a PUT request to/api/v1/engines/{engine_id}/domains/{domain_id}/crawl_url.json.No, Swiftype's web crawler cannot access content behind Webflow's membership authentication. The crawler troubleshooting documentation confirms that protected pages remain inaccessible to the crawler since it can't authenticate. For member-only content, use API-based indexing with custom schemas instead, which allows programmatic indexing through JSON API endpoints.
Pull content directly from Webflow's Collections API using authenticated requests with appropriate OAuth scopes (
cms:read), then push documents to Swiftype's bulk indexing endpoints. Include_allow_permissionsand_deny_permissionsarrays in your document payloads to control which users see each result based on their membership level. This approach requires custom middleware to handle both authentication systems independently since no SSO integration exists between the platforms.Crawl frequency depends on your plan tier. Different plan tiers offer varying automatic crawl schedules and manual recrawl allowances. Higher-tier plans provide more frequent automatic crawls and increased manual recrawl capabilities.
For sites with frequently updated content, crawler-based indexing creates noticeable delays between publishing and search availability. Use API-based integration with Webflow webhooks triggering immediate indexing updates instead. Webhook events like
collection_item_publishednotify your middleware within seconds of content changes, enabling real-time search index updates rather than waiting for the next scheduled crawl.Yes, Swiftype provides extensive customization options through the Swiftype Dashboard without requiring code changes. You can customize search behavior, relevance settings, autocomplete functionality, visual styling, and results display directly through dashboard settings.
If you need customization beyond the dashboard, you can inject CSS and HTML into Webflow using the Swiftype JavaScript. You can also add custom CSS to Webflow through the Code Embed element or site-wide custom code section in Site Settings.
You can target Swiftype's CSS classes to style autocomplete dropdowns, result cards, facet filters, and pagination controls while maintaining Swiftype's underlying search functionality and relevance algorithms.
Description
Swiftype is a cloud-based site search platform that provides hosted search solutions with web crawling, autocomplete, and analytics. The platform offers language-specific relevance models for 13+ languages, custom ranking controls, and real-time indexing through both automated crawlers and JSON APIs. Acquired by Elastic in 2017, Swiftype now operates as part of Elastic's Enterprise Search portfolio while maintaining its distinct brand.
This integration page is provided for informational and convenience purposes only.
Sajari Search
Add smart, AI-powered site search to your Webflow site in minutes. Join companies such as Sennheiser, Unity, and Lockheed Martin and deliver more relevant content to your visitors.
Searchbar.org
Searchbar.org is a full featured, easy-to-install search engine, perfect for your website. Get accessibility with search predictions, providing relevant content to your readers and followers.
Google Search
Google Custom Search helps people find what they need on your website.
Findberry
Findberry brings powerful, ad-free site search to your Webflow projects. Add professional search functionality that helps visitors quickly find products, articles, or resources across your site — without displaying third-party ads or requiring complex backend setup.
Related integrations
Get started for free
Get started for free
Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.
