Embeddable JS chat widget for Messenzy (Preact + Vite)
c241b3e100
Match the bot-side hardening
(serge/messenger-bot feat/webchat-auth-hardening): credentials no longer
leak via URL query strings.
* WebSocket handshake uses Sec-WebSocket-Protocol subprotocols
(messenzy.v1, messenzy-bot.<id>, messenzy-visitor.<id>,
messenzy-key.<key>) — the browser WebSocket ctor doesn't accept
custom headers, so subprotocols are the standard pattern.
* HTTP fallback (/webchat/msg, /webchat/history) uses
`Authorization: Bearer <apiKey>` — fetch supports custom headers.
* botId/visitorId stay in body/query as public identifiers; only the
apiKey moves off the URL.
No public API change — `createTransport(opts)` takes the same
TransportOpts as before.
|
||
|---|---|---|
| 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.