Embed Timezone Globe

You can embed the WhenToMeet interactive 3D timezone globe into any website using a simple iframe. The globe shows city markers with live local times and auto-rotates for a polished look.

Globe embed

Add this snippet to your HTML:

<iframe
  src="https://timezones.whentomeet.io/embed/globe?cities=newyork,london,tokyo&autoRotate=true&theme=dark"
  width="500"
  height="500"
  style="border: none; border-radius: 16px; background: #0a1628;"
  loading="lazy"
  allow="webgl"
  title="Timezone Globe"
></iframe>

Parameters

Configure the embed using query parameters on the iframe src URL:

Parameter	Type	Default	Description
`cities`	string	(none)	Comma-separated city IDs, e.g. `newyork,london,tokyo`
`theme`	`"light"` \| `"dark"`	`"dark"`	Color theme
`autoRotate`	boolean	`false`	Slowly spin the globe automatically
`h24`	boolean	`false`	Use 24-hour time format instead of 12-hour
`hideMarkers`	boolean	`false`	Hide city markers (show only the globe)

Available city IDs

Use the city ID from the Timezones app. Common IDs include: newyork, london, tokyo, berlin, paris, sydney, dubai, singapore, losangeles, chicago, toronto, mumbai, hongkong, shanghai, saopaulo, mexicocity, cairo, lagos, nairobi, moscow.

If you only need a compact timezone clock without the 3D globe, use the lightweight embed instead:

<iframe
  src="https://timezones.whentomeet.io/embed?cities=newyork,london,tokyo&theme=dark"
  width="300"
  height="250"
  style="border: none; border-radius: 12px;"
  title="Timezone Widget"
></iframe>

This widget shows city times in a list format with business hours overlap info and is much lighter on resources.

Sizing tips

The globe looks best in a square container (1:1 aspect ratio).
Minimum recommended size: 300 x 300 pixels.
The globe automatically adapts its camera FOV for portrait and landscape orientations.
Use CSS border-radius on the iframe for a polished look.

Examples

Dark theme with auto-rotate

<iframe
  src="https://timezones.whentomeet.io/embed/globe?cities=london,newyork,tokyo,sydney&theme=dark&autoRotate=true"
  width="600"
  height="600"
  style="border: none; border-radius: 16px; background: #0a1628;"
  loading="lazy"
  allow="webgl"
  title="Timezone Globe"
></iframe>

Light theme, 24-hour format

<iframe
  src="https://timezones.whentomeet.io/embed/globe?cities=berlin,paris,dubai&theme=light&h24=true"
  width="400"
  height="400"
  style="border: none; border-radius: 16px;"
  loading="lazy"
  allow="webgl"
  title="Timezone Globe"
></iframe>

Globe only (no markers)

<iframe
  src="https://timezones.whentomeet.io/embed/globe?hideMarkers=true&theme=dark&autoRotate=true"
  width="300"
  height="300"
  style="border: none; border-radius: 50%; background: #0a1628;"
  loading="lazy"
  allow="webgl"
  title="Globe"
></iframe>