Installation - FlowSearch Documentation

Installation Methods

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

Option 1: Site-wide Installation (Recommended)

This is the recommended approach for most users. It loads FlowSearch on every page of your site, ensuring search is always available.

Step 1: Add the script to your site's Head Code

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

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

Step 2: Add initialization to Footer Code

In Site Settings → Custom Code → Footer Code, add:

<script>
  const flowSearch = new FlowSearch({
    apiUrl: 'https://api.flowsearch.io',
    apiKey: 'YOUR_API_KEY'
  });
  
  flowSearch.init().then(() => {
    console.log('FlowSearch ready!');
  }).catch(error => {
    console.error('FlowSearch error:', error);
  });
</script>

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 Webflow Designer
Go to Page Settings → Custom Code
Add the same scripts as above to the page-specific Head and Footer code sections

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-flowsearch-input]')) {
    const script = document.createElement('script');
    script.src = 'https://cdn.flowsearch.io/widget.js';
    script.onload = function() {
      const flowSearch = new FlowSearch({
        apiUrl: 'https://api.flowsearch.io',
        apiKey: 'YOUR_API_KEY'
      });
      flowSearch.init();
    };
    document.head.appendChild(script);
  }
</script>

Verifying Installation

To verify FlowSearch is installed correctly:

Publish your site (FlowSearch doesn't work in the Webflow Designer preview)
Open your browser's Developer Tools (F12 or right-click → Inspect)
Go to the Console tab
Type FlowSearch and press Enter
You should see the FlowSearch class definition, not "undefined"

Debug Mode

Enable debug mode to see detailed logging:

new FlowSearch({ ..., debug: true })

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 Webflow's Assets
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://cdn.flowsearch.io;
  connect-src 'self' https://api.flowsearch.io;

Next Steps

Once FlowSearch is installed, you'll need to:

Installation Guide