Free Classic
Countdown Timer Widget
The original countdown timer. Clean colon-separated digits that work beautifully on any website, any background, any screen size.
Widget Builder
Configure & Embed
Customise your Classic countdown then copy the embed code.
Widget Settings
About This Style
About the Classic Style
The Classic countdown timer is exactly what its name promises: a timeless, no-frills design that has been the gold standard for website countdowns for years. At its core, it displays days, hours, minutes, and seconds separated by colons — a layout immediately recognisable to anyone who has ever looked at a digital clock. This universal familiarity is its greatest strength.
Because the Classic style uses plain HTML text with no complex animations or graphical elements, it is extraordinarily lightweight. Pages that embed this widget will not suffer from layout shifts, jank, or increased CPU usage — a real advantage for content-heavy blogs, magazine sites, and news platforms that already have significant JavaScript payloads. The timer updates once per second with a simple DOM swap, consuming negligible resources.
Visually, the Classic style adapts effortlessly to any colour palette. Pair it with a dark background for an understated look on a tech blog, or combine it with light, airy tones for a wedding countdown or birthday announcement. The colour scheme picker lets you dial in the exact background, digit, and border colours to match your brand with precision.
Common use cases for the Classic style include product launch pages, limited-time sale banners, event registrations, webinar reminders, and simple "coming soon" pages. It works equally well in a wide full-width banner or squeezed into a 300px sidebar widget. The colon separator scales gracefully at any font size, meaning the layout never breaks regardless of how much or how little space you give it.
For first-time widget embedders, the Classic style is the ideal starting point. It is forgiving, predictable, and genuinely useful — the perfect building block for adding urgency and engagement to any webpage.
Integration
How to Embed the Classic Countdown
- Use the configurator above to set your target date, timezone, title, and colour theme.
- Click the Copy Code button to copy your personalised embed snippet.
- Open your website's page editor and locate the HTML or code block area.
- Paste the snippet directly into your page HTML where you want the countdown to appear.
- Save and publish your page — the widget will load automatically for every visitor.
Your embed code will look like this:
<div data-wf-widget="countdown-classic"
data-wf-target="2026-12-25T00:00:00Z"
data-wf-title="Christmas Countdown"
data-wf-size="inline"></div>
<script src="https://widget-forge.com/embed.js" async></script>Platforms
Platform Guides
WordPress
In the block editor add a Custom HTML block, paste the embed code, and update the post or page. For sidebars, go to Appearance → Widgets, add a Custom HTML widget to your sidebar, paste the code, and save.
Squarespace
Edit any page and add a Code block from the block library. Paste your embed code into the HTML field. Make sure the display mode is set to HTML rather than Markdown, then save.
Wix
In the Wix Editor click Add → Embed → HTML iFrame. Paste your embed code into the code area. Resize the element on the canvas to match the widget height (around 150px) and position it as needed.
Webflow
Drag an Embed element onto your canvas from the Add panel. Open the embed editor and paste your code. The Classic style's neutral dimensions mean it slots cleanly into Webflow grid layouts without extra wrappers.
Plain HTML / CSS Sites
Open your HTML file in any text editor and paste the embed code where you want the widget to appear — inside a div, inside a section, or anywhere in the body. No additional dependencies or frameworks are required.
Support
Frequently Asked Questions
What size should I set for the Classic countdown widget?
The Classic style looks best at its default iframe height of 150px for a full days-hours-minutes-seconds display. If you only show two or three units you can reduce the surrounding whitespace, but 150px is a safe universal size that renders correctly on desktop and mobile screens.
Can I hide the seconds on the Classic countdown?
Yes. Uncheck the 'Seconds' checkbox in the configurator before copying your embed code. The widget will then display only days, hours, and minutes — useful for longer countdowns where second-level precision isn't meaningful.
Does the Classic countdown work in WordPress sidebar widgets?
Absolutely. Paste the embed code into a Custom HTML widget in your WordPress sidebar. The iframe scales correctly in narrow columns. If your theme restricts iframes, install a plugin such as 'Raw HTML' or use the full-page embed block in the block editor.
What is the Expiry Message?
The expiry message is the text your visitors see once the countdown reaches zero. Instead of showing all-zeros the widget replaces the timer with whatever message you set — for example 'Sale Is Live!' or 'The event has started'. You can leave it blank and the timer will simply stop at zero.
Can I use the Classic countdown without a title?
Yes. Simply leave the Widget Title field empty. The countdown digits will be displayed on their own without any heading above them, giving a very minimal look. This is ideal when the surrounding page content already provides context for what the timer is counting down to.
More Options