How can Swiftype be integrated into a Webflow site?

To integrate Swiftype search into a Webflow site, you’ll need to manually embed the Swiftype search input and script using Webflow’s Embed elements or custom code areas.

​

1. Set Up a Swiftype Account and Engine

• Create a Swiftype account at swiftype.com.
• Add a new search engine and input your Webflow site's public URL.
• Swiftype will crawl your website and index your pages.

​

2. Get the Embed Code from Swiftype

• In the Swiftype dashboard, navigate to Install Search › JavaScript Snippet.
• Copy both the search input HTML and the JavaScript snippet.

​

3. Add the Search Input to Webflow

• In your Webflow Designer, drag an Embed element to where you want the search bar (e.g., navbar or hero section).
• Paste the Swiftype search input code inside the Embed block.

​

4. Add the JavaScript Snippet Sitewide

• Open Project Settings in Webflow.
• Go to the Custom Code tab.
• Paste the Swiftype JavaScript snippet in the Footer section (Before </body> tag).
• Publish your site for the code to take effect.

​

5. Customize the Search Experience (Optional)

• Return to your Swiftype dashboard to adjust crawler settings, result ranking, or enable autocomplete.
• You can also style the search bar in Webflow using custom <style> tags or by assigning a class to the embed and styling it with Webflow’s Designer.

​

6. Republish Your Webflow Site

• After inserting the embed code and script, publish the site for the changes to go live.
• Test the Swiftype search on the live site to ensure results are appearing as expected.

​

Summary

To integrate Swiftype with Webflow, embed the search input and JavaScript snippet from your Swiftype dashboard into Webflow using the Embed element and Custom Code Footer. Once added and published, your Webflow site will support advanced site search through Swiftype.