# Show unread replies on your site

> Put a badge with the number of unread replies on your own Help or Messages link.

The chat bubble shows when a reply is waiting. If you hide the bubble, or your visitors reach the chat from your own **Help** or **Messages** link, show the count there too.

## Add a badge

```html
<a href="/help" data-helpai-open="chats">
  Messages <span id="chat-badge" hidden></span>
</a>

<script>
  document.addEventListener('DOMContentLoaded', async () => {
    const chat = await HelpAI.ready();
    const badge = document.getElementById('chat-badge');
    function show(count) {
      badge.textContent = String(count);
      badge.hidden = count === 0;
    }
    show(chat.state.unread);
    chat.on('unread', show);
  });
</script>
```

With the `<web-ai-chat>` element, replace the `HelpAI.ready()` line with:

```js
await customElements.whenDefined('web-ai-chat');
const chat = document.querySelector('web-ai-chat');
await chat.ready;
```

In React, read `state.unread` from `useHelpAI()`; your component re-renders when it changes.

## What the number counts

- How many of the visitor's conversations have a reply they haven't read. It goes down as they open them.
- The conversation they're reading right now doesn't count.
- It looks at the visitor's 50 most recent conversations.
- It needs a tab with the **Chat** layout on the deployment. See [Add Home, Help and News tabs to the widget](https://support.help.ai/deployments-and-the-widget/set-up-widget-tabs).

`unread` fires only when the count changes. `state` fires on any change.

## When the count is known

The widget doesn't load the visitor's conversations until the chat is opened on the page, so on each new page the count starts at 0. If the chat was left open, or it's an inline chat, the count is known straight away.

From then on it's live for the visitor's current conversation: a reply from your team in **Inbox** raises it straight away, even with the chat closed. Other conversations update when the visitor comes back to your tab.

<Tip>
Style the badge with your site's own CSS. It's your element, outside the widget.
</Tip>