Countdown Widget Generator
Create beautiful countdown timers for your website. Customize colors, size, and expiry behavior. Get hosted JS or HTML embed code.
This countdown widget generator produces one <script> tag that draws a live countdown wherever you paste it. Set Target Date & Time, colours, Size and the Days, Hours, Minutes and Seconds checkboxes, and the Embed Code panel rewrites itself as you type. Only settings you change are written out, so a countdown left on every default is a single line: the script src plus data-date.
Customize
Presets
Live Preview
Embed Code
Popular Tools
About Countdown Widget Generator
The output is a script tag that loads countdown.min.js from this site and carries your settings as data- attributes. When the page runs it, the script inserts the countdown immediately after the tag itself, so the position of the snippet in your HTML is the position of the widget. Nothing is uploaded from this page; the code is assembled in your browser and the preview above it ticks once a second so you can see the real thing before copying.
Every control maps to one attribute, and only non-default values are emitted. Target Date & Time becomes data-date, Title becomes data-title, the three colour fields become data-bg, data-color and data-accent, Size becomes data-size, and the four unit checkboxes become data-show-days, data-show-hours, data-show-minutes and data-show-seconds when unticked. Separator writes data-separator, Show labels and Show branding write data-labels="false" and data-branding="false" when you turn them off. On Expiry chooses between showing your Expiry Message, redirecting to a Redirect URL or hiding the widget.
Two behaviours are worth knowing before you publish. The date field has no time zone, and the widget passes the string straight to the browser's Date constructor, which reads a date-and-time without an offset as local time; the countdown therefore ends at that wall-clock moment in each visitor's own zone, not at one instant worldwide. And the unit labels inside the widget are fixed English words - Days, Hours, Minutes, Seconds - so on a non-English site untick Show labels and put your own wording in the Title.
The six presets set only the three colours: Dark is #1f2937 on white with a #60a5fa accent, Light is #f9fafb with #111827 text and a #2563eb accent, and Neon, Fire, Ocean and Minimal follow the same pattern. Leaving Show branding on adds a small link back to this page under the timer. The widget needs JavaScript and needs to reach this site to load the script, so it will not render in an email or in a feed reader.
Use Cases
How to use
Set Target Date & Time to the moment the countdown should reach zero; the field is pre-filled with midnight seven days from now.
Type a Title if you want a line above the digits, and set Background, Text Color and Accent Color, or press one of the Dark, Light, Neon, Fire, Ocean and Minimal presets.
Choose Size, pick a Separator and untick any of Days, Hours, Minutes and Seconds you do not need, plus Show labels and Show branding.
Choose On Expiry: Show Message with your own Expiry Message, Redirect URL with a full address, or Hide Widget.
Check the Live Preview, which ticks once a second with the exact colours and units your settings produce.
Press Copy on the Embed Code panel and paste the script tag into your page where the countdown should appear.
Pro Tips
- Change a setting and it appears in the code; leave it and it does not. If your snippet looks suspiciously short, that is why - every attribute you cannot see is at its default, and adding it by hand changes nothing.
- Target Date & Time carries no time zone. The widget hands the string to the browser's Date constructor, which reads it as local time, so a 23:59 deadline ends at 23:59 wherever the visitor is. Write the zone into the Title if that matters.
- The widget's Days, Hours, Minutes and Seconds labels are hard-coded English. On a site in another language, untick Show labels and carry the meaning in the Title, or the timer will mix languages.
- The countdown appears exactly where the script tag sits, because the script inserts it as its own next sibling. Paste the tag inside the container you want it in, not in the head.
- Redirect URL only fires for an address starting with http://, https:// or a leading slash. A bare domain typed without a scheme is ignored and the widget falls back to doing nothing at zero.
Troubleshooting
Nothing appears on my page after I paste the code.
Three usual causes: the platform stripped the script tag, JavaScript is disabled, or the browser could not load countdown.min.js from this site. Check the page source for the tag, then open the browser console and look for a blocked or failed request for that file.
The countdown ends at the wrong time for visitors abroad.
That is by design. The date has no time zone and the widget reads it as local time, so it ends at the same wall-clock moment in every zone. If everyone must see it end together, state the zone in the Title so readers can do the arithmetic.
The digits say Days and Hours but my site is not in English.
The unit labels inside the widget are fixed English words and cannot be translated from this page. Untick Show labels to remove them, then put the wording you want into the Title, which is your own text.
Setting Redirect URL does nothing when the timer hits zero.
The widget only follows an address that starts with http://, https:// or a slash, and On Expiry has to be set to Redirect URL as well. Retype the address with its scheme, and confirm the code contains both data-expiry and data-expiry-url.
Frequently Asked Questions
Set Target Date & Time, choose the colours and which units to show, then press Copy on the Embed Code panel and paste the one-line script tag into your page's HTML where you want the timer to appear. There is nothing to install and no account: the widget is a small script this site hosts, and your settings travel in the tag itself.
Yes. There is no sign-up, no key and no paid tier, and the generated tag works on any site that lets you paste HTML. Show branding adds a small link back to this page under the timer; unticking it removes the link and the widget still works exactly the same.
Immediately after the script tag. The widget script inserts its own container as the tag's next sibling, so the snippet's position in the HTML is the widget's position on the page. Put the tag inside the section, column or banner where you want it, and never in the head.
The widget is HTML and JavaScript, so it renders in the mobile browser of any phone that visits your page, and the box wraps its units when the screen is narrow. It is not a home-screen widget for Android or iOS - those are built in the operating system's own widget system and cannot be created from a web page.
Whatever On Expiry says. Show Message replaces the digits with the text in Expiry Message, which starts as "Time's up!". Redirect URL sends the visitor to the address you gave, provided it begins with http://, https:// or a slash. Hide Widget removes the whole box from the page.
The visitor's. The date field has no zone attached and the widget passes the string to the browser's Date constructor, which treats a date-and-time without an offset as local time. A deadline set for 20:00 therefore ends at 20:00 in London and at 20:00 in New York, five hours apart.
Yes, through three fields: Background, Text Color and Accent Color, each with a colour swatch and a hex box. The accent colours the digits. Six presets set all three at once - Dark, Light, Neon, Fire, Ocean and Minimal - and you can start from one and adjust a single field afterwards.
No. The generator produces the script version only, because a countdown has to update every second and that needs JavaScript. If your platform blocks external scripts, look for a custom-HTML or embed block that permits them, or host the countdown on a page you control and link to it.
Because the target date really is that far away and the days figure is not capped. Check Target Date & Time: a typo in the year is the usual cause. If a long horizon is intended, untick Seconds and Minutes so the widget shows only the units that change visibly.
No. Email clients and feed readers strip scripts, so the tag does nothing there. Countdowns in email are normally animated images generated on a server for each open; this widget is a browser script and needs a real page and a working connection to this site to load.