Timezone-Globe einbetten

Sie können den interaktiven 3D-Zeitzonenglobus von WhenToMeet in jede Website einbetten, indem Sie einen einfachen iframe verwenden. Der Globus zeigt Stadtmarkierungen mit aktuellen Ortszeiten an und dreht sich automatisch für ein elegantes Aussehen.

Globe embed

Fügen Sie diesen Snippet zu Ihrem HTML hinzu:

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

Parameter

Konfigurieren Sie den embed mit Abfrageparametern auf der iframe-src-URL:

Parameter	Typ	Standard	Beschreibung
`cities`	string	(keine)	Kommagetrennte Stadt-IDs, z.B. `newyork,london,tokyo`
`theme`	`"light"` \| `"dark"`	`"dark"`	Farbschema
`autoRotate`	boolean	`false`	Den Globus automatisch langsam drehen
`h24`	boolean	`false`	Verwenden Sie 24-Stunden-Zeitformat anstelle von 12-Stunden
`hideMarkers`	boolean	`false`	Stadtmarkierungen ausblenden (nur den Globus anzeigen)

Verfügbare Stadt-IDs

Verwenden Sie die Stadt-ID aus der Timezones-App. Häufige IDs sind: newyork, london, tokyo, berlin, paris, sydney, dubai, singapore, losangeles, chicago, toronto, mumbai, hongkong, shanghai, saopaulo, mexicocity, cairo, lagos, nairobi, moscow.

Wenn Sie nur eine kompakte Zeitzonenuhr ohne den 3D-Globus benötigen, verwenden Sie stattdessen den leichtgewichtigen embed:

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

Dieses Widget zeigt Stadtzeiten in einem Listenformat mit Informationen zur Geschäftszeitenüberlappung an und ist viel ressourcenschonender.

Größentipps

Der Globus sieht am besten in einem quadratischen Container (1:1 Seitenverhältnis) aus.
Empfohlene Mindestgröße: 300 x 300 Pixel.
Der Globus passt seine Kamerasichtfeld automatisch für Hoch- und Querformatausrichtungen an.
Verwenden Sie CSS border-radius auf dem iframe für ein elegantes Aussehen.

Beispiele

Dunkles Thema mit automatischer Rotation

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

Helles Thema, 24-Stunden-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>

Nur Globus (ohne Markierungen)

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