Webflow Countdown Timer Widget: Count Down to Launch Day on Your Webflow Site

Use the builder below to create a free countdown timer for your Webflow website. Pick a template, set your date and click “Continue with this template“.

Webflow landing pages are often built around one moment: a product launch, a webinar, a conference, a waitlist opening. A countdown in the hero shows exactly how long is left. Coding one yourself means writing and testing JavaScript; this builder gives you a styled timer with an end action and a button, ready to drop into a Code Embed element. Match the font and size in the builder, and use custom CSS when you need it to sit perfectly in your design.

How to add a Countdown Timer widget to Webflow

1. Create your widget

  1. Choose a template: Launch Countdown and Event Start Countdown suit launches and events; Countdown timer is a clean starting point for a minimal design.
  2. Set the timer: pick the start-to-finish timer and enter the start time, end time and time zone of your launch or event. For an offer that starts on each visitor’s first visit, pick the remaining-time counter.
  3. Choose the position: “Install To Required Position” places the timer exactly where your Code Embed sits. The banner positions pin it to the top or bottom of the page.
  4. Plan the end of the countdown: hide the timer, show a message, or redirect visitors to a URL, such as your new product page. Add a call-to-action button like “Join the waitlist”.
  5. Style and save: choose a clock type, animation, font and size, then click “Add to website for free“, sign up and copy your embed code.
Countdown Timer widget builder with sale and event countdown templates

2. Add it to your Webflow site

  1. Open the page in the Webflow Designer.
  2. Open the Add panel and drag a Code Embed element where the timer should appear, for example inside the hero section under the headline.
  3. Paste the countdown code into the editor and click Save & Close.
  4. Don’t worry if the element looks empty on the canvas. Scripts don’t render inside the Designer, so open Preview to see the timer.
  5. Publish the site and check the countdown on the live page, on a computer and on your phone.

Where to put the Countdown Timer widget on your Webflow site

  • In the hero of a launch page, between the headline and the sign-up button.
  • On a webinar or event page, counting down to the start time, with a button to register.
  • On a coming-soon or waitlist page, with the redirect action set to send visitors to the live page the moment you launch.
  • On a pricing page during a launch discount, near the plan the offer applies to.

Do you need a paid Webflow plan?

Yes. Webflow’s Code Embed element and custom code require a paid site plan or workspace plan, so check your plan before you build the timer into a page. The widget’s own free plan covers one widget with up to 200 views a month on unlimited websites, with a small Elfsight link; paid widget plans start at $5 a month, billed yearly.

To show a countdown bar on every page, choose one of the banner positions and paste the code into Site settings › Custom code › Footer code instead of a Code Embed. It loads on every page after you publish and has the same plan requirement.

Countdown Timer widget features

  • Templates such as Countdown timer, Launch Countdown, Event Start Countdown and Special Offer Banner.
  • Three countdown types: start-to-finish dates with a time zone, a per-visitor timer, or a number counter.
  • Four positions: inline, static top banner, floating top banner and floating bottom banner.
  • End actions: hide the timer, show a message or redirect to a URL, plus an optional call-to-action button.
  • Design controls: clock types, holiday themes, animation, font and size, with custom CSS and JavaScript for anything else.

Frequently asked questions

Which Webflow plan do I need for the countdown timer?

A paid site plan or workspace plan. Webflow only allows the Code Embed element and custom code on paid plans.

Why can’t I see the countdown in the Webflow Designer?

Webflow doesn’t run scripts on the Designer canvas, so the Code Embed looks empty while you design. Open Preview or publish the site to see the timer working.

Can the countdown send visitors to my launch page when it ends?

Yes. Set the end action to redirect to a URL and enter the address of your live page. When the timer reaches zero, visitors on the page are sent there.

Can I add the countdown to every page of my Webflow site?

Yes. Use a top or bottom banner position and paste the code into Site settings › Custom code › Footer code, then publish.

Can I change the launch date after publishing?

Yes. Edit the widget in your Elfsight dashboard and save. Your Webflow site picks up the change on its own, with no need to republish.

More Webflow widgets

Scroll to Top