Design

4 views

5 min

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

Good to know

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.

Learn more

4.9/5 • 97 reviews

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

Let's discuss