Chat Widget

The QuantSearch chat widget provides a floating AI search assistant that your visitors can use to ask questions about your content. It appears as a button in the corner of your page that opens a chat interface.

Basic Installation

Add this script tag to your HTML, ideally just before the closing </body> tag:

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

Replace YOUR_SITE_ID with the ID from your QuantSearch dashboard.

Configuration Options

Customize the widget with data attributes:

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-theme`	`dark`	Color theme: `dark`, `light`, or `auto` (follows system preference)
`data-position`	`bottom-right`	Button position: `bottom-right`, `bottom-left`, `top-right`, `top-left`
`data-color`	`#00d4aa`	Primary accent color (hex format, e.g., `#6366f1`)
`data-placeholder`	`Type your question...`	Placeholder text for the chat input
`data-greeting`	Default welcome message	Custom greeting message shown when the chat opens
`data-context-url`	-	Pre-set a context URL for more relevant answers
`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)

Example with Options

<script 
  src="https://cdn.quantsearch.ai/v1/widget.js"
  data-site-id="abc123"
  data-theme="light"
  data-position="bottom-left"
  data-color="#6366f1"
  data-placeholder="Ask a question..."
  data-greeting="Welcome! How can I help you today?"
  data-link-target="_blank"
  data-ai-length="medium"
  async
></script>

Search Groups

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

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

Custom Styling

The widget uses CSS custom properties that you can override:

:root {
  /* You can override these CSS variables to customize the widget */
  --primary: #00d4aa;         /* Button and accent color */
  --primary-dark: #00a388;    /* Darker shade for gradients */
  --bg-main: #0a0a0f;         /* Main background */
  --bg-card: #16161f;         /* Card/header background */
  --text: #ffffff;            /* Primary text color */
  --text-muted: #888899;      /* Secondary text color */
  --border: #2a2a35;          /* Border color */
}

Note: The data-color attribute will override the --primary CSS variable.

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;

Framework Integration

React

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.quantsearch.ai/v1/widget.js';
    script.dataset.siteId = 'YOUR_SITE_ID';
    script.async = true;
    document.body.appendChild(script);
    
    return () => script.remove();
  }, []);
  
  return <div>Your app</div>;
}

Vue

<script setup>
import { onMounted, onUnmounted } from 'vue';

let script;

onMounted(() => {
  script = document.createElement('script');
  script.src = 'https://cdn.quantsearch.ai/v1/widget.js';
  script.dataset.siteId = 'YOUR_SITE_ID';
  script.async = true;
  document.body.appendChild(script);
});

onUnmounted(() => script?.remove());
</script>

Next.js

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://cdn.quantsearch.ai/v1/widget.js"
          data-site-id="YOUR_SITE_ID"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

JavaScript API

Control the widget programmatically after it loads:

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

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

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

Available methods:

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

Alternative: Search Page

If you prefer a full-page search experience instead of a floating widget, see the Search Page documentation.

Alternative: Modal Widget

For a modal search experience (triggered by a button click or keyboard shortcut), see the Modal Widget documentation.