Pages 2.0 | Add the Countdown Timer Page Widget – Happeo
Pages 2.0 | Add the Countdown Timer Page Widget
Learn how to add a live countdown to any page, so the information and the timeline are always in the same place, accurate from the day you publish to the moment it expires.
🎯 Who this article is for: Admins who need to install the widget, and for page group owners, editors, and admins who want to add and configure it on a page.
💼 Package requirements: The Countdown Timer page widget is available to all packages.
🔒 Permissions: Installing or uninstalling the widget from the Apps Marketplace requires admin access. Adding the widget to a page requires admin, page group owner, or page group editor access.
🗒️ Note: This article covers the Countdown Timer Page Widget specifically. The widget is added through the page editor and is part of the Pages 2.0 experience.
1. Overview
The Countdown Timer page widget lets you place a live, ticking countdown directly on any page in your intranet, so the information and the timeline are always in the same place. Whether a team is working toward a submission deadline, a product launch, or a significant organizational change, the widget keeps every visitor accurately oriented in time, without anyone needing to maintain it as the date approaches.
Once the countdown reaches zero, a configurable expired state lets you replace the timer with a message and a next-step link, so the widget stays relevant and useful long after the moment has passed.
2. Use cases
- Drive completion on enrollment and submission deadlines: A countdown embedded alongside the form or instructions gives every visitor the full picture at a glance: what they need to do, and exactly how much time they have to do it.
- Signal that something significant is changing, and how soon: The page holding all the context also shows how far away the change is. Every time someone visits to prepare, the timeline is accurate.
- Give a company-wide moment a shared reference point that updates itself: The countdown shows how close an event is, giving anyone who visits an accurate picture of where things stand.
3. How to install and uninstall the Countdown Timer widget
Only admins can install or uninstall widgets from the Apps Marketplace.
How to install
- Click your avatar in the navigation.
- Go to Admin Settings → Apps.
- Search for Countdown Timer.
- Click the Install button at the top-right.
- Accept the terms and conditions to complete installation.
How to uninstall
- Click your avatar in the navigation.
- Go to Admin Settings → Apps.
- Search for Countdown Timer.
- Click the Uninstall button at the top-right.
- Confirm the uninstallation.
⚠️ Important: When you uninstall the Countdown Timer widget, any instances already placed on published pages will remain visible but display an error message in place of the timer.
4. How to add the Countdown Timer page widget
- Navigate to the page where you want to add the widget.
- Click the pencil icon (top-right) to enter the page editor.
- Go to Widgets and select the Countdown Timer Page Widget to place it in a section on the page.
- Hover over the widget and click the gear icon to open the configuration settings.
- Configure the widget, then publish the page to make it visible to everyone with access.
5. How to configure the Countdown Timer page widget
To configure the widget on your page, hover over it and click the gear icon to open the settings panel. The panel has two tabs: Configure and Style.
Configuration
Content
- Widget header: Toggle on to display a header above the widget content.
- Eyebrow label: A small label above the main heading, useful for context such as "Deadline" or "Coming soon."
- Main heading: The primary title displayed on the widget.
- Body text: Supporting text below the main heading.
- Footer note: A small note displayed beneath the countdown.
Date and time
- YYYY-MM-DD (required): Enter the target date in year-month-day format, for example 2026-12-31.
- HH:MM:SS (required): Enter the target time in 24-hour format, in your local time zone, for example 17:00:00.
Add a button
Toggle on Add a button to include a CTA alongside the countdown.
- Button label: Enter the text that appears on the button.
- Button color: Choose a color to match your branding.
- Button URL: Add the URL the button will direct users to when clicked.
Customize expired state
Toggle on Customize expired state to control what viewers see once the countdown reaches zero.
- Expired main heading: Enter a short message that replaces the timer when it ends.
- Add a button: Toggle on to include a button in the expired state.
6. Style options
The Style tab controls the visual appearance of this widget instance.
- Style option: Select a preset style or choose (Customize) to set individual values.
- Padding: Control the spacing inside the widget.
- Border: Toggle on to add a border around the widget.
- Round corners: Use the slider to set the corner radius.
- Shadow: Toggle on to add a drop shadow to the widget.
- Background color: Choose a background color or keep the system default.
- Background image: Select an image source to display as the widget background.
- Color theme: Set the text and contrast theme.
7. Best practices
- Set the expired state before publishing: It takes under a minute, but it prevents your countdown from becoming a silent zero.
- Pair every deadline with a CTA button: A countdown that reminds people a deadline is approaching is useful. One that also shows them exactly where to go is far more likely to drive the action you need.
- Place the widget where your audience already goes: Add it to a high-traffic page your team already visits regularly.
8. Frequently asked questions
Does the countdown update in real time for viewers?
Yes. The timer updates in real time.
What happens if I do not configure the expired state?
If it is not configured, the widget will display a zero countdown once the deadline passes.
Can I add more than one Countdown Timer widget to the same page?
Yes, you can place multiple Countdown Timer widgets on a single page.
Can I edit the timer after the page has been published?
Yes, update the settings in the page editor and publish the page again.