Embeddable widget

Add a chat widget to any website with a single script tag. The widget connects to your Klisk production server.

Basic usage

<script src="https://your-url/widget.js"></script>

This adds a floating chat button in the bottom-right corner of the page.

Customization

Use data-* attributes on the script tag to customize the widget:

<script
  src="https://your-url/widget.js"
  data-position="bottom-right"
  data-color="#2563eb"
  data-width="380px"
  data-height="560px"
  data-key="your-api-key"
></script>

Options

Attribute	Default	Description
data-position	"bottom-right"	Widget position: "bottom-right" or "bottom-left"
data-color	"#2563eb"	Button and header color (any CSS color)
data-width	"380px"	Chat panel width
data-height	"560px"	Chat panel height
data-key	—	API key for authentication (see authentication)

Examples

Bottom-left with custom color

<script
  src="https://your-url/widget.js"
  data-position="bottom-left"
  data-color="#10b981"
></script>

Larger panel with authentication

<script
  src="https://your-url/widget.js"
  data-width="450px"
  data-height="700px"
  data-key="your-widget-key"
></script>

Full-page embed

If you want the chat to take the full page instead of a floating widget, use embed mode on the chat UI directly:

<iframe
  src="https://your-url/?embed=1"
  style="width: 100%; height: 100vh; border: none;"
></iframe>

Features

The widget includes the same features as the built-in chat UI:

• Markdown rendering
• Tool call display
• Thinking traces
• File attachments (images & PDFs)
• Dark/light theme based on host page