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

—

Jours

—

Heures

—

Minutes

—

Secondes

🎉 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('2026-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.

bon à savoir

Ce countdown utilise l'heure locale du navigateur du visiteur. Si vous avez besoin d'un countdown basé sur un fuseau horaire précis (ex: minuit heure de Paris), utilisez une librairie comme Day.js avec le plugin timezone : dayjs().tz('Europe/Paris').

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

Comment ajouter un countdown timer dans Webflow ?

Exemple

1. Créez les éléments dans Webflow

2. Ajoutez ce script dans le <body>

3. Publiez et testez

Ce countdown utilise l'heure locale du navigateur du visiteur. Si vous avez besoin d'un countdown basé sur un fuseau horaire précis (ex: minuit heure de Paris), utilisez une librairie comme Day.js avec le plugin timezone : dayjs().tz('Europe/Paris').

Conclusion

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

tutoriels similaires