Generador de widget de cuenta regresiva
Diseña una cuenta regresiva para un lanzamiento, una oferta, una boda o un evento, mira la vista previa en directo y copia un fragmento HTML autónomo para tu web o un iframe y un enlace para Notion y Google Sites. Todos los visitantes ven el mismo tiempo restante, estén donde estén.
Última actualización:
Vista previa en directo
Cómo usar Generador de widget de cuenta regresiva
- Configura el evento: escribe un título, elige la fecha, la hora y la zona horaria del evento, o usa un objetivo rápido como Año Nuevo o En 7 días.
- Elige un diseño: cajas, fichas abatibles, minimalista o una línea, qué unidades mostrar, el tamaño, las etiquetas y qué pasa al llegar a cero.
- Dale estilo: haz clic en un tema de color o elige tus propios colores, fuente y radio de las esquinas. La vista previa se actualiza al instante.
- Elige un tipo de inserción: código HTML + JS para tu web, un iframe para constructores que bloquean scripts, o la pestaña Enlace para Notion.
- Copia y pega: pulsa Copiar código y pégalo en un bloque de HTML personalizado o de inserción, o descarga una página .html lista para usar.
¿Qué tipo de inserción debo usar?
| Dónde quieres la cuenta regresiva | Usa | Cómo pegarlo |
|---|---|---|
| WordPress (editor de bloques) | Código HTML + JS | Añade un bloque HTML personalizado y pega. En WordPress.com, los scripts requieren un plan que los permita; si no, usa el iframe. |
| Squarespace | Código HTML + JS | Añade un bloque Código, deja el modo en HTML y pega. |
| Wix | Código HTML + JS | Añade Insertar código > Insertar HTML, elige Código y pega; después ajusta el tamaño del cuadro. |
| Webflow | Código HTML + JS | Arrastra un elemento Embed a la página y pega. |
| Shopify | Código HTML + JS | Añade una sección o bloque Custom Liquid en el editor de temas y pega. |
| Google Sites | iframe | Insertar > Insertar > Insertar código, pega el iframe y luego ajusta la altura del marco. |
| Notion | Enlace | Escribe /embed, pega el enlace y elige Embed link. |
| Boletines por correo electrónico | No compatible | Las apps de correo bloquean los scripts y los iframes; enlaza a una página que muestre la cuenta regresiva. |
Cómo se calcula la cuenta regresiva
Cuando pulsas un botón o cambias un ajuste, el generador convierte tu fecha y hora desde la zona horaria elegida en un único momento en UTC (una marca de tiempo Unix en milisegundos), usando la base de datos de zonas horarias integrada en tu navegador. Ese número se escribe en el código. Cada segundo, el widget le resta la hora actual del visitante y divide el resultado:
días = ⌊s ÷ 86,400⌋, horas = ⌊(s mod 86,400) ÷ 3,600⌋, minutos = ⌊(s mod 3,600) ÷ 60⌋, segundos = s mod 60, donde s es el número de segundos restantes, redondeado hacia arriba para que la pantalla llegue a 00 exactamente en el momento objetivo.
Como el objetivo se guarda como un momento universal, no hay confusión con la "hora local": un evento a las 8:00 PM en Nueva York termina a las 5:00 PM para un visitante en Los Ángeles y a la 1:00 AM del día siguiente en Londres (salvo en las semanas en que las fechas del horario de verano de EE. UU. y el Reino Unido no coinciden).
Consejos para una cuenta regresiva que convierta
- Di qué pasa al llegar a cero. Un título como "El precio de preventa termina en" explica a los visitantes por qué importa el temporizador.
- Quita los segundos en cuentas regresivas largas de semanas o meses; el tictac distrae menos de tu contenido.
- Usa el fondo transparente para integrar el widget en una sección de color y compruébalo con los fondos de vista previa Oscura y Cuadrícula.
- Sé honesto. No reinicies un temporizador de oferta para cada visitante; este widget cuenta hasta un momento real, lo que genera confianza.
- ¿Varios temporizadores en una página? Genera cada uno por separado: cada fragmento tiene su propio ID, así que nunca interfieren.
Preguntas frecuentes
¿Cómo añado una cuenta regresiva a Notion?
Abre la pestaña Enlace (Notion) y pulsa Copiar enlace. En Notion, escribe /embed, pega el enlace y elige Embed link; después arrastra el borde inferior del bloque para ajustar el widget. Toda tu configuración, incluidas la fecha y los colores, se guarda dentro del enlace, así que no hace falta guardar nada en un servidor.
¿Los visitantes de otras zonas horarias verán la hora correcta?
Sí. La cuenta regresiva está fijada a un momento exacto: la fecha y la hora que introduces en la zona horaria del evento se convierten en una marca de tiempo universal al generar el código. Un visitante en Tokio y otro en Nueva York ven el mismo tiempo restante, y los cambios de horario de verano ya están tenidos en cuenta.
¿El fragmento HTML necesita archivos o bibliotecas externos?
No. El fragmento es un pequeño bloque de HTML, CSS y JavaScript sencillo (normalmente unos 3 KB) sin scripts externos, fuentes, cookies ni seguimiento. Su CSS está limitado a un ID único, así que no cambiará el resto de tu página, y puedes poner varias cuentas regresivas distintas en una misma página.
¿Dónde puedo pegar el código?
En cualquier lugar que acepte HTML personalizado con scripts: un bloque HTML personalizado de WordPress, un bloque de código de Squarespace, Insertar HTML de Wix, un elemento Embed de Webflow, Custom Liquid de Shopify o una página web escrita a mano. Si una plataforma elimina los scripts, usa el código iframe; si solo acepta una URL, usa el enlace.
¿Qué pasa cuando la cuenta regresiva llega a cero?
Tú eliges: sustituir los números por tu mensaje final, seguir mostrando 00 con el mensaje debajo, o pasar a contar hacia arriba para que el widget muestre cuánto tiempo hace que empezó el evento, algo práctico para un aniversario o un contador de "tiempo desde el lanzamiento".
¿Puedo mostrar solo los días, o solo horas y minutos?
Sí. Desmarca las unidades que no quieras. Las unidades ocultas se suman a la siguiente visible, así que con los días desactivados una cuenta regresiva de 2 días y 3 horas muestra 51 horas. También puedes cambiar el nombre de las etiquetas, por ejemplo a otro idioma, o borrar una etiqueta para ocultarla.
¿La cuenta regresiva depende del reloj del visitante?
El fragmento compara el momento objetivo con el reloj del dispositivo del visitante, que los teléfonos y computadoras mantienen sincronizado automáticamente. Si el reloj de un dispositivo está mal ajustado a mano, su cuenta regresiva tendrá el mismo desfase; se corrige sola en cuanto el reloj está bien.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.