Chat Widget Demo
This page demonstrates the embeddable Kleif AI chat widget. Click the chat bubble in the bottom-right corner to try it out.
How to Embed
Add a single script tag to your website to embed the Kleif AI chat widget. Replace the data-agent-id with your agent ID.
<script
src="https://www.kleifai.com/widget.js"
data-agent-id="your-agent-id"
data-theme="dark"
></script>Configuration Options
| Attribute | Required | Description |
|---|---|---|
data-agent-id | Yes | Your Kleif AI agent ID |
data-theme | No | "dark" (default) or "light" |
data-api-url | No | Custom API URL (defaults to https://api.kleifai.com) |
data-agent-name | No | Display name shown in the widget header (defaults to "Kleif AI") |
data-agent-avatar | No | URL of the agent avatar image |
Features
- ✓Real-time streaming responses via SSE
- ✓Dark and light theme support
- ✓Session-persistent message history
- ✓Mobile-responsive design
- ✓Shadow DOM isolation (no CSS conflicts)
- ✓Typing indicator animation
- ✓Zero external dependencies
- ✓Lightweight (~5KB gzipped)