Integration Guide

How to Add a Timezone Widget to Your Notion Workspace

Most distributed teams keep a table in Notion listing everyone’s working hours. It is accurate on the day it is written and wrong for several weeks a year afterwards, because clocks move and nobody updates it. A live embedded widget solves that permanently: it reads the timezone database on every render, so it is correct on the morning the clocks change without anyone touching the page.

This guide walks through embedding one in Notion. It takes about two minutes, needs no integration, no API key, and works on the free plan.

Why the hand-written table fails

The usual Notion page looks like this: a table with a row per person, a column for their city, and a column reading something like “9am–5pm EST”. Three things go wrong with it, and all three are invisible until someone misses a meeting.

Daylight saving moves under it. “EST” is only true for part of the year — from March to November New York is on EDT, one hour different. A table written in January is wrong from mid-March. Worse, the US and the EU change clocks on different dates, so for two or three weeks each spring and autumn the gap between New York and London is not what either side assumes. Our guide to DST changes for remote teams covers those windows in detail.

An offset is a fact about a moment, not a place. Recording “UTC+1” for Berlin is true in January and false in July. Recording the city — or better, the IANA zone Europe/Berlin — stays true forever. A widget stores the zone and derives the offset; a table stores the offset and rots.

The table does not answer the actual question. Everyone’s hours listed in a column still leaves each reader doing the arithmetic to work out when all of them are simultaneously awake. That is the question people actually have, and a grid answers it visually — the overlapping columns are simply the ones where every row is green.

Step 1 — Build your snippet

Open the widget builder and click the cities on your team. The preview updates as you select, so you can see exactly what your teammates will see before you paste anything.

If a city you need is not in the picker — it is a deliberately short list of the ones that come up most often — open the full grid instead. Its search falls back to a global geocoder, so it will find essentially any populated place on earth, and the ⊟ Embed button in the meeting card produces the same snippet with your exact cities in it.

When you are happy with the preview, click Copy URL. Notion wants the plain URL, not the HTML.

Step 2 — Paste it into Notion

  1. Open the Notion page where the widget should live — a team home page or an onboarding doc is usually the right place.
  2. On a new line, type /embed and press Enter.
  3. Paste the URL you copied and click Embed link.
  4. The grid appears. Drag the handle at the bottom edge until all your cities are visible — roughly 400px for a three-city team, a little more for larger ones.

That is the whole process. There is nothing to authorise and nothing to install, because the widget is an ordinary web page rather than a Notion integration.

Step 3 — Put it where people will see it

An embed nobody scrolls to is no better than the table it replaced. The places that earn their keep:

  • The team home page, above the fold. This is the highest-traffic square of pixels your team has.
  • The onboarding doc. New joiners are exactly the people who do not yet know that half the team is asleep at 4pm.
  • The meeting-notes template. Embedded in the template itself, every new agenda page carries the grid, which quietly prevents the recurring 7am call nobody wanted to complain about.
  • Your on-call or escalation page, where knowing who is awake right now is the entire question.

Making it more useful

Add the people, not just the cities

The widget labels rows by city. If your team is small, rename them to match: search the person’s city in the full grid, and the label shown is whatever name the entry carries. A row reading “Priya — Bangalore” is read faster than one reading “Bangalore”.

Pair it with a written norm

A grid shows when a meeting can happen. It does not say when one should. Most teams that schedule well across timezones write down one or two rules next to the widget — something like “no recurring meetings outside 12:00–14:00 UTC”, or “if a slot is outside someone’s working hours, it rotates”. The async-first scheduling guide covers the patterns that hold up.

Know what to do when there is no overlap

For teams spanning Asia, Europe and the Americas there is often no hour when everyone is inside working hours. The widget says so plainly rather than pretending otherwise, and the full tool goes further: it scores every hour of the day and recommends the least-bad compromise. That is a better basis for a decision than someone guessing in a thread.

Common problems

SymptomCause and fix
The embed block is blankNotion occasionally needs a reload after the first paste. Refresh the page. If it is still blank, confirm the URL starts with https://overlaptimezone.cc/embed/.
Only some cities showThe block is too short. Drag the bottom edge down — each city needs about 46px.
Times look an hour offAlmost always a real clock change rather than a bug. Check whether one of the cities has just entered or left daylight saving; the city timezone pages list each city’s next transition date.
You need to change the teamRebuild the snippet and replace the URL in the embed block. The city list lives in the URL, so there is no stored state to migrate.

Does it work anywhere else?

Yes — nothing about the widget is Notion-specific. Confluence, Slack channel bookmarks, WordPress, Google Sites, Coda, Craft and Obsidian Publish all take either the URL or the HTML snippet. The widget page lists the exact steps for each.

Privacy

Worth stating plainly, since this ends up on internal pages: the widget sets no cookies, runs no analytics, and shows no ads. It reads the city list out of its own URL and computes everything in the reader’s browser using the timezone database the browser already ships. Nothing about your team is transmitted anywhere, and there is no account to create. How the figures are derived is documented on the methodology page.

Build your widget

Pick your team’s cities, copy the snippet, paste it into Notion. Free, no signup.

⊟ Open the widget builder

Related reading