Show the unread count

The unread count counts the Members’ replies the Contact has not seen yet. It goes back to 0 when the Contact opens the chat. Put it on your help button so they see a reply is waiting.

In the browser tab

While the Contact has replies to read, your tab’s title starts with their count, “(2) Kibo Market”, and its icon gets a red dot. They see it from any other tab. It is on with nothing to add; tabAlert: false turns it off.

<script>  window.zean = { appKey: "app_your_app_key", tabAlert: false };</script><script async src="https://widget.zean.chat/loader.js"></script>

On your help button

// The current countconst count = window.zean.getUnreadCount();// Called on every change; stop() stops listeningconst stop = window.zean.onUnreadChange(count => {  document.querySelector("#help-badge").textContent = count > 0 ? String(count) : "";});

Good to know

• With React, React Native and Vue, the component updates by itself on every change.
• With Vue, unreadCount is a read-only ref: read unreadCount.value in the script, unreadCount in the template.
• On the server and before the chat has loaded, the count is 0: a server-rendered page hydrates the same.
• On a website, window.zean.getUnreadCount() and window.zean.onUnreadChange() exist once the chat has loaded.
• The Tab alert redraws your page’s icon: it must be on your own domain, or on one that allows it. Otherwise only the title shows the count, and the console says why.
• React Native has no Tab alert: an app has no tab.