Quick Start Guide

1. Sign up for FlowSearch (it's free to start)
2. Click "Add Website" in your dashboard
3. Enter your Webflow domain (e.g., yoursite.webflow.io or your custom domain)
4. Click "Start Crawl" — we'll index your pages automatically

Search Bar Script (all pages)

In Webflow, go to Site Settings → Custom Code → Head Code and add this script so search bars work across your site:

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

Results Page Script (search results page only)

Create a new 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 choose a different slug, update data-results-page to match it. data-summary="true" enables the initial AI Summary; follow-up chat appears only on paid-plan sites.

FlowSearch works with your existing Webflow elements. Add HTML with a Webflow Embed/custom code element, or build the elements natively in Webflow and add these data attributes:

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

<!-- Results Page HTML, on /search-results only -->
<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>

In Webflow Designer:

1. Select your search input element
2. Open the Settings panel (gear icon)
3. Scroll to Custom Attributes
4. Add attribute: Name = data-fs-input, Value = (leave empty)
5. Repeat for the form, submit button, results container, and result template attributes

Publish your Webflow site and try searching. You should see:

• Results appearing as you type
• Typo correction (try misspelling something!)
• Keyboard navigation with arrow keys
• Clickable results that link to your pages