Embedding the search page

The search page component provides a full search interface with AI-generated answers, search results, and a text input — suitable for a dedicated search page on your site. Unlike the chat widget, which floats over your content, the search page embeds directly into your page layout.

Basic installation

Add a container element and the search page script to your HTML:

<div id="quant-search"></div>
<script
  src="https://ai-search.quantcdn.io/v1/search-page.js"
  data-site-id="YOUR_SITE_ID"
  data-container="quant-search"
  data-theme="light"
  data-show-ai-answer="true"
  data-results-limit="10">
</script>

Replace YOUR_SITE_ID with your project’s site ID.

Configuration options

Customise the search page using data attributes on the script tag:

Attribute	Required	Default	Description
data-site-id	Yes	—	Your project’s site ID
data-container	Yes	—	ID of the container element
data-theme	No	light	Colour theme: light, dark or auto (the dashboard snippet uses auto)
data-show-ai-answer	No	true	Show AI-generated summary above results
data-results-limit	No	10	Maximum number of search results to display

Styling

Override these CSS variables on the container: --qs-bg-primary, --qs-bg-secondary, --qs-bg-card, --qs-accent, --qs-accent-hover, --qs-text, --qs-text-secondary, --qs-border, --qs-font-family, --qs-border-radius.

Modal search

modal-widget.js renders a search trigger in the container and opens a search dialog on click or Cmd/Ctrl+K. It takes data-site-id, data-container, data-theme (light, dark, auto), data-color, data-placeholder, data-show-ai-answer and data-results-limit. Open it from script with window.quantSearchModal.open().

Iframe and public API

For an embed without styling, use an iframe with /v1/search.html?site=YOUR_SITE_ID on the script host. With public access enabled you can also call GET /v1/public/sites/YOUR_SITE_ID/search?q=your+query and POST /v1/public/sites/YOUR_SITE_ID/chat with {"message": "..."} on that host.

AI answers

When enabled, the search page displays an AI-generated summary above the traditional search results, synthesised from your indexed content. This gives visitors a direct answer to their query without needing to click through to individual pages.

To disable AI answers, set data-show-ai-answer="false":

<script
  src="https://ai-search.quantcdn.io/v1/search-page.js"
  data-site-id="YOUR_SITE_ID"
  data-container="quant-search"
  data-show-ai-answer="false">
</script>

When AI answers are disabled, the search page functions as a traditional search results page.

Next steps

• Chat widget — Add a floating chat button for conversational search
• Managing the index — View, search, and manage indexed pages
• Settings — Configure allowed domains and rate limits