serge/messenzy-widget
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Embeddable JS chat widget for Messenzy (Preact + Vite)
8 Commits 2 Branches 0 Tags 88 KiB
TypeScript 73.3%
CSS 26.7%
f74ff56fc4
Go to file
Serge RAKOTO HARRY-NAIVO f74ff56fc4 feat(mount): extract mountWidget + applyStyles helpers with shadow support 
mountWidget centralizes both classic and shadow mounting behind a single
entry point. The shadow path attaches an open shadow root, injects CSS via
constructable stylesheets (with a deduped <style>-tag fallback for jsdom
and Safari < 16.4), and renders Preact into a stable inner wrapper so the
sibling style node is not clobbered by render() diffs.

applyStyles is exported separately so the fallback branch can be exercised
directly in unit tests without a full mount round trip — the constructable
path runs only in real browsers.

Idempotency on the host element and shadow root means repeated boots
(HMR, accidental double-load) do not duplicate DOM nodes.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-27 19:55:02 +02:00
src feat(mount): extract mountWidget + applyStyles helpers with shadow support 2026-04-27 19:55:02 +02:00
tests feat(mount): extract mountWidget + applyStyles helpers with shadow support 2026-04-27 19:55:02 +02:00
.gitignore feat(widget): SP6 PR S6-1+2 - messenzy-widget repo scaffolding (Preact + Vite) 2026-04-26 00:10:12 +02:00
package-lock.json chore(test): bootstrap vitest + jsdom test infrastructure 2026-04-27 19:50:45 +02:00
package.json chore(test): bootstrap vitest + jsdom test infrastructure 2026-04-27 19:50:45 +02:00
README.md feat(widget): SP6 PR S6-1+2 - messenzy-widget repo scaffolding (Preact + Vite) 2026-04-26 00:10:12 +02:00
tsconfig.json feat(widget): SP6 PR S6-1+2 - messenzy-widget repo scaffolding (Preact + Vite) 2026-04-26 00:10:12 +02:00
tsconfig.node.json feat(widget): SP6 PR S6-1+2 - messenzy-widget repo scaffolding (Preact + Vite) 2026-04-26 00:10:12 +02:00
vite.config.ts feat(widget): SP6 PR S6-1+2 - messenzy-widget repo scaffolding (Preact + Vite) 2026-04-26 00:10:12 +02:00
vitest.config.ts chore(test): bootstrap vitest + jsdom test infrastructure 2026-04-27 19:50:45 +02:00

README.md

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.