Show unread replies on your site

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#

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

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 (opens another site).

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.