Search Widget

The Intufind Search Widget provides a beautiful, keyboard-friendly search overlay for your website. Visitors can press ⌘K (Mac) or Ctrl+K (Windows) to instantly search your products and content.

Features

Unified Search: Search products and content simultaneously
Faceted Filtering: Filter by categories, brands, price ranges
Keyboard Navigation: Arrow keys to navigate, Enter to select
AI-Powered: Semantic search with matching highlights
Fully Customizable: Theme and CSS customization
Lightweight: ~5KB loader script

Quick Start

Add the search widget to any website with a single script tag:

<script 
  src="https://cdn.intufind.com/search-loader.js" 
  data-publishable-key="if_pk_your_key_here"
  async
></script>

That's it! Press ⌘K or Ctrl+K to open the search overlay.

Configuration

Using Data Attributes

<script 
  src="https://cdn.intufind.com/search-loader.js" 
  data-publishable-key="if_pk_your_key_here"
  data-show-trigger="true"
  data-trigger-position="top-right"
  async
></script>

Using Configuration Object

For more control, use a configuration object:

<script>
window.intufindSearchConfig = {
  publishableKey: 'if_pk_your_key_here',
  searchProducts: true,
  searchPosts: true,
  includeFacets: true,
  facetFields: ['categories', 'brands', 'price_ranges'],
  showTrigger: false,
  debugMode: false,
};
</script>
<script src="https://cdn.intufind.com/search-loader.js" async></script>

Configuration Options

Option	Type	Default	Description
`publishableKey`	`string`	required	Your Intufind publishable API key
`apiUrl`	`string`	`https://api.intufind.com`	API endpoint
`siteUrl`	`string`	`window.location.origin`	Your site URL
`searchProducts`	`boolean`	`true`	Enable product search
`searchPosts`	`boolean`	`true`	Enable post/content search
`productLimit`	`number`	`6`	Max product results
`postLimit`	`number`	`4`	Max post results
`includeFacets`	`boolean`	`true`	Include facet aggregations
`facetFields`	`string[]`	`['categories', 'brands', 'price_ranges']`	Facet fields to retrieve
`showTrigger`	`boolean`	`false`	Show floating trigger button
`triggerPosition`	`string`	`'top-right'`	Trigger button position
`debugMode`	`boolean`	`false`	Enable debug logging

Keyboard Shortcuts

Shortcut	Action
⌘K / Ctrl+K	Open search
↑ / ↓	Navigate results
Enter	Select result
Escape	Close search

JavaScript API

The widget exposes a global IntufindSearch API for programmatic control:

Widget Control

// Open search
IntufindSearch.open();

// Close search
IntufindSearch.close();

// Toggle search
IntufindSearch.toggle();

// Check if open
IntufindSearch.isOpen();

// Search with query
IntufindSearch.search('running shoes');

// Destroy widget
IntufindSearch.destroy();

Configuration

// Get current config
IntufindSearch.getConfig();

// Update config
IntufindSearch.configure({
  productLimit: 10,
  searchPosts: false,
});

Theming

// Set custom theme
IntufindSearch.setTheme({
  primaryColor: '#ff6b00',
  overlay: {
    background: 'rgba(0, 0, 0, 0.8)',
    blur: '12px',
  },
  modal: {
    background: '#0a0a0a',
    borderRadius: '20px',
  },
});

// Add custom CSS
IntufindSearch.setCustomCSS(`
  .itf-search-modal { border-radius: 24px; }
`);

Theming

Customize the appearance to match your brand:

IntufindSearch.setTheme({
  primaryColor: '#6101fe',
  overlay: {
    background: 'rgba(0, 0, 0, 0.8)',
    blur: '12px',
  },
  modal: {
    background: '#0a0a0a',
    border: 'rgba(255, 255, 255, 0.1)',
    borderRadius: '20px',
  },
  input: {
    text: '#ffffff',
    placeholder: 'rgba(255, 255, 255, 0.4)',
  },
  results: {
    hoverBackground: 'rgba(255, 255, 255, 0.08)',
    selectedBackground: 'rgba(255, 255, 255, 0.12)',
  },
  highlight: {
    background: 'rgba(97, 1, 254, 0.3)',
  },
  facets: {
    chipActiveBackground: '#6101fe',
  },
});

CSS Variables

All styling uses CSS custom properties for easy customization:

:root {
  --itf-search-overlay-bg: rgba(0, 0, 0, 0.7);
  --itf-search-modal-bg: rgba(10, 10, 10, 0.95);
  --itf-search-primary: #6101fe;
  --itf-search-highlight-bg: rgba(97, 1, 254, 0.3);
  --itf-search-text: #ffffff;
  --itf-search-text-muted: rgba(255, 255, 255, 0.5);
  --itf-search-border: rgba(255, 255, 255, 0.1);
}

Next.js Integration

For Next.js apps, load the widget after the page mounts:

'use client';

import { useEffect } from 'react';

export function SearchWidget() {
  useEffect(() => {
    // Set config before loading
    (window as any).intufindSearchConfig = {
      publishableKey: process.env.NEXT_PUBLIC_INTUFIND_PUBLISHABLE_KEY,
      searchProducts: true,
      searchPosts: true,
    };

    // Load the script
    const script = document.createElement('script');
    script.src = 'https://cdn.intufind.com/search-loader.js';
    script.async = true;
    document.body.appendChild(script);

    return () => {
      // Cleanup on unmount
      (window as any).IntufindSearch?.destroy();
      script.remove();
    };
  }, []);

  return null;
}

Add to your layout:

import { SearchWidget } from '@/components/search-widget';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <SearchWidget />
      </body>
    </html>
  );
}

WordPress

The search widget is included in the Intufind WordPress plugin. Enable it in Intufind → Search → Widget settings.

See WordPress Search Settings for configuration options.

Shopify

The search widget is included in the Intufind Shopify app. Enable it in Apps → Intufind → Search Widget settings.

Custom Trigger Button

Instead of using the keyboard shortcut or floating trigger, you can create your own search button:

<button onclick="IntufindSearch.open()">
  🔍 Search
</button>

Or with a keyboard hint:

<button onclick="IntufindSearch.open()">
  Search
  <kbd>⌘K</kbd>
</button>

Debug Mode

Enable debug mode during development to see API requests and events:

IntufindSearch.configure({
  debugMode: true
});

Next Steps

Widget Styling — Advanced CSS customization
Chat Widget — Add AI chat alongside search
Dashboard Analytics — Monitor search queries