How can Swiftype be integrated into a Webflow site?

Swiftype can be integrated into a Webflow site by embedding its JavaScript snippet and configuring the necessary search elements manually. Webflow does not have a native Swiftype integration, so setup requires using custom code. Follow these steps:

1. Create a Swiftype Account and Engine

• Sign up at Swiftype if you haven’t already.
• In the Swiftype dashboard, create a new Search Engine and specify your Webflow site’s domain.
• Swiftype will crawl your site to index its content. You can adjust crawl settings in the dashboard.

2. Add the Swiftype Meta Tag (Optional but Recommended)

• To help Swiftype better index your content, add their meta tag in Webflow:
• Go to Project Settings > Custom Code > Head Code
• Paste in the Swiftype verification meta tag.
• Example: <meta name="swiftype-site-verification" content="your-verification-code">
• Click Save and Publish your site.

3. Insert the Swiftype Search Script

• Copy the Swiftype install snippet from your engine's "Install Search" section in the Swiftype dashboard.
• Go to Webflow > Pages > [Your Page] > Page Settings > Before tag
• Paste the Swiftype script in the Footer Custom Code field.

4. Add a Search Input Field in Webflow

• In the Webflow Designer, drag in a Form > Input Field and give it the class "st-default-search-input" (without quotes).
• This allows the Swiftype script to target and enhance that input.
• Optionally, assign an ID (e.g., “search-input”) for styling or custom functions.

5. Style the Search Box and Results

• Swiftype inserts results dynamically, which appear in a default layout unless customized.
• You can override styles using Webflow’s custom CSS:
• Go to Project Settings > Custom Code > Head Code and insert your styles.
• Example: Style the results dropdown or form input to match your branding.

6. Publish and Test

• Click Publish to deploy the site.
• Enter test queries in your search input and confirm:
• The dropdown populates with correct results.
• UI matches your site’s design.
• Clicking a result redirects correctly.

Summary

To integrate Swiftype with Webflow, create a Swiftype engine, insert their search script into Webflow's custom code area, and add a search input with the correct class. Customize styles via CSS if needed. This enables a fully functional, real-time search experience powered by Swiftype on your Webflow site.