Embeddable clock, countdown and time zone widgets

What each widget does

All three are single HTML files of roughly four kilobytes with the CSS and JavaScript inline. They read the time from the visitor’s own browser and format it with the browser’s built-in IANA time zone database, which is why daylight saving is correct without us having to ship a table of transition dates. Nothing is fetched from our servers after the initial load, so the widget cannot slow your page down or break when we deploy.

Every parameter is optional. The clock falls back to UTC, the countdown to twenty-four hours from now, and the converter to New York → London. The builder below writes the query string for you, so you do not need to memorise any of this.

The countdown’s to value is read as wall-clock time in the zone you name, not in your visitor’s local zone. If you set to=2027-01-01T00:00:00 and tz=Asia/Tokyo, every visitor sees the same countdown to midnight in Tokyo, wherever they are. Pass an ISO string that already carries an offset or a Z and we use that instead.

Build your embed

Choose the widget, choose the city, and copy what appears underneath. The preview is the real widget running live, not a picture of one.

The credit line, and why we are asking

Each widget carries a small credit link inside itself. You are free to keep that and nothing else — the widget will work exactly the same, and we are not going to check.

But we would rather tell you the truth about why the snippet also includes a visible line of text underneath the iframe. A link inside an iframe points at a separate document from the search engine’s point of view. It is a link from timedatelive.com/embed/clock.html to timedatelive.com, which is to say a link from us to ourselves, and it is worth nothing at all in ranking terms. The only part of this arrangement that helps us is the ordinary <a> in your own page, outside the frame.

So that is the deal, stated plainly: the widget is free and useful whether or not you keep the line, and the line is the part that pays us back. Most widget pages hide this and hope you paste without looking. We would rather you decided on purpose.

Technical notes

The practical details, so you can decide whether this belongs on your page before you paste it.

• No cookies, no storage, no analytics. The widgets read nothing and write nothing. There is no beacon and no third-party script. The utm_source on the credit link is a query parameter on a link a human has to click, not a tracker.
• No network requests after load. The time comes from the visitor’s clock and the zone rules from their browser. If our servers go down, an already-loaded page keeps ticking.
• Roughly 4 KB each, and one request. The CSS and JavaScript are inline. Add loading="lazy", which the generated snippet does, and a widget below the fold costs your visitor nothing until they scroll to it.
• Daylight saving is handled for you. Formatting goes through Intl.DateTimeFormat with a named IANA zone, so a clock set to Europe/Lisbon moves itself in late March and late October. Half-hour and quarter-hour zones such as Asia/Kolkata and Asia/Kathmandu are correct for the same reason.
• Auto-resize, if you want it. The clock posts {tdlWidget:"clock", height:…} to the parent window with postMessage. If you already have a resize listener, it will pick that up; if you do not, the fixed height in the snippet is fine.
• Transparent background. The widget body is transparent and the card sits on top, so it inherits whatever your page is doing behind it. Use theme=dark on dark pages to flip the card itself.
• Accessibility. The generated snippet sets a title on the iframe describing what it contains, because a frame without one is announced as an unlabelled frame by screen readers.