WEBSITE WIDGET

AI knowledge on your site,
in any mode you need

One script tag. Four embed modes. Dark-mode sync included. BeforeQuery's website widget turns your existing knowledge base into an always-available AI assistant — as a chat launcher, search bar, sidebar, or Cmd/Ctrl+K command palette.

Start FreeWidget Docs
EMBED MODES

Four ways to surface AI answers

Switch modes with a single data attribute — no code changes required.

Chat Launcher

Default

A floating button in the corner of your page opens a full chat panel. The most familiar experience for users — minimal footprint on your page, maximum conversational depth.

  • Configurable position: bottom-right, bottom-left, or custom CSS anchor
  • Custom launcher icon or text label
  • Unread badge when a proactive message is configured
  • Smooth open/close animation with scroll-lock on mobile

Search Bar

Inline

Embed a search input directly in your page — inside a navigation bar, a hero section, or a docs header. Typing surfaces instant AI-generated answers in a popover without leaving the page.

  • Drop into any layout with a single React component or Web Component
  • Debounced query-as-you-type suggestions
  • Full answer with citations in the popover; link to expand conversation
  • Replaces or augments existing static search inputs

Sidebar

Persistent

A fixed sidebar panel pinned alongside your content — always visible, always ready. Ideal for documentation sites where users want to ask questions while reading without losing their place.

  • Resizable panel that pushes or overlays page content
  • Sticky context: current page URL auto-injected into the system prompt
  • Collapse to icon to reclaim screen space
  • Keyboard shortcut to toggle open/closed

Command Palette

Cmd/Ctrl+K

Trigger a full-screen command palette with Cmd+K (Mac) or Ctrl+K (Windows/Linux). Developers and power users get instant AI answers without reaching for the mouse.

  • Activates globally on any page with a single script tag
  • Fuzzy-search across question history and knowledge topics
  • Arrow-key navigation through suggested questions
  • Esc to dismiss; answer expands inline in the palette
ONE SCRIPT TAG

Embed in under 60 seconds

Paste the snippet into your page's <head>. Set data-mode to switch between chat launcher, search-bar, sidebar, or command-palette. Every other attribute is optional.

  • data-mode: chat | search | sidebar | cmdpalette
  • data-theme: light | dark | auto (default: auto)
  • data-primary-color: any valid CSS color
  • data-position: bottom-right | bottom-left | custom
  • data-project-id: your BeforeQuery project UUID
  • data-client-key: public client key (bq_pk_...)
Chat launcher (default)
<script
  src="https://widget.beforequery.com/v1/widget.js"
  data-project-id="proj_abc123"
  data-client-key="bq_pk_..."
  data-mode="chat"
  data-theme="auto"
  data-position="bottom-right"
  async
></script>
Command palette (Cmd/Ctrl+K)
<script
  src="https://widget.beforequery.com/v1/widget.js"
  data-project-id="proj_abc123"
  data-client-key="bq_pk_..."
  data-mode="cmdpalette"
  data-theme="auto"
  async
></script>
Sidebar (persistent panel)
<script
  src="https://widget.beforequery.com/v1/widget.js"
  data-project-id="proj_abc123"
  data-client-key="bq_pk_..."
  data-mode="sidebar"
  data-theme="auto"
  async
></script>
THEMING

Dark-mode sync and full style control

The widget adapts to your site's color scheme automatically. Override any detail with data attributes or a custom stylesheet.

Dark-mode sync

The widget reads the host page's prefers-color-scheme media query and automatically switches between light and dark themes. No configuration needed — it matches your site the moment it loads.

CSS custom properties

Override any design token via data-bq-* attributes on the script tag or the Web Component. Change primary color, font, border radius, and spacing without writing custom CSS.

Font inheritance

By default the widget inherits your page's font-family so text renders consistently with your brand. Override with data-bq-font-family if you prefer a dedicated typeface.

Full CSS override

Inject a stylesheet URL via data-bq-style-url for complete visual control. Every element in the widget has a stable BEM class name documented in the style guide.

CMD/CTRL+K

The keyboard shortcut developers expect

Enable command-palette mode and the widget registers a global Cmd+K (Mac) / Ctrl+K (Windows, Linux) listener. One keystroke opens the palette, another dismisses it. No mouse required.

  • Global listener registered once — works from any page element
  • Custom trigger key configurable via data-trigger-key attribute
  • Dismisses on Esc; does not interfere with browser or OS shortcuts
  • Renders above all page content with a backdrop overlay
  • Instant search across indexed question history
  • Arrow keys navigate; Enter expands the selected answer
COMMAND PALETTE — KEYBOARD FLOW
Cmd+K / Ctrl+KOpen command palette
Type querySearch knowledge base live
↑ ↓Navigate suggested questions
EnterRun query / expand answer
EscDismiss palette
Cmd+K againClose if already open

Frequently Asked Questions

Common questions about the BeforeQuery website widget

Set the data-mode attribute on the widget script tag to chat (floating launcher), search (inline search bar), sidebar (persistent side panel), or cmdpalette (Cmd/Ctrl+K command palette). You can only use one mode per page, but you can have multiple projects and widgets on different pages of the same site.
Yes. When data-theme is set to auto (the default), the widget reads the prefers-color-scheme CSS media query and switches between light and dark themes to match the host page. If a user changes their OS color scheme while the page is open, the widget updates in real time via a MediaQueryList listener.
Yes. Call window.BeforeQuery.open() from any click handler to open the command palette or chat launcher programmatically. You can also set data-trigger-key to a different key combination if Cmd/Ctrl+K conflicts with another shortcut on your page.
Yes. Install @beforequery/react and use the <BeforeQueryChat /> component or the useBeforeQueryChat headless hook for full control over rendering. The React package supports all the same modes and theming options as the script tag embed.
In push mode (default for sidebar), the widget adds a right margin to your page body equal to the sidebar width so content is not obscured. In overlay mode (data-sidebar-overlay='true'), the sidebar floats above the page without affecting layout. You can toggle between modes with a data attribute.
Pass data-group-ids or data-version-label on the script tag to restrict retrieval to specific source groups or doc versions. Useful when you have multiple product versions indexed in one project and want the widget on a v2 docs site to only surface v2 answers.

Add AI to your site in one paste

Connect a knowledge source, grab your client key, and embed the widget. Dark mode, keyboard shortcuts, and citations — all included.

Get Started FreeWidget Docs