Installation - FlowSearch Documentation

Installation Methods

FlowSearch can be installed in several ways depending on your needs:

Option 1: Standard Website Installation (Recommended)

This is the recommended approach for most users. Add the search bar script site-wide, then add the results script only to your dedicated search results page.

Step 1: Search Bar Script (all pages)

Open your site-wide head/custom-code area and add:

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

Step 2: Results Page Script (search results page only)

Create a website page at /search-results, then open that page's page-specific head/custom-code area and add:

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

Some sites already use /search, so use /search-results or another custom slug. If you use another slug, update data-results-page in the Search Bar Script to match it. data-summary="true" enables the initial AI Summary; follow-up chat appears only on paid-plan sites.

Step 3: Search Bar HTML

Add this HTML wherever you want the search bar using an HTML/custom-code block, or build the same form with your site's normal elements and add the same data-fs-* attributes.

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

Step 4: Results Page HTML

Add this HTML on the /search-results page using an HTML/custom-code block, or recreate the layout natively and add the same attributes.

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

Option 2: Page-specific Installation

If you only want search on specific pages (e.g., your blog or documentation section):

Open the specific page in site editor
Go to page-specific custom-code area
Add the Search Bar Script to the page-specific Head Code section
Add the Search Bar HTML with an HTML/custom-code block, or build it natively with the same attributes

Option 3: Conditional Loading

For advanced users who want to load FlowSearch only when needed:

<script>
  // Only load FlowSearch if search elements exist
  if (document.querySelector('[data-fs-search]')) {
    const script = document.createElement('script');
    script.src = 'https://www.flowsearch.io/widget.js';
    script.dataset.key = 'YOUR_API_KEY';
    script.dataset.resultsPage = '/search-results';
    script.dataset.live = 'true';
    document.head.appendChild(script);
  }
</script>

Verifying Installation

To verify FlowSearch is installed correctly:

Publish your site (FlowSearch doesn't work in the private editor preview)
Open your browser's Developer Tools (F12 or right-click → Inspect)
Go to the Console tab
Type window.FlowSearch and press Enter
You should see the loaded FlowSearch helper object, not "undefined"

Quick Console Check

Confirm the Search Bar Script loaded the expected settings:

console.log(window.FlowSearch?.config);

Self-hosting (Advanced)

For enterprise users who need to self-host the widget script:

Download the latest widget bundle from your dashboard
Upload to your own CDN or your asset host
Update the script src to point to your hosted file

Note

Self-hosted scripts won't receive automatic updates. Make sure to periodically check for new versions to get bug fixes and new features.

Content Security Policy (CSP)

If your site uses Content Security Policy headers, add these domains:

Content-Security-Policy: 
  script-src 'self' https://www.flowsearch.io;
  connect-src 'self' https://www.flowsearch.io;

Next Steps

Once FlowSearch is installed, you'll need to:

Installation Guide