Comment ajouter un countdown timer dans Webflow ?

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

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