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.