How to Embed a Time Zone Widget on Your Blog or Docs

A static “9am EST = 2pm GMT” callout dates badly — it’s wrong half the year and never useful for readers in other cities. An interactive time zone widget lets readers check times in their own city, right on the page.

A few places this works well:

• Team handbooks — support hours and on-call rotations as a live widget rather than a table someone has to remember to update.
• Blog posts — when you’re illustrating a scheduling scenario, embed the actual tool instead of a screenshot.
• Event landing pages — pre-load the widget with the event city so attendees can convert to their local time without leaving.

The embed code

meetwhen’s embed page gives you a one-line copy button, but the format is straightforward:

<iframe
  src="https://meetwhen.dev/embed#*America/New_York;Europe/Berlin;Asia/Tokyo|view:compare"
  width="100%"
  height="480"
  style="border:none;border-radius:8px;"
  title="Time zone comparison — meetwhen"
  loading="lazy"
></iframe>

The embed uses the same hash format as meetwhen’s share links — so any URL you copy from the main app works directly as the src. The hash breaks down as:

#*<pinnedTz>;<tz2>;<tz3>|view:<view>

For a post about scheduling meetings across multiple cities, view:find is usually the most useful — it scores every hour by how well it falls within each timezone’s work day.

Choosing the right timezones

Use IANA timezone IDs rather than abbreviations like EST or PST — they handle daylight saving automatically. Common ones:

Sizing tips

• height="380" works well for the overview (cards) view with 3–4 cities.
• height="480" is comfortable for the compare (timeline) view.
• height="520" gives the find (overlap) view room to show the scoring bar.
• The widget is responsive — set width="100%" and it fits any column width.

What the widget does

Visitors can add or remove timezones, switch views, and navigate days. Nothing is stored on your server; no third-party cookies are set on your readers.

The widget links back to meetwhen.dev in the bottom-right corner so readers can open the full tool if they want to do more.

Head to meetwhen.dev/widget to preview and copy the embed code for your own city combination.