🤖 Onyx Chat Widget - Onyx

Embeddable AI-powered chat for your website

Development Environment

This page demonstrates the Onyx Chat Widget in development mode. The widget is loaded from src/index.ts via Vite with hot module replacement.

Configuration: Widget settings are loaded from the .env file. Create one from .env.example to configure backend URL, API key, and other options.

Real-time streaming responses via SSE
Markdown rendering for rich content
Session persistence across page reloads
Shadow DOM isolation (no style conflicts)
Responsive design (desktop & mobile)
Two display modes: Launcher & Inline

Launcher Mode

Floating Chat Button

Look at the bottom-right corner of this page! A floating chat button will appear there. Click it to open the chat popup. This is the default mode for most website integrations.

<onyx-chat-widget mode="launcher"></onyx-chat-widget>

Desktop View

Opens as a 400×600px popup above the button

Mobile View

Expands to full-screen overlay (<768px)

Compact Mode

Compact Inline (No Messages)

When using inline mode without any messages, the widget displays in a compact form - just a search-like input bar. Once you send a message, it expands to show the full chat interface.

<onyx-chat-widget mode="inline"></onyx-chat-widget>

Configuration Options

The widget can be customized via HTML attributes or environment variables (for self-hosted builds). Below are some common configuration examples:

Basic Setup

<onyx-chat-widget backend-url="https://api.onyx.app" api-key="your_api_key_here"> </onyx-chat-widget>

Custom Branding

<onyx-chat-widget backend-url="https://api.onyx.app" api-key="your_api_key_here" agent-id="42" agent-name="Support Bot" logo="https://yoursite.com/logo.png" primary-color="#FF6B35" background-color="#FFFFFF" text-color="#1A1A1A"> </onyx-chat-widget>

Note: For cloud deployments, configuration must be provided via HTML attributes. For self-hosted builds, you can bake configuration into the bundle using environment variables.