Je travaille actuellement sur le site web de mon entreprise et je souhaite mettre en place une fonctionnalité qui permettrait d’afficher une notification dans le titre de l’onglet du navigateur. L’objectif est d’attirer l’attention de l’utilisateur lorsqu’il navigue sur d’autres onglets. Cette stratégie pourrait nous aider à augmenter le taux d’engagement sur notre site.
Je cherche donc une solution pour mettre en œuvre cette fonctionnalité. Est-ce que quelqu’un a déjà travaillé sur quelque chose de similaire ou pourrait me guider sur la meilleure façon de le faire ? Merci d’avance pour votre aide.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Notification dans le titre de l'onglet</title>
<style>
/* Ajoutez ici vos styles CSS si nécessaire */
</style>
<script>
// Variable pour stocker l'intervalle de notification
let interval;
// Fonction pour changer le titre de l'onglet
function notifyTab(title, timeout) {
const originalTitle = document.title; // Sauvegarde du titre original
let isOriginalTitle = true;
// Change le titre toutes les 'timeout' millisecondes
interval = setInterval(function() {
document.title = isOriginalTitle ? title : originalTitle;
isOriginalTitle = !isOriginalTitle;
}, timeout);
// Écouteur pour rétablir le titre original quand l'utilisateur revient sur l'onglet
window.addEventListener('focus', function() {
clearInterval(interval);
document.title = originalTitle;
});
}
// Utilisation de la fonction
// Appelez cette fonction pour démarrer la notification dans le titre
// par exemple : notifyTab('🔔 Nouveau message !', 2000);
</script>
</head>
<body>
<!-- Votre contenu HTML ici -->
<script>
// Démarrer la notification après que la page ait été chargée
window.onload = function() {
// Commencer la notification après un certain délai ou en fonction d'un événement
setTimeout(function() {
notifyTab('🔔 Vous avez une notification !', 1000);
}, 5000); // Commence après 5 secondes
};
// Arrêter la notification lorsque l'utilisateur revient sur la page
window.addEventListener('focus', function() {
clearInterval(interval);
});
</script>
</body>
</html>
Ce script HTML complet inclut une fonction JavaScript (notifyTab) qui modifie le titre de l’onglet pour y afficher une notification. Le titre de l’onglet alterne entre le message de notification et le titre original toutes les secondes (ou toute autre durée que vous spécifiez). Lorsque l’utilisateur clique sur l’onglet, le titre revient à son état original. Pour déclencher la notification, appelez la fonction notifyTab avec le message et l’intervalle souhaités.