Ein Zeitzonен-Widget in Blog oder Docs einbetten

Wer über Remote-Arbeit, verteilte Teams oder internationale Zusammenarbeit schreibt, für den ist ein statischer Hinweis wie „9 Uhr EST = 14 Uhr GMT” eine verpasste Chance. Ein interaktives Zeitzonен-Widget ermöglicht es Lesern, Zeiten für ihre eigene Stadt zu prüfen – ohne die Seite zu verlassen.

Wann ein Einbetten sinnvoll ist

• Team-Handbücher — Zeige Support-Zeiten oder Bereitschaftsrotationen als Live-Widget statt als veraltete Tabelle.
• Blog-Beiträge — Veranschauliche ein Planungsbeispiel (z. B. „Überschneidung SF–Bangalore”) mit dem echten Tool, nicht mit einem Screenshot.
• Interne Docs — Hilf einem globalen Team, sich schnell an einer gemeinsamen Zeitzone zu orientieren, ohne einen weiteren Tab öffnen zu müssen.
• Event-Landingpages — Bette das Widget vorgeladen mit der Event-Stadt ein, damit Teilnehmer in ihre Ortszeit umrechnen können.

Der Einbettungscode

Die Einbettungsseite von meetwhen bietet einen Ein-Klick-Kopierbutton, aber das Format ist unkompliziert:

<iframe
  src="https://meetwhen.dev/embed#*America/New_York;Europe/Berlin;Asia/Tokyo|view:compare"
  width="100%"
  height="480"
  style="border:none;border-radius:8px;"
  title="Time zone comparison — meetwhen"
  loading="lazy"
></iframe>

Das Widget verwendet dasselbe Hash-Format wie meetwhen-Freigabelinks – jede URL, die du aus der Haupt-App kopierst, funktioniert direkt als src. Der Hash gliedert sich so auf:

#*<pinnedTz>;<tz2>;<tz3>|view:<view>

Für einen Beitrag über die Planung von Meetings in mehreren Städten ist view:find meist am nützlichsten – er bewertet jede Stunde danach, wie gut sie in den Arbeitstag der jeweiligen Zeitzone fällt.

Die richtigen Zeitzonen wählen

Verwende IANA-Zeitzonen-IDs statt Abkürzungen wie EST oder PST – sie verwalten die Sommerzeit automatisch. Häufig verwendete:

Tipps zur Größenanpassung

• height="380" eignet sich gut für die overview-Ansicht (Karten) mit 3–4 Städten.
• height="480" ist komfortabel für die compare-Ansicht (Zeitleiste).
• height="520" gibt der find-Ansicht (Überschneidung) genug Platz für die Wertungsleiste.
• Das Widget ist responsiv – setze width="100%" und es passt sich jeder Spaltenbreite an.

Was das Widget tut (und nicht tut)

Es ist vollständig interaktiv – Besucher können Zeitzonen hinzufügen oder entfernen, Ansichten wechseln und durch Tage navigieren. Es speichert nichts auf deinem Server und setzt keine Drittanbieter-Cookies bei deinen Lesern.

Das Widget verlinkt in der rechten unteren Ecke zurück auf meetwhen.dev , damit Leser das vollständige Tool öffnen können, wenn sie mehr tun möchten.

Gehe zu meetwhen.dev/widget, um eine Vorschau zu sehen und den Einbettungscode für deine eigene Städtekombination zu kopieren.