Webflow Attribute Booster

Webflow Countdown Booster

Countdown to a target date over weeks, days, hours, minutes or seconds. Simply set the target UTC date and add the component.

Getting Started 🫧

Countdown to any time and date with this free UTC countdown booster

Create excitement with the Countdown Webflow Booster. Add a countdown to your events, launches, or promotions to build urgency and anticipation, displaying time in weeks, hours, minutes, and seconds. Set your local time, and it will automatically format globally using UTC (Universal Time Coordinated).

This Booster can be added directly into your Webflow projects with our free Webflow App. You can install the official Boosters App. The Boosters app will add all the attributes and elements you need directly in your Webflow project.

Install Instructions ✍️

1. Add the booster script to your project

Copy the script source listed below, and add it to the <head> tag of your custom code settings. If you aren't sure about custom code in Webflow, you can click here to learn more.

<!-- Flowbase Booster [Countdown] -->
<script src="https://cdn.jsdelivr.net/npm/@flowbase-co/[email protected]/dist/countdown.min.js" type="text/javascript"></script>
2. Add the attributes

For this Booster, attributes should be added to a few different elements to create the countdown. If you are using the official app you can paste the example component directly into your designer with all the attributes attached.

3. Add attributes to the main countdown wrapper

Add the following attributes to the main element that wraps your countdown. This is the primary element where we will attach out desired target date (in UTC).

4. Add attributes to the date elements

Add the following attribute to each of the date elements you want to display. For example: Days, Hours, Minutes etc. Simply add the fb-countdown-type and then specify the date type as shown below.

5. Add attributes to the end display element (optional)

If you want to show something when the date is reached, you can simply add the finish attribute to your selected element. Set the attribute Name to fb-countdown-finish and the Value to true. This is perfect for something like "This sale has ended" and it will only display once the countdown has been reached.

6. Here is the full list of attributes you may use:
Attribute Name Attribute Value Description
fb-countdown true or false The primary attribute, and an on/off toggle
fb-countdown-target eg. 2024-03-23T11:01:00.000Z Specify the countdown date and time with UTC
fb-countdown-finish true or fale This element will show at the end of the countdown
fb-countdown-type weeks, days, hours, minutes, seconds Specify the type you want to display on that element

7. Publish & Test 🚀

Once you've followed the steps above and have added both the script and the attributes, you can publish your page. View your live staging domain to test the booster in action.

Did you find this helpful? 💕

Your support means the world to us! In just 10 seconds, you can make a big difference:

Thank you for being awesome! 🌟

Boosters App

Add this booster + more with the official webflow application.

Install Booster Application
*Official Webflow booster application