Insertar Globo de Zonas Horarias

Puedes insertar el globo terráqueo interactivo en 3D de WhenToMeet de zonas horarias en cualquier sitio web usando un simple iframe. El globo muestra marcadores de ciudades con horas locales en vivo y se rota automáticamente para un aspecto pulido.

Inserción de globo

Añade este fragmento a tu 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>

Parámetros

Configura la inserción usando parámetros de consulta en la URL del src del iframe:

Parámetro	Tipo	Por defecto	Descripción
`cities`	string	(ninguno)	IDs de ciudad separados por comas, p. ej. `newyork,london,tokyo`
`theme`	`"light"` \| `"dark"`	`"dark"`	Tema de color
`autoRotate`	boolean	`false`	Rota lentamente el globo automáticamente
`h24`	boolean	`false`	Usa formato de hora de 24 horas en lugar de 12 horas
`hideMarkers`	boolean	`false`	Oculta marcadores de ciudad (muestra solo el globo)

IDs de ciudad disponibles

Usa el ID de ciudad de la aplicación de Zonas Horarias. Los IDs comunes incluyen: newyork, london, tokyo, berlin, paris, sydney, dubai, singapore, losangeles, chicago, toronto, mumbai, hongkong, shanghai, saopaulo, mexicocity, cairo, lagos, nairobi, moscow.

Si solo necesitas un reloj de zona horaria compacto sin el globo 3D, usa la inserción ligera en su lugar:

<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>

Este widget muestra horas de ciudad en formato de lista con información de superposición de horario comercial y es mucho más ligero en recursos.

Consejos de tamaño

El globo se ve mejor en un contenedor cuadrado (relación de aspecto 1:1).
Tamaño mínimo recomendado: 300 x 300 píxeles.
El globo se adapta automáticamente su campo de visión de cámara para orientaciones vertical y horizontal.
Usa CSS border-radius en el iframe para un aspecto pulido.

Ejemplos

Tema oscuro con rotación automática

<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>

Tema claro, formato de 24 horas

<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>

Solo globo (sin marcadores)

<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>