# 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.