Embedding the chat widget

The chat widget adds a floating chat button to your website, allowing visitors to ask questions and get AI-powered answers based on your content. It appears as a small button in the corner of the page and expands into a conversational interface when clicked.

Basic installation

Add a single script tag to your site, typically before the closing </body> tag:

<script
  src="https://ai-search.quantcdn.io/v1/widget.js"
  data-site-id="YOUR_SITE_ID"
  data-position="bottom-right"
  data-theme="light">
</script>

Replace YOUR_SITE_ID with your project’s site ID. Copy the snippet from the Search page of your dashboard and use the host it contains.

Tip

Find your site ID in the Search settings page after enabling AI Search.

Configuration options

Customise the widget behaviour using data attributes on the script tag:

Attribute	Required	Default	Description
data-site-id	Yes	—	Your project’s site ID
data-position	No	bottom-right	Widget position: bottom-right or bottom-left
data-theme	No	light	Colour theme: light or dark
data-color	No	—	Accent colour as a hex value, for example #0066cc
data-context-url	No	—	Override the context URL for the chat

Dark mode

Set data-theme="dark" to match dark-themed sites:

<script
  src="https://ai-search.quantcdn.io/v1/widget.js"
  data-site-id="YOUR_SITE_ID"
  data-position="bottom-right"
  data-theme="dark">
</script>

The dark theme adjusts the widget background, text colours, and input styling to suit dark user interfaces.

Next steps

• Search page — Embed a full search interface for a dedicated search page
• Settings — Configure allowed domains and rate limits