Search Page

The Search Page component provides a complete search interface including an input field, AI-generated answers, and search results. Use this when you want a dedicated search page rather than a floating widget.

Basic Setup

Add a container element and the search page script:

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

Replace YOUR_SITE_ID with the ID from your QuantSearch dashboard.

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 (without #).
`data-theme`	`auto`	Color theme: `dark`, `light`, or `auto` (follows system preference)
`data-color`	`#00a388`	Primary accent color (hex format, e.g., `#6366f1`)
`data-placeholder`	`Search...`	Placeholder text for the search input.
`data-show-ai-answer`	`true`	Show AI-generated answer above results. Set to `false` to disable.
`data-results-limit`	`10`	Number of results to display.
`data-hide-branding`	`false`	Hide "Powered by Quant" branding (Pro and Enterprise plans).
`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-results`	`true`	Show search results below AI answer. Set to `false` to show only the AI assistant.

Example with Options

<div id="quant-search"></div>
<script 
  src="https://cdn.quantsearch.ai/v1/search-page.js"
  data-site-id="abc123"
  data-container="quant-search"
  data-theme="dark"
  data-color="#6366f1"
  data-placeholder="What are you looking for?"
  data-show-ai-answer="true"
  data-results-limit="10"
  data-link-target="_blank"
  data-ai-length="medium"
  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/search-page.js"
  data-group-id="YOUR_GROUP_ID"
  data-container="quant-search"
  async
></script>

Full Page Example

Here's a complete example of a dedicated search page:

<!DOCTYPE html>
<html>
<head>
  <title>Search - My Site</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; padding: 2rem; }
  </style>
</head>
<body>
  <h1>Search</h1>
  <div id="quant-search"></div>
  <script 
    src="https://cdn.quantsearch.ai/v1/search-page.js"
    data-site-id="YOUR_SITE_ID"
    data-container="quant-search"
    async
  ></script>
</body>
</html>

URL Parameters

The search page reads the q parameter from the URL, so you can link directly to search results:

https://yoursite.com/search?q=how+to+reset+password

This is useful for linking from other pages or external sources directly to search results.

Custom Styling

Override styles using CSS variables or target specific components:

.qs-page {
  /* Override theme colors */
  --qs-accent: #6366f1;
  --qs-accent-hover: #4f46e5;
  --qs-bg-primary: #1a1a2e;
  --qs-text: #ffffff;
}

/* Or target specific components */
.qs-search-input {
  font-size: 18px;
}

.qs-ai-answer {
  border-color: #6366f1;
}

Key CSS classes:

.qs-page - Main container
.qs-search-box - Search input wrapper
.qs-search-input - Search input field
.qs-ai-answer - AI answer section
.qs-results - Results container
.qs-result - Individual result card

JavaScript API

Control the search page programmatically after it loads:

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

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

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

Available methods:

setTheme(theme) - Set theme to 'light', 'dark', or 'auto'
getTheme() - Get the current active theme

Search Page vs. Chat Widget vs. Modal

Use the Search Page when you want:

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

Use the Chat Widget when you want:

Quick access from any page
Conversational AI assistant experience
Floating button that's always available
Minimal integration (single script tag)

Use the Modal Widget when you want:

Search triggered by a button or keyboard shortcut
Overlay that appears on demand
Quick search without leaving the current page