Countdown [+ only]
A simple countdown timer.
Note: This module is only available in Framework+, a paid version of Framework.
View a live demo of this module.
Content
- Include a heading
- Set timer target time
- Set an action to occur when the timer is complete (none, redirect, show text)
- Set the smallest unit of time that should be displayed (days, hours, minutes, seconds)
- Edit labels for units of time in the countdown
Styles
- Set Dark Mode
- Adjust countdown timer number sizes
- Change heading text alignment
Usage Guide
The Countdown module is perfect for creating urgency around product launches, event registrations, sales deadlines, or software release dates—making it particularly valuable for SaaS and technology companies using the Framework theme. You can drag this module onto any page template in your HubSpot page editor to immediately add time-sensitive engagement to your content.
When setting up your countdown timer, consider your audience’s time zone and clearly communicate the target date in your accompanying text. The module automatically calculates the remaining time based on your specified target, so visitors see accurate countdowns regardless of when they visit your page. For maximum impact, pair the countdown with a clear call-to-action button or form module positioned directly below it.
Strategic placement recommendations: Landing pages work exceptionally well for product launch countdowns, while website pages can showcase upcoming webinars or feature releases. The countdown module integrates seamlessly with Framework’s other modules, so you can build complete conversion-focused page sections by combining it with hero text, buttons, and form modules.
The redirect action option becomes particularly powerful for post-countdown engagement—you can automatically send visitors to a product page once a launch timer expires, or redirect to a thank-you page after an event concludes. Alternatively, use the “show text” action to display a message like “Registration is now open!” when the countdown reaches zero.
For optimal visual hierarchy, adjust the number sizes to complement your page’s other text elements. The dark mode option ensures your countdown maintains readability across different page backgrounds, while the text alignment controls help you create balanced layouts when combining multiple modules in the same page section.