# Streak widget

> A compact streak counter with milestones and current progress.

Source: https://docs.hatched.live/docs/reference/widgets/streak

## Mount

```html
<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:

```html
<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`