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)
9 Commits 2 Branches 0 Tags 88 KiB
TypeScript 73.3%
CSS 26.7%
feat/widget-shadow-dom-mount
Go to file
Serge RAKOTO HARRY-NAIVO 1b94469a60 refactor(index): wire boot() to mountWidget for classic + shadow modes 
The IIFE that injected styles into document.head unconditionally is gone.
boot() now reads config.shadow, derives the mount mode, and lets
mountWidget handle DOM topology while a small helper keeps light-DOM
style injection idempotent for the classic path.

Behaviour unchanged for any embed without data-shadow="true": styles still
land in document.head, render still targets #messenzy-root in light DOM.
With data-shadow="true", the shadow path is exercised end-to-end.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-27 19:55:58 +02:00
src refactor(index): wire boot() to mountWidget for classic + shadow modes 2026-04-27 19:55:58 +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.