Web Widget
Add AI chat to any website with one script tag
What is 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.
How BeforeQuery works with Web Widget
Everything you can do once the integration is connected.
Single script tag install
The widget loads from widget.beforequery.com. Add one script tag with your project 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.
How to set it up
In the BeforeQuery dashboard, create a client key (bq_pk_...) for your website under Project > Client Keys.
Add the widget script tag to your HTML, passing your project ID and client key as data attributes.
Customize appearance with additional data attributes or a CSS override. The widget is live immediately — no build required.
Related integrations
Install @beforequery/react for a <BeforeQueryChat /> drop-in or the useBeforeQueryChat headless hook for a fully custom UI.
@beforequery/sdk works in Vue, Svelte, React Native, vanilla JS, and Node.js — a single API for search and chat.
A per-project MCP server at api.beforequery.com/mcp/projects/:projectId lets any MCP-aware AI tool query your knowledge base as structured tools.
Ready to connect Web Widget?
Start free. No credit card required. Connect your first integration in under 5 minutes.