@beforequery/widget - BeforeQuery

The widget adds a floating AI assistant with instant search, streaming RAG chat with citations, three view modes, Cmd/Ctrl+K, dark-mode sync, and a support-form deflector. Styles live in a Shadow DOM — zero CSS leakage. Use the hosted bundle (recommended) or install the package:

npm install @beforequery/widget

Hosted script tag

<script
  async
  src="https://widget.beforequery.com/beforequery-widget.js"
  data-project-id="proj_xxx"
  data-client-key="bq_pk_..."
  data-view-mode="modal"
  data-hotkey="k"
  data-color-scheme="auto"
  data-primary-color="#343CED"
  data-product-name="Acme Docs AI"
  data-product-logo="https://example.com/logo.png"
></script>

The full attribute table (positions, branding, data-source-group-ids, data-hide-branding, deflector options) lives in Deploy → Widget.

Programmatic API

window.BeforeQueryWidget.init({
  projectId: "proj_xxx",
  clientKey: "bq_pk_...",
  baseUrl: "https://api.agents.beforequery.com", // optional
  position: "bottom-right",
  buttonText: "Ask AI",
  primaryColor: "#343CED",
  viewMode: "modal",                 // "modal" | "search" | "sidebar"
  searchInput: "#my-search-input",   // attach to existing input (search mode)
  hotkey: "k",                       // "none" disables
  colorScheme: "auto",               // "light" | "dark" | "auto"
  productName: "Acme Docs AI",
  productLogo: "https://example.com/logo.png",
  brandColor: "#0070f3",
  hideBranding: false,               // enterprise plan only
});

window.BeforeQueryWidget.open();
window.BeforeQueryWidget.close();
window.BeforeQueryWidget.destroy();

Form deflector

import { attachFormDeflector } from "@beforequery/widget";

attachFormDeflector({
  projectId: "proj_xxx",
  clientKey: "bq_pk_...",
  deflectForm: "#support-form",
  deflectQuestionField: "#description",
});

See Support Form Deflector for the full flow and API details.

Features

Shadow DOM style isolation
Three view modes: modal, search-bar, sidebar
Configurable Cmd/Ctrl+K shortcut; Esc closes
Dark-mode sync with OS + manual override
Instant search as you type (debounced 250 ms)
Streaming chat with numbered citations, follow-ups on the same thread
Thumbs up / down feedback
reCAPTCHA v3 support (configured server-side via widget-config)
Mobile full-screen sheet layout
White-label branding: name, logo, accent color (WCAG luminance-based foreground), hideable footer on 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>