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

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

<script src="https://cdn.flowsearch.io/widget.js"></script>

Then, add your initialization code to Footer Code (before </body>):

<script>
  const flowSearch = new FlowSearch({
    apiUrl: 'https://api.flowsearch.io',
    apiKey: 'YOUR_API_KEY'  // Get this from your dashboard
  });
  flowSearch.init();
</script>

FlowSearch works with your existing Webflow elements. Just add data attributes to identify them:

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

<!-- Container where results will appear -->
<div data-flowsearch-results></div>

<!-- Optional: Search button -->
<button data-flowsearch-submit>Search</button>

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-flowsearch-input, Value = (leave empty)
5. Repeat for results container and submit button

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