Free time zone widget for your website

Drop a live, always-correct world clock onto any page with two lines of HTML. Multiple zones, daylight-saving handled automatically, UTC offsets, custom labels, and dark-mode theming. No sign-up, no build step, no API key.

See it live

This panel is the actual widget, rendered right here on this page:

Add it in 30 seconds

Paste this where you want the clock to appear, and add the script tag once per page:

<div data-tzm-clock
     data-zones="America/New_York,Europe/London,Asia/Tokyo"></div>
<script src="https://timezonemeet.app/embed.js" async></script>

That's it. The widget fetches each zone's current offset once, then ticks every minute in the browser.

Why use it

DST-aware
Offsets follow each region's daylight-saving rules — no manual updates, ever.
Zero dependencies
Self-contained script. Brings its own DOM and CSS. Works on any site, framework or not.
Themeable
Every color is a CSS variable. Match your brand or a dark dashboard.
Free
No account, no key, no rate limit for the widget. A small attribution link is shown.

Options & theming

Customize with data attributes on the <div>:

AttributeWhat it does
data-zonesComma-separated IANA zones, e.g. America/Los_Angeles,Europe/Paris,Asia/Kolkata. Required.
data-labelsOverride the derived city names, in the same order as data-zones.
data-showComma list of extras: offset (±HH:MM), dst (summer-time badge), utc (UTC reference row).

With labels, offsets, and a UTC row

<div data-tzm-clock
     data-zones="America/Los_Angeles,Europe/Paris,Asia/Kolkata"
     data-labels="HQ (SF),Paris Office,Bengaluru Team"
     data-show="offset,dst,utc"></div>
<script src="https://timezonemeet.app/embed.js" async></script>

Themed for a dark dashboard

Scope CSS custom properties to the widget to restyle it:

<div data-tzm-clock
     data-zones="America/New_York,Europe/London,Asia/Singapore"
     data-show="offset,dst"
     style="--tzm-clock-bg:#111827; --tzm-clock-fg:#f9fafb;
            --tzm-clock-muted:#9ca3af; --tzm-clock-border:#1f2937;
            --tzm-clock-accent:#8b5cf6;"></div>

Injecting widgets after load

For single-page apps or dashboards that add panels dynamically, call window.TZMClock.refresh() after inserting new data-tzm-clock elements and the widget will pick them up.

Need the raw data instead?

If you'd rather build your own UI, the same engine is available as a JSON API: convert a UTC instant to any set of IANA zones (local time, ISO-8601, UTC offset, day-of-week, DST flag). Free tier of 1,000 requests/day.

Try the widget   Read the API docs →   Get a free API key →