What is Web Widget?
The Kelu 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 Kelu works with Web Widget
Everything you can do once the integration is connected.
Single script tag install
The widget loads from widget.kelu.dev. Add one script tag with your widget ID and client key — the chat launcher appears immediately. No build step required.
Full theme customization
Set colors, fonts, position, and launcher image with data attributes, including per-component styles. The widget uses the system font unless you set one.
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 sends an invisible reCAPTCHA token when your deployment requires one, to prevent automated scripts from consuming your question quota. Server-side calls with a client ID and secret skip it.
How to set it up
- 1
In the Kelu dashboard, open your widget under Integrations > Website widget. Kelu makes one, named after your knowledge base, when you create the knowledge base.
- 2
On its Install tab, pick where your site is built and copy the script tag. It carries your widget ID and a public client key (kl_pk_...). Add it to your HTML.
- 3
Change colors and text in the widget's settings: they reach your site on the next page load, with no change to the tag. Data attributes on the tag, including per-component styles, override them.
Related integrations
React Component
Install @keluhq/react from npm. Drop in the <KeluChat /> panel, or build your own UI with the useKeluChat hook.
JavaScript SDK
Install @keluhq/sdk from npm for chat, search, and feedback in browsers, React Native, and Node.js 18 or later.
MCP Server
An MCP server at app.kelu.dev/mcp, scoped to a knowledge base by its client key, lets any MCP-aware AI tool query your knowledge base as structured tools.
Got questions?
Web Widget — Frequently Asked Questions
Common questions about connecting Kelu to Web Widget.
Public client keys (kl_pk_...) are designed for client-side use and are safe to embed in public-facing pages. They work for one Kelu knowledge base only and can be limited to your site's origins. For server-side integrations, use the client ID and secret pair (kl_ci_... / kl_cs_...) in your backend only.
Yes. Add widget.kelu.dev to script-src, app.kelu.dev (https and wss) to connect-src, and 'unsafe-inline' to style-src. Where your deployment requires reCAPTCHA, allow Google's reCAPTCHA hosts too. The complete list is in the Kelu widget documentation.
Yes. The widget is a plain JavaScript script tag loaded from widget.kelu.dev. It works with any technology stack — static HTML, WordPress, Webflow, Docusaurus, 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, style any single part of the widget with per-component data-* attributes.
Yes. When your deployment requires reCAPTCHA, the hosted widget sends an invisible reCAPTCHA v3 token that runs transparently for legitimate users. This prevents automated scripts from consuming your question quota. Server-side calls with a client ID and secret pair skip the check.