# Unread Count Component
URL: /docs/embeddable/unread-count
LLM index: /llms.txt
Description: Embed a live unread conversation count badge that updates in real time as new messages arrive.

# Unread Count Component

The Unread Count component renders a badge showing the number of unread conversations for the current End User. Use it in navigation elements, icon buttons, or any element where you want to surface unread state.

![Unread Count badge rendered next to a navigation icon, showing a numeric unread total](/images/unread-count-hero.jpg)

## Mount the component

```html
<script src="https://embed.surge.app/v1/embed.js"></script>
<span id="surge-unread"></span>
<script>
  SurgeEmbed.mount("unread-count", {
    target: document.getElementById("surge-unread"),
    token: "YOUR_USER_JWT",
  });
</script>
```

The component updates in real time when new messages arrive.

## Options

| Option | Type | Required | Default | Description |
|---|---|---|---|---|
| `target` | `HTMLElement` | Yes |  | The DOM element to mount the badge into |
| `token` | `string` | Yes |  | A signed JWT for the current End User |
| `onChange` | `function` | No |  | Callback when the unread count changes; receives the new count as a number |
| `hideWhenZero` | `boolean` | No | `true` | Hide the badge when count is zero |
| `theme` | `object` | No |  | Custom color and font overrides |

## Reading the count in your own code

If you want to render the count yourself instead of using the component:

```javascript
const badge = SurgeEmbed.mount("unread-count", {
  target: document.getElementById("surge-unread"),
  token: "YOUR_USER_JWT",
  onChange: (count) => {
    // Update your own UI element
    document.getElementById("my-badge").textContent = count > 0 ? String(count) : "";
  },
});
```