Configuration - FlowSearch Documentation

Basic Configuration

FlowSearch is configured with script attributes and data-fs-* HTML attributes. Copy the current Search Key from your website's Integration tab before publishing.

Search Bar Script (all pages)

Place this script in Webflow Site Settings → Custom Code → Head Code. Use/search-results by default because Webflow reserves the /search slug. If you choose another slug, update data-results-page to match the published page.

Live-search request volume affects perceived speed. FlowSearch applies plan-based search infrastructure, result caps, and rate limits server-side, so lower plans may use more conservative live-search settings. When a site exceeds its plan limit, the search API returns SEARCH_RATE_LIMIT_EXCEEDED.

<script
  src="https://www.flowsearch.io/widget.js"
  data-key="YOUR_SEARCH_KEY"
  data-results-page="/search-results"
  data-live="true"
  data-live-delay="300"
  data-live-min-chars="2"
  data-live-max-results="5">
</script>

Results Page Script (search results page only)

Place this script only on the Search Results page in Page Settings → Custom Code → Head Code.

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

Script Attributes

Search Bar Script Options

Attribute	Default	Description
`data-key`	required	Your public Search Key from the dashboard
`data-results-page`	/search-results	Published results page slug that receives the query
`data-live`	false	Set to true to show live dropdown results while typing
`data-live-delay`	300	Debounce delay in milliseconds
`data-live-min-chars`	2	Minimum query length before live results appear
`data-live-max-results`	5	Maximum results in the live dropdown

Results Page Script Options

Attribute	Default	Description
`data-key`	required	Your public Search Key from the dashboard
`data-summary`	false	Set to true to show AI summaries; paid plans also show follow-up chat
`data-per-page`	10	Number of results to render per page
`data-param`	q	URL parameter used for the search query

HTML Attributes

HTML snippets can be added with a Webflow Embed/custom code element, or recreated with native Webflow elements using these attributes.

Search Bar HTML

<form data-fs-search>
  <input data-fs-input name="q" type="search" />
  <button data-fs-submit type="submit">Search</button>
  <button data-fs-clear type="button">Clear</button>
</form>

Results Page HTML

<div data-fs-summary></div>
<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.</div>
<div data-fs-error>Search is unavailable.</div>

<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>

Advanced Usage

The widget exposes a small browser helper for diagnostics and custom integrations after the Search Bar Script loads.

// Navigate to the configured results page with a query
window.FlowSearch.search('pricing');

// Fetch live results without navigating
window.FlowSearch.fetchResults('pricing').then(console.log);

// Inspect the loaded script configuration
console.log(window.FlowSearch.config);

Configuration Reference