Lucius Chat Widget

Embeddable chat widget for Lucius AI customer support.

Installation

Option 1: Script Tag (Recommended for most users)

Add this to your HTML:

<script
  src="https://cdn.jsdelivr.net/npm/@lucius-ai/chat-widget/dist/widget.js"
  data-widget-id="YOUR_WIDGET_ID"
></script>

Option 2: npm (For React/Vue/Next.js projects)

npm install @lucius-ai/chat-widget

import { ChatWidget } from "@lucius-ai/chat-widget";

// In your component
<ChatWidget widgetId="YOUR_WIDGET_ID" />

SSR / Next.js compatibility

The widget is hydration-safe out of the box (since 0.0.46). It renders nothing during server-side rendering and on the very first client render, then mounts the real UI in a post-commit effect. You can drop <ChatWidget /> into any Next.js / Remix / Gatsby page without wrapping it in dynamic() or client:only and you will not see a hydration mismatch.

If you are still on 0.0.45 or earlier and cannot upgrade, wrap the import to skip SSR:

// Next.js
import dynamic from "next/dynamic";

const ChatWidget = dynamic(
  () => import("@lucius-ai/chat-widget").then((m) => m.ChatWidget),
  { ssr: false }
);

Version Pinning

CDN (Script Tag)

By default, the CDN URL above loads the latest version. For production stability, pin to a specific version:

<!-- Pin to exact version (recommended for production) -->
<script
  src="https://cdn.jsdelivr.net/npm/@lucius-ai/[email protected]/dist/widget.js"
  data-widget-id="YOUR_WIDGET_ID"
></script>

<!-- Pin to minor version (gets patch updates) -->
<script
  src="https://cdn.jsdelivr.net/npm/@lucius-ai/[email protected]/dist/widget.js"
  data-widget-id="YOUR_WIDGET_ID"
></script>

CDN Cache: jsDelivr caches files for ~24 hours. After a new version is published, it may take up to 24 hours to propagate. To force update, you can:

1. Use the exact version URL
2. Or use https://purge.jsdelivr.net/npm/@lucius-ai/chat-widget@latest/dist/widget.js to purge cache

npm

# Install latest version
npm install @lucius-ai/chat-widget@latest

# Install specific version
npm install @lucius-ai/[email protected]

# Update to latest
npm update @lucius-ai/chat-widget

Check installed version:

npm list @lucius-ai/chat-widget

Configuration

| Attribute | Description | Default | |-----------|-------------|---------| | data-widget-id | Your Lucius widget ID (required) | - | | data-position | Widget position: left or right | right | | data-header-color | Header background color (hex) | #1a1a2e |

Example with all options

<script
  src="https://cdn.jsdelivr.net/npm/@lucius-ai/[email protected]/dist/widget.js"
  data-widget-id="wgt_abc123"
  data-position="left"
  data-header-color="#6366f1"
></script>

Development

# Install dependencies
npm install

# Start dev server
npm run dev

# Build for production
npm run build

# Publish new version
npm version patch  # or minor/major
npm publish

License

MIT