@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-knowledge-base-id="kb_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 Widget Configuration.

Programmatic API

window.BeforeQueryWidget.init({
  knowledgeBaseId: "kb_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();

open(), close() and destroy() are three of twenty-one methods — there are also ask(), toggle(), expand(), collapse(), reset(), setMode(), setSourceGroupIds(), setUser() and an on() event bus covering every interaction. See the programmatic API and the full configuration reference.

Form deflector

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

attachFormDeflector({
  knowledgeBaseId: "kb_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-knowledge-base-id="…"
  data-client-key="bq_pk_…"
  data-base-url="http://localhost:8280"
  defer
></script>