Put a countdown or a clock on your own site
Pick what you want, copy the snippet, paste it into your page. About 3 KB, no cookies, no tracking, no web font, and no network calls once it has loaded.
Preview
Paste this
<!-- DateTools countdown -->
<style>datetools-countdown:not(:defined){display:block;min-height:296px}</style>
<datetools-countdown to="2026-12-25" label="Christmas" zone="Europe/London" basis="exclusive" style="--dt-reserve:296px"></datetools-countdown>
<a href="https://datetools.com/countdown" rel="nofollow">Christmas countdown by DateTools</a>
<script src="https://datetools.com/e/v1/datetools.js" async></script>Please keep the link
The line beneath the widget is a normal, visible link to the page this data comes from. It is how the widget is paid for, and it is the only thing we ask in return.
It sits outside the widget on purpose. A link placed inside a widget's own shadow root, or inside an iframe, belongs to that document rather than to your page, so it would be invisible to search engines and would do neither of us any good. Keeping it in your own HTML is what makes the exchange real. It carries rel="nofollow", so it passes no ranking weight and cannot affect your standing either way.
Questions
Does the widget track my readers?
No. It sets no cookies, writes nothing to storage, and makes no network request at all after the one that loads the script. There is no analytics inside it. Time zone conversion uses the browser's own Intl support, so once the file is cached the widget works offline.
How big is it?
About 3 KB compressed, for the script and its styles together, and it loads no web font. It is served from a versioned path that never changes shape, so a snippet you paste today keeps working.
Will it break my layout or my Core Web Vitals?
It should not. The snippet reserves the widget's height in a style rule that applies before the script has even parsed, so nothing moves when the widget appears. The script is loaded async and its styles live in a shadow root, so they cannot leak into your page and your CSS cannot break the widget.
Can I match it to my own colours?
Yes. Set theme to light or dark to fix it, or leave it on auto and it follows your reader's system preference. For finer control, set the --dt-ink, --dt-dial, --dt-rule and --dt-now custom properties on the element and the widget will use them.
Why does the link have to be outside the widget?
Because a link inside an iframe or a shadow root belongs to that document rather than to your page, which makes it invisible to search engines and worthless to us. Keeping it in your own HTML is what makes the exchange real. It is marked rel="nofollow", so it passes no ranking weight and cannot affect your standing either way.
What happens if I use an unknown time zone?
The widget falls back to your reader's own time zone rather than showing an error or a wrong figure. Zone names are IANA identifiers, such as Europe/London or America/New_York.