Modal Widget

The Modal Widget provides a search dialog that appears as an overlay when triggered. It includes a search input, AI-generated answers, and search results. Users can open it with Cmd+K (Mac) or Ctrl+K (Windows/Linux), or by clicking the trigger button.

Basic Installation

Add a container element and the modal widget script:

<div id="quant-search"></div>
<script 
  src="https://cdn.quantsearch.ai/v1/modal-widget.js"
  data-site-id="YOUR_SITE_ID"
  async
></script>

Replace YOUR_SITE_ID with the ID from your QuantSearch dashboard.

This creates a search trigger button inside the container. Clicking it (or pressing Cmd+K / Ctrl+K) opens the search modal.

Configuration Options

Attribute	Default	Description
`data-site-id`	-	Required (or use `data-group-id`). Your site ID from the dashboard.
`data-group-id`	-	Use instead of `data-site-id` to enable federated search across a group of sites.
`data-container`	`quant-search`	ID of the container element for the trigger button (without #).
`data-theme`	`dark`	Color theme: `dark`, `light`, or `auto` (follows system preference)
`data-color`	`#00d4aa`	Primary accent color (hex format, e.g., `#6366f1`)
`data-placeholder`	`Search...`	Placeholder text for the search input.
`data-link-target`	`_blank`	How links open: `_blank` (new tab) or `_self` (same window)
`data-ai-length`	`medium`	AI response length: `short` (~256 tokens), `medium` (~512 tokens), `long` (~1024 tokens)
`data-show-ai-answer`	`true`	Show AI-generated answer. Set to `false` to show only search results.
`data-show-results`	`true`	Show search results below AI answer. Set to `false` to show only the AI assistant.
`data-hide-branding`	`false`	Hide "Powered by QuantSearch" branding (Pro and Enterprise plans).

Example with Options

<div id="quant-search"></div>
<script 
  src="https://cdn.quantsearch.ai/v1/modal-widget.js"
  data-site-id="abc123"
  data-theme="dark"
  data-color="#6366f1"
  data-placeholder="Search documentation..."
  data-link-target="_blank"
  data-ai-length="medium"
  data-show-ai-answer="true"
  data-show-results="true"
  async
></script>

Search Groups

To enable search across multiple sites in a group, use data-group-id instead of data-site-id:

<div id="quant-search"></div>
<script 
  src="https://cdn.quantsearch.ai/v1/modal-widget.js"
  data-group-id="YOUR_GROUP_ID"
  data-theme="dark"
  async
></script>

Custom Container

Place the trigger button in a specific location by using a custom container ID:

<div id="my-search-container"></div>
<script 
  src="https://cdn.quantsearch.ai/v1/modal-widget.js"
  data-site-id="YOUR_SITE_ID"
  data-container="my-search-container"
  async
></script>

Keyboard Shortcut

The modal automatically responds to Cmd+K (Mac) or Ctrl+K (Windows/Linux). Press Escape to close it.

// The modal opens with Cmd+K (Mac) or Ctrl+K (Windows/Linux)
// You can also trigger it programmatically:
window.quantSearchModal.open();
window.quantSearchModal.close();

JavaScript API

Control the modal programmatically after it loads:

// Open/close the modal
window.quantSearchModal.open();
window.quantSearchModal.close();

// Change theme dynamically
window.quantSearchModal.setTheme('dark');    // 'light', 'dark', or 'auto'

// Get current theme
const theme = window.quantSearchModal.getTheme();

// Example: sync with your site's theme toggle
document.querySelector('#theme-toggle').addEventListener('click', () => {
  const isDark = document.body.classList.toggle('dark');
  window.quantSearchModal.setTheme(isDark ? 'dark' : 'light');
});

Available methods:

open() - Open the search modal
close() - Close the search modal
setTheme(theme) - Set theme to 'light', 'dark', or 'auto'
getTheme() - Get the current active theme

Content Security Policy

If you use CSP, add these directives to your policy:

script-src 'self' https://cdn.quantsearch.ai https://cdn.jsdelivr.net;
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
font-src 'self' https://fonts.gstatic.com;
connect-src 'self' https://cdn.quantsearch.ai;

Modal vs. Search Page vs. Chat Widget

Use the Modal Widget when you want:

Search triggered by a button or Cmd+K keyboard shortcut
Overlay that appears on demand without navigating away
Quick search experience similar to Spotlight or VS Code

Use the Search Page when you want:

A dedicated search page at /search
Full-page search results with AI answers
More screen space for results

Use the Chat Widget when you want:

Quick access from any page via floating button
Conversational AI assistant experience
Always-visible trigger button