How to add a Countdown Timer in Webflow

Add a Countdown Timer to your Webflow page in seconds with this simple guide.

June 17, 2025

Min Read

Tom B

Founder

@flowbase

Overview

Add a countdown animation to any Webflow website in seconds and display an element when the time is reached.

Whether you're counting down to a special event or highlighting a limited-time offer, this simple solution lets you integrate a countdown with just a few quick attributes. You can also choose to display an element, like a message, once the countdown reaches zero.

Instructions ✍️

1. Add the custom code to your page.

Copy the script and paste it into the <head> section of your custom code settings. If you prefer a quicker setup, you can use our free Webflow Boosters App to install the script and add a demo component to your project instantly.

<!-- Flowbase Booster [Countdown] -->
<script src="https://cdn.jsdelivr.net/npm/@flowbase-co/boosters-countdown@2.0.0/dist/countdown.min.js" type="text/javascript"></script>

2. Add the countdown wrapper

Add a ▭ div-block to your page to contain your countdown elements—days, hours, and minutes. We'll refer to this element as the 'Countdown Wrapper.' Once it's created, select the ▭ div-block and add the following attributes:

Add the attribute Name: fb-countdown and Value: true.
Add the attribute Name: fb-countdown-target and Value: 2024-03-23T11:01:00.000Z. This is value should be a UTC to the target date

You can get your UTC time here or use our app to generate it directly in the UI.

3. Add attributes to the countdown counters

Add any text-element for the parts you want to display, such as days or hours—it's up to you. Place these elements inside the Countdown Wrapper we created in the previous step. To display a value, assign the type attribute as follows:

Add the attribute Name: fb-countdown-type and Value: days. This value can be adjusted to display weeks, days, hours, minutes, seconds.

4. Display an element at the end (Optional)

As an option, you can set an element to display once the countdown ends. This is useful for showing a message like "Sorry, our sale has ended" or any other details related to the countdown.

To display this element when the countdown reaches zero, follow these steps:

Add a div-block and name it something like 'Countdown Finished'.
Set the element to display: none.
Once the countdown ends, this element will automatically switch to display: block and become visible to your customers.

To enable this behavior, add the following attribute:

Add the attribute Name: fb-countdown-finsh and Value: true

5. Publish & Test

Once you've completed all the steps and added the necessary script and attributes, publish your page. Preview your live staging domain to ensure the booster is working as expected.