Widgets
Embeddable widgets. One loader. One line.
Each Hatched widget is a Shadow-DOM-isolated Preact component that hydrates from a shared store. Drop a div, pass a token, the right widget renders. Theming via CSS variables, no iframe, no rebuild.
What ships with this
14 production widgets
Buddy, marketplace, badges, streak, path, tokens, leaderboard, kudos, group quest, feed, mystery box, league, council, and the Hexad survey — every surface is a drop-in mount.
Shadow DOM isolation
No style leak in or out. The host app and the widget never fight over the cascade.
Shared workspace store
Every widget reads the same authoritative state. A coin spent in marketplace updates the buddy widget instantly.
Theme via CSS variables
Override `--hw-color-primary`, `--hw-radius`, etc. from the host. No rebuild, no SDK swap.
Smart-poll + BroadcastChannel
ETag-backed long-poll with visibility pause; cross-tab state sync via per-token channel.
A11y baked in
Every widget ships with keyboard nav, ARIA roles, prefers-reduced-motion fallbacks, and contrast-tested defaults.
Localised at the edge
i18n strings live on the widget. Tenants override per-locale from the dashboard.
One div per widget
Load the runtime once, then pick each surface with `data-hatched-mount`. Read-only widgets run on a `data-embed-token`; write-capable ones use a server-minted `data-session-token`.
<!-- Load the runtime once, before your mount points. -->
<script src="https://cdn.hatched.live/widget.js" data-embed-token="EMBED_TOKEN" defer></script>
<!-- One div per widget — read-only surfaces run on the embed token above. -->
<div data-hatched-mount="buddy"></div>
<div data-hatched-mount="leaderboard"></div>
<div data-hatched-mount="league"></div>
<!-- Write-capable widgets (marketplace, kudos, group-quest, mystery-box)
swap the embed token for a server-minted session token. -->
<script src="https://cdn.hatched.live/widget.js" data-session-token="SESSION_TOKEN" defer></script>
<div data-hatched-mount="marketplace"></div>