Embed & Developer

Web Widget AI Integration

Add AI chat to any website with one script tag

What is it?

About Web Widget

The BeforeQuery Web Widget is a hosted, embeddable AI chat launcher that drops into any HTML page — documentation sites, marketing sites, help centers, or customer portals. It requires no framework and works alongside any existing website technology.

Integration capabilities

How BeforeQuery works with Web Widget

Everything you can do once the Web Widget integration is connected.

Single script tag install

The widget loads from widget.beforequery.com. Add one script tag with your knowledge base ID and client key — the chat launcher appears immediately. No build step required.

Full CSS and theme customization

Override colors, fonts, position, and launcher icon with data attributes or a CSS override block. The widget inherits your page font automatically.

Mobile-responsive and accessible

The widget is fully responsive on mobile devices and keyboard-navigable. It meets WCAG 2.1 AA accessibility standards including screen reader compatibility.

reCAPTCHA bot protection

The hosted widget includes invisible reCAPTCHA to prevent automated scripts from consuming your question quota. Disable it for authenticated internal surfaces.

Setup

How to connect Web Widget

Step 01
In the BeforeQuery dashboard, create a client key (bq_pk_...) for your website under Knowledge Base > Client Keys.
Step 02
Add the widget script tag to your HTML, passing your knowledge base ID and client key as data attributes.
Step 03
Customize appearance with additional data attributes or a CSS override. The widget is live immediately — no build required.

Explore

Related integrations

React Component

Install @beforequery/react for a <BeforeQueryChat /> drop-in or the useBeforeQueryChat headless hook for a fully custom UI.

JavaScript SDK

@beforequery/sdk works in Vue, Svelte, React Native, vanilla JS, and Node.js — a single API for search and chat.

MCP Server

An MCP server at api.beforequery.com/mcp, scoped to a knowledge base by its client key, lets any MCP-aware AI tool query your knowledge base as structured tools.

Web Widget — Frequently Asked Questions

Common questions about connecting BeforeQuery to Web Widget.

Public client keys (bq_pk_...) are designed for client-side use and are safe to embed in public-facing pages. They grant read-only access to a specific BeforeQuery knowledge base and cannot be used to modify data. For server-side integrations requiring write access, use the client ID and secret pair (bq_ci_... / bq_cs_...) in your backend only.

Yes. Add widget.beforequery.com to your script-src and connect-src CSP directives. The widget does not require unsafe-inline or unsafe-eval. A complete CSP snippet is available in the BeforeQuery widget documentation.

Yes. The widget is a plain JavaScript script tag loaded from widget.beforequery.com. It works with any technology stack — static HTML, WordPress, Webflow, Docusaurus, GitBook, Next.js, and any other platform that allows custom script injection.

Yes. Pass customization options as data attributes on the script tag — including theme (light or dark), launcher position, placeholder text, and accent color. For deeper customization, add a CSS override block targeting BeforeQuery's published CSS custom properties.

Yes. The hosted widget includes invisible reCAPTCHA that runs transparently for legitimate users. This prevents automated scripts from consuming your question quota. reCAPTCHA can be disabled for authenticated internal surfaces where bot protection is not needed.

Ready to connect Web Widget?

Start free. No credit card required. Connect your first integration in under 5 minutes.

Get started free