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.
Mount the component
<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:
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) : "";
},
});