How to Add a Countdown Timer in Webflow

In this tutorial, Sandro, cofounder of the Gemeos Webflow agency, shows you how to add a countdown timer in Webflow to create urgency on your landing pages.

Example

1. Create the elements in Webflow

Create 4 Text Blocks on your page: one for days, hours, minutes, and seconds. Give them these IDs respectively: countdown-days, countdown-hours, countdown-minutes, countdown-seconds.

2. Add this script in the <body>

Update the targetDate value with your target date in ISO format.

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. Publish and test

The timer updates every second. When the target date is reached, it stops automatically. Don’t forget to add an end message (for example: "Offer expired") by hiding the timer with CSS or JS.

Conclusion

A countdown timer creates urgency and boosts conversions. Use cases:

• Limited-time promotional offer
• Product launch
• Event or webinar registration