Embed & Developer

Web Widget

Add AI chat to any website with one script tag

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.

Integration

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 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 set it up

In the Kelu dashboard, create a client key (kl_pk_...) for your website under Knowledge Base > Client Keys.

Add the widget script tag to your HTML, passing your knowledge base 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

React Component

Install @kelu/react for a <KeluChat /> drop-in or the useKeluChat headless hook for a fully custom UI.

View details

JavaScript SDK

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

View details

MCP Server

An MCP server at api.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.

View details

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 grant read-only access to a specific Kelu knowledge base and cannot be used to modify data. For server-side integrations requiring write access, use the client ID and secret pair (kl_ci_... / kl_cs_...) in your backend only.

Yes. Add widget.kelu.dev 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 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, 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 Kelu'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