Webflow Integration - FlowSearch Documentation

Understanding Data Attributes

FlowSearch uses data attributes to identify which elements it should enhance. This means you can use your existing Webflow elements—no need to replace them with special components.

Required Attributes

data-flowsearch-input

Add to your text input element. This is where users type their search queries.

<input type="text" placeholder="Search..." data-flowsearch-input />

data-flowsearch-results

Add to the container where search results should appear. Can be a div, section, or any block element.

<div class="search-results" data-flowsearch-results></div>

Optional Attributes

data-flowsearch-submit

Add to a button that triggers search. Useful for users who prefer clicking over pressing Enter.

<button type="submit" data-flowsearch-submit>Search</button>

data-flowsearch-stats

Add to an element that should display search statistics (e.g., "Found 24 results in 35ms").

<div class="search-stats" data-flowsearch-stats></div>

data-flowsearch-no-results

Add to an element that should only show when there are no search results.

<div data-flowsearch-no-results style="display: none;">
  <p>No results found. Try a different search term.</p>
</div>

Adding Attributes in Webflow

Select your element in the Webflow Designer
Open the Settings panel (gear icon on the right)
Scroll down to Custom Attributes
Click the + button to add a new attribute
Enter the attribute name (e.g., data-flowsearch-input)
Leave the value empty (or add a value if needed for configuration)
Publish your site to see the changes

Common Integration Patterns

Pattern 1: Header Search Bar

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

<!-- In your navbar -->
<div class="nav-search-wrapper">
  <input
    type="text"
    class="nav-search-input w-input"
    placeholder="Search..."
    data-flowsearch-input
  />
  
  <!-- Dropdown results (position: absolute) -->
  <div 
    class="nav-search-results" 
    data-flowsearch-results
    style="display: none;"
  ></div>
</div>

Styling Tip

Use position: relative on the wrapper and position: absolute on the results container to create a dropdown effect.

Pattern 2: Hero Section Search

A prominent search bar in your hero section, great for content-heavy sites.

<section class="hero">
  <h1>Find what you're looking for</h1>
  
  <form class="hero-search-form" action="/search" method="get">
    <input
      type="text"
      name="q"
      placeholder="Search our site..."
      data-flowsearch-input
    />
    <button type="submit" data-flowsearch-submit>
      Search
    </button>
  </form>
  
  <div data-flowsearch-results></div>
</section>

Pattern 3: Dedicated Search Page

A full search results page with stats and pagination.

<main class="search-page">
  <form action="/search" method="get">
    <input
      type="text"
      name="q"
      placeholder="Search..."
      data-flowsearch-input
    />
    <button type="submit" data-flowsearch-submit>Search</button>
  </form>

  <!-- Search statistics -->
  <div data-flowsearch-stats></div>

  <!-- Results list -->
  <div class="results-list" data-flowsearch-results></div>

  <!-- No results message -->
  <div data-flowsearch-no-results style="display: none;">
    <h3>No results found</h3>
    <p>Try adjusting your search terms.</p>
  </div>

  <!-- Pagination -->
  <div data-flowsearch-pagination></div>
</main>

Webflow Forms Integration

FlowSearch works with Webflow's native form functionality. For progressive enhancement (works even without JavaScript):

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

With this setup, users without JavaScript can still search using the native form submission to your search results page.

CMS Integration

FlowSearch automatically indexes your Webflow CMS content. To optimize search for CMS items:

const flowSearch = new FlowSearch({
  apiUrl: 'https://api.flowsearch.io',
  apiKey: 'YOUR_API_KEY',
  searchParameters: {
    queryFields: ['title', 'content', 'summary'],
    facetBy: ['category', 'author', 'tags'],
    sortBy: 'published_date:desc'
  }
});

Class Preservation

FlowSearch preserves all your existing Webflow classes and adds its own prefixed classes:

flowsearch-enhanced — Added to all enhanced elements
flowsearch-input — Added to the search input
flowsearch-results — Added to the results container
flowsearch-loading — Added during search operations
flowsearch-has-results — Added when results are present
flowsearch-focused — Added when input is focused

Use these classes to style different states in your Webflow design.

Important Notes

Designer vs. Published Site

FlowSearch only works on your published site, not in the Webflow Designer preview. This is because custom scripts only run on published sites.

Webflow Integration Guide