Installation - FlowSearch Documentation

Installation Methods

FlowSearch can be installed in several ways depending on your needs:

Option 1: Standard Webflow Installation (Recommended)

This is the recommended approach for most users. Add the search bar script site-wide, then add the results script only to your dedicated search results page.

Step 1: Search Bar Script (all pages)

In Webflow, go to Site Settings → Custom Code → Head Code and add:

<script
  src="https://www.flowsearch.io/widget.js"
  data-key="YOUR_API_KEY"
  data-results-page="/search-results"
  data-live="true">
</script>

Step 2: Results Page Script (search results page only)

Create a Webflow page at /search-results, then open that page's Page Settings → Custom Code → Head Code and add:

<script
  src="https://www.flowsearch.io/results.js"
  data-key="YOUR_API_KEY"
  data-summary="true">
</script>

Webflow reserves /search, so use /search-results or another custom slug. If you use another slug, update data-results-page in the Search Bar Script to match it. data-summary="true" enables the initial AI Summary; follow-up chat appears only on paid-plan sites.

Step 3: Search Bar HTML

Add this HTML wherever you want the search bar using a Webflow Embed/custom code element, or build the same form natively in Webflow and add the same data-fs-* attributes.

<form data-fs-search>
  <input data-fs-input type="text" placeholder="Search..." />
  <button data-fs-submit type="submit">Search</button>
</form>

Step 4: Results Page HTML

Add this HTML on the /search-results page using a Webflow Embed/custom code element, or recreate the layout natively and add the same attributes.

<div data-fs-results>
  <a data-fs-result data-fs-url href="#">
    <h3 data-fs-title></h3>
    <p data-fs-snippet></p>
  </a>
</div>

<div data-fs-pagination></div>

Option 2: Page-specific Installation

If you only want search on specific pages (e.g., your blog or documentation section):

Open the specific page in Webflow Designer
Go to Page Settings → Custom Code
Add the Search Bar Script to the page-specific Head Code section
Add the Search Bar HTML with a Webflow Embed/custom code element, or build it natively with the same attributes

Option 3: Conditional Loading

For advanced users who want to load FlowSearch only when needed:

<script>
  // Only load FlowSearch if search elements exist
  if (document.querySelector('[data-fs-search]')) {
    const script = document.createElement('script');
    script.src = 'https://www.flowsearch.io/widget.js';
    script.dataset.key = 'YOUR_API_KEY';
    script.dataset.resultsPage = '/search-results';
    script.dataset.live = 'true';
    document.head.appendChild(script);
  }
</script>

Verifying Installation

To verify FlowSearch is installed correctly:

Publish your site (FlowSearch doesn't work in the Webflow Designer preview)
Open your browser's Developer Tools (F12 or right-click → Inspect)
Go to the Console tab
Type window.FlowSearch and press Enter
You should see the loaded FlowSearch helper object, not "undefined"

Quick Console Check

Confirm the Search Bar Script loaded the expected settings:

console.log(window.FlowSearch?.config);

Self-hosting (Advanced)

For enterprise users who need to self-host the widget script:

Download the latest widget bundle from your dashboard
Upload to your own CDN or Webflow's Assets
Update the script src to point to your hosted file

Note

Self-hosted scripts won't receive automatic updates. Make sure to periodically check for new versions to get bug fixes and new features.

Content Security Policy (CSP)

If your site uses Content Security Policy headers, add these domains:

Content-Security-Policy: 
  script-src 'self' https://www.flowsearch.io;
  connect-src 'self' https://www.flowsearch.io;

Next Steps

Once FlowSearch is installed, you'll need to:

Installation Guide