Incorporar Globo de Fusos Horários

Você pode incorporar o globo interativo 3D de fusos horários do WhenToMeet em qualquer site usando um iframe simples. O globo mostra marcadores de cidades com horas locais ao vivo e gira automaticamente para uma aparência refinada.

Incorporação de globo

Adicione este snippet ao seu 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

Configure a incorporação usando parâmetros de query na URL src do iframe:

Parâmetro	Tipo	Padrão	Descrição
`cities`	string	(nenhum)	IDs de cidades separadas por vírgula, ex.: `newyork,london,tokyo`
`theme`	`"light"` \| `"dark"`	`"dark"`	Tema de cores
`autoRotate`	boolean	`false`	Girar o globo lentamente de forma automática
`h24`	boolean	`false`	Usar formato de hora 24h em vez de 12h
`hideMarkers`	boolean	`false`	Ocultar marcadores de cidades (mostrar apenas o globo)

IDs de cidades disponíveis

Use o ID da cidade do aplicativo de Fusos Horários. Os IDs comuns incluem: newyork, london, tokyo, berlin, paris, sydney, dubai, singapore, losangeles, chicago, toronto, mumbai, hongkong, shanghai, saopaulo, mexicocity, cairo, lagos, nairobi, moscow.

Se você precisar apenas de um relógio de fuso horário compacto sem o globo 3D, use a incorporação leve em vez disso:

<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 mostra horas de cidades em formato de lista com informações de sobreposição de horário comercial e é muito mais leve em recursos.

Dicas de dimensionamento

O globo fica melhor em um contêiner quadrado (proporção 1:1).
Tamanho mínimo recomendado: 300 x 300 pixels.
O globo se adapta automaticamente ao FOV da câmera para orientações retrato e paisagem.
Use border-radius do CSS no iframe para uma aparência refinada.

Exemplos

Tema escuro com auto-rotação

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

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

Apenas globo (sem 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>