Support/Troubleshooting

Troubleshooting Guide

Solutions to common issues and how to debug FlowSearch problems.

Quick Diagnostics

Open your browser's Developer Tools (F12) and check the Console tab for errors.

// Quick diagnostic script - paste in console
console.log('FlowSearch loaded:', typeof FlowSearch !== 'undefined');
console.log('Input element:', document.querySelector('[data-flowsearch-input]'));
console.log('Results element:', document.querySelector('[data-flowsearch-results]'));

Common Issues

"FlowSearch is not defined"

Script not loading or loading order issue

Causes:

  • • Script tag missing or incorrect
  • • Initialization code running before script loads
  • • CDN blocked by ad blocker or firewall

Solutions:

  1. Verify script is in <head>:
    <script src="https://cdn.flowsearch.io/widget.js"></script>
  2. Ensure initialization is in footer (after script loads)
  3. Check Network tab for blocked requests

"No elements found"

FlowSearch can't find your search elements

Causes:

  • • Missing data attributes on elements
  • • Script running before DOM is ready
  • • Typo in attribute names

Solutions:

  1. Check elements have correct attributes:
    <input data-flowsearch-input />
    <div data-flowsearch-results></div>
  2. Add initialization in footer code, not head
  3. Inspect element in Webflow to verify attribute is set

Search not returning results

Input works but no results appear

Causes:

  • • Invalid or expired API key
  • • Website not crawled yet
  • • Network/CORS issues

Solutions:

  1. Check your API key in the dashboard
  2. Verify crawl completed successfully
  3. Check Network tab for failed API requests
  4. Enable debug mode to see detailed logs:
    new FlowSearch({ ..., debug: true })

Results not visible

Search works but results don't display

Causes:

  • • CSS hiding the results container
  • • Z-index issues (behind other elements)
  • • Container has zero height

Solutions:

  1. Inspect the results container in DevTools
  2. Check for display: none or visibility: hidden
  3. Add higher z-index to results:
    [data-flowsearch-results] { z-index: 9999; }
  4. Ensure container has proper positioning for dropdown

Works in Designer, not on published site

Or vice versa

Important:

FlowSearch only works on published sites, not in the Webflow Designer preview. Custom code doesn't execute in the Designer.

Solutions:

  1. Always test on your published site or staging domain
  2. After making changes, publish and refresh with cache cleared
  3. Use Webflow's staging domain for testing

Debugging Tips

Enable Debug Mode

Get detailed console output:

const flowSearch = new FlowSearch({
  apiUrl: 'https://api.flowsearch.io',
  apiKey: 'YOUR_API_KEY',
  debug: true  // Enables verbose logging
});

Check Network Requests

  1. Open DevTools → Network tab
  2. Type in the search input
  3. Look for requests to api.flowsearch.io
  4. Check status codes and response bodies

Test API Directly

// Test API in browser console
fetch('https://api.flowsearch.io/api/v1/search?q=test', {
  headers: { 'X-FlowSearch-Key': 'YOUR_API_KEY' }
})
.then(r => r.json())
.then(console.log)
.catch(console.error);

Getting Help

If you're still stuck after trying these solutions:

Email Support

Send us details about your issue

support@flowsearch.io

Include This Info

  • • Your website URL
  • • Browser and version
  • • Console error messages
  • • Steps to reproduce

Next Steps