ReferenceWidgets
Streak widget
A compact streak counter — flame icon, day count, progress toward next milestone.
Mount
<div
data-hatched-widget="streak"
data-hatched-token="SESSION_OR_EMBED_TOKEN"
data-hatched-streak-key="daily_lesson"
></div>Attributes
| Attribute | Values | Default |
|---|---|---|
data-hatched-token | session or embed token | required |
data-hatched-streak-key | streak key as configured | required |
data-hatched-layout | compact full | compact |
data-hatched-show-milestones | true false | true |
Required scopes
buddy:read
Events
el.addEventListener('hatched:streak-milestone', (e) => {
playConfetti(e.detail.milestone);
});Burn animation
When the counter resets (a missed day), the widget plays a short "ember extinguish" animation. This is informational only — the reset already happened server-side.