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
52 lines
1.5 KiB
Markdown
52 lines
1.5 KiB
Markdown
# 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
|
|
|
|
```html
|
|
<!-- 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:
|
|
|
|
```css
|
|
:root {
|
|
--messenzy-primary: #6366f1; /* bubble + send button color */
|
|
--messenzy-accent: #f43f5e; /* unread badge color */
|
|
}
|
|
```
|
|
|
|
## Build
|
|
|
|
```bash
|
|
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.
|