How can Swiftype be integrated into a Webflow site?

Swiftype (now owned by Elastic) can be integrated into a Webflow site by adding its search script into your project and configuring your site’s search fields and results area accordingly.

1. Set Up a Swiftype Account and Engine

• Create an account at swiftype.com and set up a new search engine.
• Enter the URL of your Webflow site, and Swiftype will begin crawling and indexing your pages.

2. Get Your Swiftype Code Snippet

• Once your engine is created, go to the Install Search page in your Swiftype dashboard.
• Copy the JavaScript embed code provided for the search functionality.

3. Add the Swiftype Code to Your Webflow Project

• In Webflow, go to your Project Settings > Custom Code.
• Paste the Swiftype script inside the Footer Custom Code section so it loads after all content.
• Publish your site to apply the changes.

4. Design Your Search Input in Webflow

• Use Webflow Designer to add an input field where users will enter search terms.
• Give the input element the attribute name="st-search-input" (Swiftype uses this to detect the search field).
• You can also add a form action="#" or leave it as-is—it will be handled by JS.

5. Add a Container for Search Results (Optional)

• Swiftype can either auto-generate a modal with results or output them into a custom div.
• To use a custom container, add a div block and give it a class (e.g., st-results-container).
• In your footer script, configure the Swiftype search to use this container if needed.

6. Customize Swiftype Options (Optional)

• You can show instant results, override styles, or restrict search scopes using configuration options in the script.
• All customizations are done in the embedded JavaScript provided in your Swiftype settings.

Summary

To integrate Swiftype into your Webflow site, sign up at Swiftype, create a search engine for your site, embed the provided script in your project’s custom code, and hook it into your Webflow-designed input field. Optionally, you can designate a custom results container and fine-tune the experience through JavaScript settings.