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-countdownand Value:true. - Add the attribute Name:
fb-countdown-targetand 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-typeand 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-blockand name it something like 'Countdown Finished'. - Set the element to
display: none. - Once the countdown ends, this element will automatically switch to
display: blockand become visible to your customers.
To enable this behavior, add the following attribute:
- Add the attribute Name:
fb-countdown-finshand 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.
Did you find this helpful? 💕
Your support means the world to us! In just 10 seconds, you can make a big difference:
- Leave a like on our Free Webflow Booster App.
- Share what you built with us on Twitter! We re-post to thousands!
Thank you for being awesome! 🌟
