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>
<!-- Automatically compact when no messages -->
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.