Incorpora il globo dei fusi orari

Puoi incorporare il globo 3D interattivo dei fusi orari di WhenToMeet in qualsiasi sito web utilizzando un semplice iframe. Il globo mostra i marker delle città con gli orari locali dal vivo e ruota automaticamente per un aspetto raffinato.

Incorporamento del globo

Aggiungi questo snippet al tuo 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>

Parametri

Configura l'incorporamento utilizzando i parametri di query nell'URL src dell'iframe:

Parametro	Tipo	Predefinito	Descrizione
`cities`	string	(nessuno)	ID città separati da virgole, ad es. `newyork,london,tokyo`
`theme`	`"light"` \| `"dark"`	`"dark"`	Tema colore
`autoRotate`	boolean	`false`	Ruota lentamente il globo automaticamente
`h24`	boolean	`false`	Usa il formato 24 ore anziché 12 ore
`hideMarkers`	boolean	`false`	Nascondi i marker delle città (mostra solo il globo)

ID città disponibili

Usa l'ID città dall'app Timezones. Gli ID comuni includono: newyork, london, tokyo, berlin, paris, sydney, dubai, singapore, losangeles, chicago, toronto, mumbai, hongkong, shanghai, saopaulo, mexicocity, cairo, lagos, nairobi, moscow.

Se hai bisogno solo di un orologio dei fusi orari compatto senza il globo 3D, utilizza invece l'incorporamento leggero:

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

Questo widget mostra gli orari delle città in formato elenco con informazioni sulla sovrapposizione delle ore lavorative ed è molto più leggero in termini di risorse.

Suggerimenti di dimensionamento

Il globo è più bello in un contenitore quadrato (rapporto di aspetto 1:1).
Dimensione minima consigliata: 300 x 300 pixel.
Il globo si adatta automaticamente al suo FOV della camera per orientamenti verticali e orizzontali.
Usa CSS border-radius sull'iframe per un aspetto raffinato.

Esempi

Tema scuro con rotazione automatica

<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 chiaro, formato 24 ore

<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 (senza marker)

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