Ask AI Widget

​

Quick start

<script
  async
  src="https://widget.beforequery.com/beforequery-widget.js"
  data-project-id="proj_xxx"
  data-client-key="bq_pk_..."
></script>

​

Full configuration

​

View modes

<script async src="https://widget.beforequery.com/beforequery-widget.js"
  data-project-id="proj_xxx" data-client-key="bq_pk_..."
  data-view-mode="modal"></script>

<script async src="https://widget.beforequery.com/beforequery-widget.js"
  data-project-id="proj_xxx" data-client-key="bq_pk_..."
  data-view-mode="search"
  data-search-input="#docs-search-input"></script>

<script async src="https://widget.beforequery.com/beforequery-widget.js"
  data-project-id="proj_xxx" data-client-key="bq_pk_..."
  data-view-mode="sidebar"></script>

​

Programmatic API

window.BeforeQueryWidget.init({
  projectId: "proj_xxx",
  clientKey: "bq_pk_...",
  viewMode: "modal",
  hotkey: "k",
  colorScheme: "auto",
});

window.BeforeQueryWidget.open();    // open panel
window.BeforeQueryWidget.close();   // close panel
window.BeforeQueryWidget.destroy(); // remove from DOM

​

Keyboard shortcut & dark mode

• Cmd+K (Mac) / Ctrl+K (Windows/Linux) opens the widget by default. Change with data-hotkey="/" or disable with data-hotkey="none". Esc always closes.
• The widget follows prefers-color-scheme automatically and switches theme in real time; force with data-color-scheme="dark" or "light".

​

Features at a glance

• Instant search results as you type (debounced 250 ms)
• Streaming RAG chat with numbered source citations
• Follow-up questions continue the same thread
• Thumbs up / down feedback
• reCAPTCHA v3 support (configured server-side via the widget-config API)
• Mobile full-screen sheet layout
• White-label branding: custom name, logo, accent color, and hideable footer (enterprise)

​

Local testing

<script
  src="http://localhost:5000/beforequery-widget.js"
  data-project-id="…"
  data-client-key="bq_pk_…"
  data-base-url="http://localhost:8280"
  defer
></script>