Tu veux capter l’attention de tes visiteurs, même lorsqu’ils quittent ton site pour un autre onglet ? Bonne idée.
Changer dynamiquement le texte affiché dans l’onglet du navigateur est une astuce simple et efficace pour susciter la curiosité et encourager le retour sur ton site. Cela fonctionne très bien sur les sites e-commerce pour rappeler à un visiteur distrait qu’un panier l’attend, ou pour renforcer ton message de marque.
👇 Voici comment faire, avec deux versions de code : un message simple ou deux messages qui alternent.
Version 1 : un message statique s’affiche quand l’utilisateur quitte l’onglet
<script>
document.addEventListener("DOMContentLoaded", function () {
let originalTitle = document.title;
window.addEventListener("blur", function () {
document.title = "👀 Où es-tu ?";
});
window.addEventListener("focus", function () {
document.title = originalTitle;
});
});
</script>
Ce que fait ce script :
- Il sauvegarde le titre original de l’onglet (
document.title). - Dès que l’utilisateur quitte l’onglet (événement
blur), il remplace ce titre par le message « 👀 Où es-tu ? ». - Dès qu’il revient sur la page (événement
focus), le titre original revient.
Version 2 : clignotement entre deux messages qui s’affichent quand l’utilisateur quitte l’onglet
<script>
document.addEventListener("DOMContentLoaded", function () {
let originalTitle = document.title;
let blinkInterval;
let messages = ["👀 Où es-tu ?", "🚀 Accélérons ton e-commerce !"];
let i = 0;
window.addEventListener("blur", function () {
blinkInterval = setInterval(() => {
document.title = messages[i % messages.length];
i++;
}, 1000);
});
window.addEventListener("focus", function () {
clearInterval(blinkInterval);
document.title = originalTitle;
});
});
</script>
Effet recherché : le titre alterne toutes les secondes entre deux messages pour créer un effet visuel d’alerte et attirer l’œil.
Où insérer ce code dans WordPress ?
Option 1 : via un plugin
- Installe le plugin Insert Headers and Footers (gratuit).
- Va dans
Réglages > Insert Headers and Footers. - Colle le code dans la section Scripts in Header.
- Clique sur Enregistrer.
Option 2 : manuellement dans le thème
- Va dans
Apparence > Éditeur de fichiers. - Ouvre le fichier
header.php. - Colle le code juste avant la balise
</head>.
Option 3 : manuellement avec le thème Divi
- Connecte-toi à ton tableau de bord WordPress
- Va dans le menu
Divi > Options du thème - Clique sur l’onglet Intégration
- Active « Autoriser l’intégration de code dans le
<head>« si ce n’est pas déjà fait - Ajoute le code au
<head>
Bonus : personnalise ton message pour ton e-commerce
Tu peux bien sûr modifier les messages pour adapter le ton à ta marque :
["🐢 Tu vas rater une promo", "🔥 Ton panier t’attend !"];
Besoin d’aide pour installer ce script ou pour améliorer ton taux de conversion avec des astuces simples ?
Contacte-nous, on adore ce genre de détails qui font la différence !
