Thank you for choosing to purchase this module!
After you've purchased and installed the module, it will automatically be added to your HubSpot account.
You should be able see it under the Settings > Marketplace Downloads
Overview
The Countdown Timer Module lets you add a customizable countdown to any page or section. Use it to highlight limited-time offers, upcoming events, product launches, or anywhere you want to create a sense of urgency.
For ease of reading, we've organized this documentation into multiple sections,
- Installation
- Content options
- Design and styling
- Advanced features
- FAQ
Let's explore each of them individually.
1. Installation
Open any page where you like to display the Countdown Timer module.
On the left panel, search the 'Countdown' module and simply drag and drop it onto the page.
Check out this quick video yo see how it works
Great, you've just added the module, now let's personalize it.
2. Content options
➤ Set your deadline with Date and Time
- Click on the timer to open its settings.
- Choose your end date and time.
- Hit Apply Changes button and you're good to go!
➤ Option to add main title, subtitle and description
You can choose to display a main title, subtitle, and description above your countdown.
These options are turned off by default to keep the timer clean and simple, but you can enable any of them individually whenever you want to add more context or messaging.
You can event choose a heading type for the main title.
➤ Label Placement Option
You can choose to display the time unit labels (days, hours, minutes, seconds) outside the countdown box for a different look. This option is off by default, but you can turn it on whenever you want the labels to appear separately.
Here’s how it looks with the labels pulled out:
3. Design and styling
You’ve got options. Go big and bold or keep it small and subtle, whatever fits your vibe. Switch up the colors with presets or pick your own, and decide if you want a clean look or an outlined style. Mix and match however you like.
There’s a ton of ways to make your countdown feel right at home on any page.
➤ Select Style
Choose from a set of ready-made color options, or add your own custom colors to match your brand.
➤ Select Counter Size
The counter module comes in two sizes. Use regular when you want the timer to be the center of attention and small when you want the countdown to complement, not compete with, your main message.
➤ Select Alignment option
You can align the countdown timer to the left, center, or right within its container, giving you control over its placement on the page.
➤ Pre-existing color options
Pick from a curated palette of colors designed to look great out of the box. Perfect if you want a quick, polished look without extra setup.
➤ Control Counter Fonts
➤ Label Style
Choose between uppercase and regular case for your countdown labels (Days, Hours, Minutes, Seconds) to match your preferred design.
➤ Control additional text's colors
Easily set custom colors for your heading, subtitle, and description to match your page style.
4. Advanced Features
➤ Disable module jQuery
If your site already loads jQuery or you prefer not to use it, you can disable the module’s built-in jQuery with a single click.
5. Frequently Asked Questions
Q: Can I use multiple timers on one page?
A: No, the module currently supports only one countdown timer per page. This helps ensure smooth performance and avoids any conflicts or display issues. If you need to highlight multiple deadlines, consider using separate pages or sections for each timer.
Q: What happens when the countdown ends?
A: When the countdown reaches zero, it clearly signals that the event or offer has ended. You can choose what happens next: keep the timer at zero, hide it, show a custom message, or automatically redirect visitors to another page.
Q: Is the timer mobile-friendly?
A: Absolutely. The module is fully responsive and looks great on all devices.
Q: Can I schedule the timer to start at a specific time?
A: The timer begins counting down as soon as you set the deadline and hit publish. For advanced scheduling, use the HubSpot's visibility and scheduling settings.
Need More Help?
If you have questions or need support, reach out to our team at [safwan at awwaldesign.com]
