Webflow Integration Guide

Install the Scripts

FlowSearch uses two small scripts. Add each one in Webflow's Head Code exactly where shown below.

Search Bar Script (all pages)

Place this in Webflow Site Settings → Custom Code → Head Code. It enables search bars anywhere on the site and sends full searches to your published results page.

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

Results Page Script (search results page only)

Place this only on your new Search Results page in Page Settings → Custom Code → Head Code. In Webflow, the /search slug is reserved, so create /search-results or another custom slug and make sure data-results-page matches it. data-summary="true"enables the initial AI Summary; follow-up chat appears only on paid-plan sites. External Knowledge is also a paid feature, and chunked uploaded document knowledge is used only on Business and Enterprise sites.

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

Understanding Data Attributes

FlowSearch uses data-fs-* attributes to find the elements it should enhance. HTML snippets can be added inside the page with a Webflow Embed/custom code element, or recreated natively in Webflow with the same attributes.

Search Bar HTML

Add this form wherever the search bar should appear, or build the same structure with native Webflow elements and add the listed data-fs-* attributes in the Settings panel.

<form data-fs-search class="site-search">
  <input
    data-fs-input
    name="q"
    type="search"
    placeholder="Search..."
  />
  <button data-fs-submit type="submit">Search</button>
</form>

Results Page HTML

Add this to the /search-results page with a Webflow Embed/custom code element, or build it natively in Webflow and add the same attributes to your styled elements.

<main class="search-page">
  <form data-fs-search class="search-page-form">
    <input data-fs-input name="q" type="search" placeholder="Search..." />
    <button data-fs-submit type="submit">Search</button>
  </form>

  <p>Showing results for <span data-fs-query></span></p>
  <p><span data-fs-count>0</span> results found</p>

  <div data-fs-loading>Loading results...</div>
  <div data-fs-empty>No results found. Try another search.</div>
  <div data-fs-error>Search is unavailable right now.</div>

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

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

Adding Attributes in Webflow

1. Select your element in the Webflow Designer
2. Open the Settings panel (gear icon on the right)
3. Scroll down to Custom Attributes
4. Click the + button to add a new attribute
5. Enter the attribute name, for example data-fs-input
6. Leave the value empty unless the dashboard snippet shows a value
7. Publish your site to test the live scripts

Common Integration Patterns

Pattern 1: Header Search Bar

The most common setup is a search bar in your site navigation.

<!-- Search Bar HTML -->
<form data-fs-search class="nav-search-wrapper">
  <input
    data-fs-input
    type="search"
    class="nav-search-input w-input"
    placeholder="Search..."
  />
  <button data-fs-submit type="submit">Search</button>
</form>

Pattern 2: Hero Section Search

A prominent search bar in your hero section works well for content-heavy sites.

<!-- Search Bar HTML -->
<section class="hero">
  <h1>Find what you're looking for</h1>

  <form data-fs-search class="hero-search-form">
    <input
      data-fs-input
      type="search"
      name="q"
      placeholder="Search our site..."
    />
    <button data-fs-submit type="submit">Search</button>
  </form>
</section>

Pattern 3: Dedicated Search Page

Use the Results Page Script (search results page only) in the page-specific Head Code, then add Results Page HTML to the body of the page.

Webflow Forms Integration

FlowSearch works with native Webflow form elements as long as the form has data-fs-search and the input has data-fs-input. If you add an action fallback, use the same slug asdata-results-page, usually /search-results.

<form data-fs-search class="w-form" action="/search-results" method="get">
  <input
    data-fs-input
    type="search"
    name="q"
    class="w-input"
    required
  />
  <input
    data-fs-submit
    type="submit"
    value="Search"
    class="w-button"
  />
</form>

CMS Integration

FlowSearch indexes your published Webflow pages and CMS content during crawls. There is no extra JavaScript constructor to add for CMS sites; keep the scripts above installed and use the dashboard to recrawl after publishing new CMS content.

Class Preservation

FlowSearch keeps your existing Webflow classes. The live dropdown generated by the Search Bar Script adds these classes that you can style with custom CSS:

• .fs-live-dropdown for the live results container
• .fs-live-result for each live result
• .fs-live-result-title for the live result title
• .fs-live-result-snippet for the live result snippet
• .fs-live-empty for the empty live search state

Important Notes

Next Steps

• Configure search behavior
• Customize the appearance
• Troubleshoot common issues
• Open Dashboard Help & Support