Widget theming
Looks like your product.Not like ours.
The widget in the corner of this page is real. Restyle it below, then open it and ask it something.
Panel layouts
Three ways to open
Float it above the launcher, dock it flush to the corner, or run it the full height of the page. On phones it can fill the screen.
Floating
floatingA card above the launcher. The default, and the lightest touch on your page.
Docked
dockedFlush to the bottom corner, square against the edge, so it reads as part of the page.
Full height
sheetA side panel from top to bottom, with room for long answers and help articles.
Anatomy
Every surface is a setting
The widget is drawn from a small set of variables. Hover one to see exactly what it paints.
Tokens · Kuvra Purple
Hi there 👋
Ask us anything, or browse the help center.
Palettes with AI
From your website, in seconds
Paste your URL and Kuvra reads the colours and fonts your site already uses. Or describe the feel you want. Either way you get light and dark, ready to review.
- Fetching the page
- Declared theme-color
- Most frequent colours
- Fonts in use
- Generating light and dark palettes
Light, dark and auto
Both modes, designed
Dark mode isn’t an inverted light mode. Each colour has its own dark value, and auto follows every visitor’s system setting.
- Separate fill, border and launcher colours per mode
- Auto mode follows prefers-color-scheme
- Your site can force a mode, or switch it live
<script src="…/loader.js" data-theme="auto"></script> // or, when your own theme toggles window.KuvraWidget.setTheme('dark')
Hi there 👋
Ask us anything, or browse the help center.
Hi there 👋
Ask us anything, or browse the help center.
Headless
Or skip the widget entirely
Build the interface yourself on the Agent API: a command bar, an in-app assistant, a hint under a form field. Same knowledge base, same answers, same handoff to your team.
Answer
Searching the docs…
API keys
Webhooks
POST /api/v1/agent/answer
/agent/answer
One question, one answer. Nothing stored.
/agent/conversations
Conversations tied to your own user ids.
stream: true
Server-sent events as the answer is written.
/agent/sessions
Short-lived tokens for browsers and apps.
Keys, rate limits and webhooks: the developer docs
The details
Down to the corner radius
The rest of what you can shape, and what ships to your visitors.
Corners
Six presets from sharp to fully rounded, or type any value in px. Cards inside follow the panel.
Hi there 👋
Ask us anything, or browse the help center.
- Gradient fills
- Accent, launcher, panel and footer each take a solid colour or a two-stop gradient with an angle.
- Per-mode colours
- Fill, border, launcher, icon and label each have a light value and a dark value, saved together.
- Your content, your screens
- Suggested prompts on Home, help links, and News cards with cover images, all edited from the dashboard.
- One script tag
- About 41 KB gzipped. A 380 × 680 panel by default, which visitors can expand for longer answers.
Installing it? See the chat widget
Theming questions
Yes. Every colour has a picker with a hex field, set separately for light and dark. The accent, launcher, panel and footer also take gradients.
Still curious? Email hello@kuvra.dev