Streak widget
A compact streak counter with milestones and current progress.
Mount
<script
src="https://cdn.hatched.live/widget.js"
data-embed-token="EMBED_OR_SESSION_TOKEN"
defer
></script>
<div data-hatched-mount="streak" data-streak-key="daily_lesson"></div>The loader mounts every data-hatched-mount="streak" element, so one page can
render multiple streaks.
Copy the data-streak-key value from the streak definition in Dashboard →
Streaks.
Display modes
A streak definition picks one of three render modes (Dashboard → Streaks → Display mode):
| Mode | What it renders |
|---|---|
count | A hero icon plus a large N × counter and a status sub-line. The default. |
row | N icons in a row (up to max_row_icons), then a +overflow chip and sub-line. |
mini | A bare inline 🔥 N chip — no label, sub-line, or attribution. Built to sit inside a host navbar or menu item. |
A single mount can override the definition's mode with data-display-mode,
so the same streak can render count on a dashboard page and mini in the
top nav without a second definition:
<nav>
<!-- … -->
<span data-hatched-mount="streak" data-streak-key="daily_lesson" data-display-mode="mini"></span>
</nav>The mini chip renders at the widget's base type scale (~14px); set
font-size on the mount element to resize the whole chip. The flame tints
to the widget accent only while the streak is active for the current period —
otherwise it stays muted.
Mount attributes
| Attribute | Values | Default |
|---|---|---|
data-streak-key | streak definition key | required |
data-display-mode | count · row · mini | the definition's mode |
Required scopes
read