Cómo insertar un widget de zonas horarias en tu blog o documentación

Si escribes sobre trabajo remoto, equipos distribuidos o colaboración internacional, un cuadro estático del tipo “9am EST = 2pm GMT” es una oportunidad desperdiciada. Un widget interactivo de zonas horarias permite a tus lectores consultar los horarios de su propia ciudad sin salir de tu página.

Cuándo tiene sentido usar un embed

• Manuales de equipo — muestra tus horarios de soporte o turnos de guardia como un widget dinámico en lugar de una tabla que queda desactualizada.
• Artículos de blog — ilustra un ejemplo de planificación (por ejemplo, “el solapamiento entre SF y Bangalore”) con la herramienta real, no con una captura de pantalla.
• Documentación interna — ayuda a un equipo global a orientarse rápidamente en torno a una zona horaria común sin tener que cambiar de pestaña.
• Páginas de eventos — inserta el widget precargado con la ciudad del evento para que los asistentes puedan convertirlo a su hora local.

El código de inserción

La página de embed de meetwhen te da un botón para copiar el código en un clic, pero el formato es sencillo:

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

El embed usa el mismo formato de hash que los enlaces compartibles de meetwhen, así que cualquier URL que copies desde la aplicación principal funciona directamente como src. El hash se estructura así:

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

Para un artículo sobre coordinación de reuniones entre varias ciudades, view:find suele ser la opción más útil: puntúa cada hora en función de cómo encaja dentro de la jornada laboral de cada zona horaria.

Cómo elegir las zonas horarias

Usa identificadores de zona horaria IANA en lugar de abreviaturas como EST o PST: gestionan el horario de verano de forma automática. Los más habituales:

Consejos de tamaño

• height="380" funciona bien para la vista overview (tarjetas) con 3–4 ciudades.
• height="480" es cómodo para la vista compare (línea de tiempo).
• height="520" da espacio a la vista find (solapamiento) para mostrar la barra de puntuación.
• El widget es responsivo: usa width="100%" y se adaptará a cualquier ancho de columna.

Qué hace (y qué no hace) el widget

Es completamente interactivo: los visitantes pueden añadir o eliminar zonas horarias, cambiar de vista y navegar entre días. No almacena nada en tu servidor ni instala cookies de terceros en tus lectores.

El widget enlaza de vuelta a meetwhen.dev en la esquina inferior derecha, para que los lectores puedan abrir la herramienta completa si quieren hacer más.

Visita meetwhen.dev/widget para previsualizar y copiar el código de inserción con tu propia combinación de ciudades.