Intégrer le globe des fuseaux horaires

Vous pouvez intégrer le globe interactif 3D des fuseaux horaires de WhenToMeet dans n'importe quel site web en utilisant un simple iframe. Le globe affiche les marqueurs des villes avec les heures locales en direct et tourne automatiquement pour un rendu élégant.

Intégration du globe

Ajoutez cet extrait à votre 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>

Paramètres

Configurez l'intégration en utilisant les paramètres de requête sur l'URL src de l'iframe :

Paramètre	Type	Par défaut	Description
`cities`	string	(aucun)	IDs de villes séparées par des virgules, ex. `newyork,london,tokyo`
`theme`	`"light"` \| `"dark"`	`"dark"`	Thème de couleur
`autoRotate`	boolean	`false`	Faire tourner lentement le globe automatiquement
`h24`	boolean	`false`	Utiliser le format 24 heures au lieu de 12 heures
`hideMarkers`	boolean	`false`	Masquer les marqueurs des villes (afficher seulement le globe)

IDs de villes disponibles

Utilisez l'ID de ville depuis l'application Timezones. Les IDs courants incluent : newyork, london, tokyo, berlin, paris, sydney, dubai, singapore, losangeles, chicago, toronto, mumbai, hongkong, shanghai, saopaulo, mexicocity, cairo, lagos, nairobi, moscow.

Si vous n'avez besoin que d'une horloge compacte des fuseaux horaires sans le globe 3D, utilisez plutôt l'intégration légère :

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

Ce widget affiche les heures des villes dans un format de liste avec des informations de chevauchement des heures de travail et consomme beaucoup moins de ressources.

Conseils de dimensionnement

Le globe a le meilleur rendu dans un conteneur carré (rapport d'aspect 1:1).
Taille minimale recommandée : 300 x 300 pixels.
Le globe adapte automatiquement son champ de vue caméra pour les orientations portrait et paysage.
Utilisez la propriété CSS border-radius sur l'iframe pour un rendu élégant.

Exemples

Thème sombre avec rotation automatique

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

Thème clair, format 24 heures

<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 seulement (pas de marqueurs)

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