How to Add a Countdown Timer in Webflow

Learn how to add a countdown timer in Webflow to create urgency on your landing pages with a JavaScript script.

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

Countdown to December 31, 2026

—

Days

—

Hours

—

Minutes

—

Seconds

🎉 It’s over!

Webflow ID	Element	Displays
countdown-days	Text Block	Days remaining
countdown-hours	Text Block	Hours remaining
countdown-minutes	Text Block	Minutes remaining
countdown-seconds	Text Block	Seconds remaining

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.

good to know

This countdown uses the visitor’s browser local time. If you need a countdown based on a specific time zone (for example, midnight in Paris), use a library like Day.js with the timezone plugin: dayjs().tz('Europe/Paris').

Conclusion

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

Limited-time promotional offer
Product launch
Event or webinar registration

How to Add a Countdown Timer in Webflow

Example

1. Create the elements in Webflow

2. Add this script in the <body>

3. Publish and test

This countdown uses the visitor’s browser local time. If you need a countdown based on a specific time zone (for example, midnight in Paris), use a library like Day.js with the timezone plugin: dayjs().tz('Europe/Paris').

Conclusion

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

Similar tutorials