Overview ⏰
Add a countdown animation to any Webflow website in seconds and display an element when the time is reached.
Need to count down to something special or highlight a limited-time offer? This easy solution lets you add a countdown to any project with just a few simple attributes.
This guide walks you through adding this feature, or you can use our free Booster app for a one-click integration into your projects. Install the official Boosters App to get started.
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 Webflow Boosters App to install the script and add a demo cookie 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 that will contain your countdown elements like days, hours, and minutes. Select this ▭ 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, like days or hours—it’s your choice. To display a value, add 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. Publish & Test
After completing the steps and adding the script and attributes, publish your page. Then, preview your live staging domain to see 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:
- 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! 🌟
