Put a live timezone grid in your team wiki
A small, self-contained widget showing your team's working hours side by side and the window where they overlap. It updates itself, follows daylight saving automatically, and works in Notion, Confluence, Slack, WordPress, or any page that accepts an iframe. Free, no signup, no API key, no tracking of your readers.
Build your snippet
Need a city that isn't listed above? Open the full grid, add any city in the world — the search falls back to a global geocoder — then click ⊡ Embed in the meeting card to get a snippet with exactly those cities.
How to embed it, per platform
- Copy the URL from the builder above.
- In your Notion page, type
/embedand press Enter. - Paste the URL and click Embed link.
- Drag the bottom edge of the block to about 400px tall.
Full walkthrough with screenshots: How to add a timezone widget to your Notion workspace.
- Cloud: type
/iframeon the page, choose the Iframe macro, and paste the URL. - Server / Data Center: use Insert > Other Macros > HTML and paste the HTML snippet instead. Your admin must have the HTML macro enabled.
- Set the height to
420and the width to100%.
- Paste the URL into any channel — Slack will unfurl it as a link preview.
- For something permanent, pin it to the channel or add it as a channel bookmark: channel name > Integrations > Add a bookmark.
- A bookmark on your team's main channel is usually the highest-traffic place to put it.
- Add a Custom HTML block to your page or post.
- Paste the HTML snippet.
- Preview to confirm — some themes constrain iframe width; if so, add
max-width:100%to the block's styles.
- Google Sites: Insert > Embed > By URL, paste the URL.
- Coda: type
/embedand paste the URL. - Craft and Obsidian Publish: paste the HTML snippet into a code/HTML block.
- Anything else that accepts an iframe will work — there is nothing platform-specific in the widget.
Customising the widget
Everything the widget shows is driven by the URL, so you can hand-edit the snippet rather than rebuilding it here.
| What | How |
|---|---|
| Cities | Edit the #cities= fragment. Each entry is Name|CC|IANA_Zone, URL-encoded, separated by commas. Up to 10. |
| Height | Change height="420". Allow roughly 46px per city plus 110px of chrome. |
| Width | width="100%" is responsive. The grid scrolls horizontally inside its own container, so it never overflows the host page. |
| Theme | Follows the reader's own light/dark preference automatically. There is nothing to configure. |
Questions
Does it cost anything?
No. The widget is free, there is no signup, no API key, and no usage limit. It carries a small "Timezone overlap by overlaptimezone.cc" credit at the bottom, and that link is the only thing we ask in return.
Does it track the people who view it?
No. The widget sets no cookies, runs no analytics, and shows no ads — deliberately, since it is designed to sit inside other people's pages. It reads the city list out of its own URL and computes everything locally in the reader's browser. Nothing is sent anywhere.
Does it handle daylight saving?
Yes, automatically. Offsets are derived from the IANA timezone database through the browser's built-in Intl API on every render, so the grid is correct on the day the clocks change without anyone updating the snippet. This is exactly why a widget beats a hand-written table of everyone's hours — the table is wrong for several weeks a year and nobody notices. See the methodology page for how the figures are produced.
Will it break if my team changes?
The city list lives in the URL, so to change the team you edit the snippet — or rebuild it here and paste the new one. There is no account and no stored state, which also means there is nothing to lose if you stop using it.
How often does it refresh?
The grid recomputes every 60 seconds while the page is open, so the "now" marker stays accurate without a reload.
Need more than a widget?
The full grid handles up to 10 cities with minute-level zoom, saved team presets, shareable links, and one-click Google Calendar export.
◎ Open the full tool