Afficher le nombre de messages non lus

Le nombre de messages non lus compte les réponses des membres que le Contact n’a pas encore vues. Il revient à 0 quand le Contact ouvre le chat. Mettez-le sur votre bouton d’aide pour qu’il voie qu’une réponse l’attend.

Dans l’onglet du navigateur

Tant que le Contact a des réponses à lire, le titre de votre onglet commence par leur nombre, « (2) Kibo Market », et son icône prend un point rouge. Il le voit depuis n’importe quel autre onglet. C’est actif sans rien ajouter ; tabAlert: false le désactive.

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

Sur votre bouton d’aide

// Le nombre actuelconst count = window.zean.getUnreadCount();// Appelée à chaque changement ; stop() arrête l’écouteconst stop = window.zean.onUnreadChange(count => {  document.querySelector("#help-badge").textContent = count > 0 ? String(count) : "";});

Bon à savoir

• Avec React, React Native et Vue, le composant se met à jour seul à chaque changement.
• Avec Vue, unreadCount est une ref en lecture seule : lisez unreadCount.value dans le script, unreadCount dans le template.
• Sur le serveur et avant le chargement du chat, le nombre vaut 0 : une page rendue côté serveur s’hydrate sans écart.
• Sur un site, window.zean.getUnreadCount() et window.zean.onUnreadChange() existent une fois le chat chargé.
• L’alerte d’onglet redessine l’icône de votre page : elle doit être sur votre propre domaine, ou sur un domaine qui l’autorise. Sinon, seul le titre affiche le nombre, et la console dit pourquoi.
• React Native n’a pas d’alerte d’onglet : une appli n’a pas d’onglet.