Crear un CountTo (cuenta atrás hacia una fecha)
Information
Los temporizadores CountTo se basan en una fecha/hora objetivo.
Cuentan de forma continua hasta el momento definido y no tienen estados de
inicio/pausa como los temporizadores de duración.
¿Qué es un temporizador CountTo?
Un temporizador CountTo muestra el tiempo restante hasta una fecha/hora concreta (por ejemplo, Año Nuevo, inicio de un evento, lanzamiento de un producto). En cada “tick”, calcula el tiempo restante entre “ahora” y la hora objetivo.
- Tipo: Fecha/hora objetivo (ISO 8601 en UTC)
- Funcionamiento: Continuo, sin start/pause/reset
- Uso: Eventos, lanzamientos, fechas límite
Information
A diferencia de los temporizadores Countdown (duración), los CountTo
no se pueden pausar ni iniciar. Siempre “viven” respecto a la fecha objetivo
definida.
Crear tu primer CountTo
Sigue estos pasos para crear un CountTo en el editor:
- Abre el editor
- Elige el tipo “CountTo”
- Define la fecha y la hora objetivo (formato ISO 8601)
- Personaliza el diseño (colores, fuentes, distribución)
- Previsualiza y guarda si es necesario
Tip
Ponle un nombre descriptivo a tu temporizador (por ejemplo “Año Nuevo
2025") para encontrarlo fácilmente más tarde. También puedes ocultar el título
con el interruptor „Mostrar título" si solo deseas mostrar los números de la
cuenta regresiva.
Buenas prácticas de fecha/hora
Para una sincronización fiable entre dispositivos y zonas horarias:
- Almacena la fecha objetivo en UTC ISO 8601 (ej.
2025-12-31T22:59:59.000Z) - Muestra localmente según el idioma y la zona del usuario cuando corresponda
- Evita cadenas GMT ambiguas
Information
Los temporizadores Premium utilizan marcas de tiempo del servidor
(Firebase) para asegurar una sincronización sin deriva entre el editor y el
renderer.
Integración en streaming (OBS, Streamlabs, etc.)
El renderer se puede integrar como “Browser Source”. El CountTo actualizará de forma continua el tiempo restante:
- Añade la URL de visualización del temporizador como fuente navegador
- Ajusta tamaño y resolución para un render nítido
- El renderer es “solo lectura”: la visualización se actualiza automáticamente
Tip
Mantén el editor abierto en una pantalla o dispositivo secundario para
ajustar la fecha objetivo si cambia la hora del evento. La actualización
es instantánea en el renderer.
Ajustar la fecha objetivo en directo
Si cambia la hora de tu evento:
- Abre tu temporizador en el editor
- Modifica la fecha/hora objetivo
- Los cambios se aplican de inmediato en todas las integraciones (OBS, sitio web)
Warning
Verifica siempre que la nueva fecha/hora corresponde a la zona
horaria correcta. Un error de zona puede causar un desfase inesperado en
pantalla.
Personalizar el diseño
Puedes adaptar la apariencia del temporizador:
- Colores, fuentes, tamaños
- Formatos de visualización (días, horas, minutos, segundos)
- Distribución (alineación, espaciado, estilos)
Tip
Uniforma el estilo con tu identidad de marca (branding), especialmente
para la visualización en tu sitio o en pantalla durante el stream.
Premium: guardar y gestionar tus temporizadores
Con una suscripción Premium, puedes:
- Guardar temporizadores CountTo con una URL de visualización estable
- Modificarlos sin cambiar el embed (sitio/OBS)
- Gestionarlos desde un panel de control (dashboard)
Information
Los temporizadores Free suelen generar una nueva URL tras una
modificación. En Premium, la URL se mantiene: integras una vez y tus cambios
se aplican automáticamente.
Casos de uso frecuentes
- Eventos programados (conciertos, streams especiales, webinars)
- Lanzamientos de productos o actualizaciones
- Periodos de venta con fecha límite
- Cuenta atrás hasta una fecha de cierre (ej. fin de año fiscal)
Resolución de problemas rápida
- La hora mostrada no coincide: verifica la zona y el formato ISO 8601 (UTC)
- La visualización no avanza: recarga la fuente navegador; comprueba conectividad
- Desfase en streaming: confirma la URL correcta y la escena activa en OBS
Próximos pasos
- Personalizar el diseño – Ajusta colores, fuentes y distribución
- Vista previa vs. Renderer – Entiende la diferencia entre previsualización y visualización final
- Free vs. Premium – Compara funcionalidades y ventajas