Embeddable JS chat widget for Messenzy (Preact + Vite)
9676bbf09f
- package.json with Preact 10 + Vite 6 + TypeScript 5 - vite.config: IIFE + ESM lib outputs, preact/compat alias, CSS inlined via ?inline import (no separate .css file emitted - single-file IIFE) - tsconfig.json (src/) + tsconfig.node.json (vite.config.ts) - src/index.ts: entry, injects <style>, mounts <Widget /> on script load - src/config.ts: parses data-bot-id + data-api-key + data-server-url - src/vite-env.d.ts: ?inline CSS type declaration - src/storage/visitor.ts: localStorage UUID v4 with in-memory fallback - src/transport/ws-client.ts: WebSocket primary, exponential reconnect (max 5 retries ~30s cap), HTTP polling fallback at /webchat/history every 5s - src/ui/widget.tsx: root Preact component, transport lifecycle, send handler - src/ui/bubble.tsx: floating FAB with chat/close SVG icons, position aware - src/ui/panel.tsx: header + scrollable message list + typing indicator + input - src/ui/message.tsx: single message bubble (user right/bot left), timestamp - src/ui/theme.css: CSS variables (--messenzy-primary/accent overridable) - Build output: dist/messenzy-widget.iife.js 25.3 kB (9.7 kB gz), zero errors - typecheck: clean (strict + exactOptionalPropertyTypes) - .gitignore: node_modules/ dist/ .vite/ .env* .DS_Store - README: integration snippet, script attributes table, theme, build instructions |
||
|---|---|---|
| src | ||
| .gitignore | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| vite.config.ts | ||
messenzy-widget
Embeddable JS chat widget for the Messenzy platform. Preact 10 + Vite 6, outputs a single IIFE (~30-50 KB minified) for direct <script> inclusion.
Integration
<!-- 1. Add a mount point (optional — widget auto-creates one if absent) -->
<div id="messenzy-root"></div>
<!-- 2. Load the widget -->
<script
src="https://messenger-bot.mind4solutions.cloud/widget/messenzy-widget.iife.js"
data-bot-id="YOUR_BOT_ID"
data-api-key="YOUR_API_KEY"
data-position="bottom-right"
></script>
Script attributes
| Attribute | Required | Default | Description |
|---|---|---|---|
data-bot-id |
yes | — | Bot identifier |
data-api-key |
yes | — | Public API key for the bot |
data-server-url |
no | derived from script src origin |
Override API/WS server base URL |
data-position |
no | bottom-right |
bottom-right or bottom-left |
Theme customization
Set CSS variables on :root or any parent element before loading the widget:
:root {
--messenzy-primary: #6366f1; /* bubble + send button color */
--messenzy-accent: #f43f5e; /* unread badge color */
}
Build
npm install
npm run build # outputs dist/messenzy-widget.iife.js + dist/messenzy-widget.js (ESM)
npm run typecheck # no-emit TypeScript check
npm run dev # Vite dev server
Spec
See messenger-bot/docs/superpowers/specs/2026-04-25-sp6-webchat-widget-design.md for the full SP6 webchat widget design specification.