Comment ajouter un countdown timer dans Webflow ?
Apprenez à ajouter un countdown timer dans Webflow pour créer de l'urgence sur vos landing pages avec un script JavaScript.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment ajouter un countdown timer dans Webflow pour créer de l'urgence sur vos landing pages.
Exemple
Compte à rebours jusqu'au 31 décembre 2026
🎉 C'est terminé !
| ID Webflow | Élément | Affiche |
|---|---|---|
| countdown-days | Text Block | Jours restants |
| countdown-hours | Text Block | Heures restantes |
| countdown-minutes | Text Block | Minutes restantes |
| countdown-seconds | Text Block | Secondes restantes |
1. Créez les éléments dans Webflow
Créez 4 Text Blocks dans votre page, un pour les jours, les heures, les minutes et les secondes. Attribuez-leur respectivement les IDs : countdown-days, countdown-hours, countdown-minutes, countdown-seconds.
2. Ajoutez ce script dans le <body>
Modifiez la valeur targetDate avec votre date cible au format ISO.
const targetDate = new Date('2025-12-31T23:59:59');
function updateCountdown() {
const now = new Date();
const diff = targetDate - now;
if (diff <= 0) { clearInterval(timer); return; }
document.getElementById('countdown-days').textContent = Math.floor(diff / 86400000);
document.getElementById('countdown-hours').textContent = Math.floor((diff % 86400000) / 3600000);
document.getElementById('countdown-minutes').textContent = Math.floor((diff % 3600000) / 60000);
document.getElementById('countdown-seconds').textContent = Math.floor((diff % 60000) / 1000);
}
updateCountdown();
const timer = setInterval(updateCountdown, 1000);3. Publiez et testez
Le timer se met à jour chaque seconde. Quand la date cible est atteinte, il s'arrête automatiquement. Pensez à ajouter un message de fin (ex : "Offre expirée") en masquant le timer via CSS ou JS.
Conclusion
Un countdown timer crée de l'urgence et augmente les conversions. Cas d'usage :
- Offre promotionnelle à durée limitée
- Lancement de produit
- Inscription à un événement ou webinar
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
