Generador de Widget de Cuenta Regresiva
Crea hermosos temporizadores de cuenta regresiva para tu sitio web. Personaliza colores, tamaño y comportamiento de expiración.
Este generador de widget de cuenta atrás produce una sola etiqueta <script> que dibuja una cuenta atrás en vivo allí donde la pegues. Ajusta Target Date & Time, los colores, el tamaño y las casillas Days, Hours, Minutes y Seconds: el panel Código de inserción se reescribe mientras escribes. Solo se escriben los ajustes que cambias, así que una cuenta atrás con todos los valores por defecto cabe en una línea: la fuente del script más data-date.
Personalizar
Preajustes
Vista previa en vivo
Código de Inserción
Herramientas populares
Acerca de Generador de Widget de Cuenta Regresiva
La salida es una etiqueta script que carga countdown.min.js desde este sitio y lleva tus ajustes como atributos data-. Cuando la página lo ejecuta, el script inserta la cuenta atrás justo después de la propia etiqueta, así que la posición del fragmento en tu HTML es la posición del widget. Desde esta página no se sube nada: el código se monta en tu navegador y la vista previa de arriba avanza cada segundo, de modo que ves el resultado real antes de copiar.
Cada control corresponde a un atributo y solo se emiten los valores distintos del predeterminado. Target Date & Time pasa a data-date, Title a data-title, los tres campos de color a data-bg, data-color y data-accent, el tamaño a data-size, y las cuatro casillas de unidades a data-show-days, data-show-hours, data-show-minutes y data-show-seconds cuando las desmarcas. El separador escribe data-separator; Mostrar etiquetas y Mostrar marca escriben data-labels="false" y data-branding="false" al desactivarlos. On Expiry elige entre mostrar tu mensaje, redirigir a una URL u ocultar el widget.
Conviene conocer dos comportamientos antes de publicar. El campo de fecha no lleva zona horaria y el widget pasa la cadena tal cual al constructor Date del navegador, que lee una fecha y hora sin desfase como hora local; la cuenta atrás termina, por tanto, a esa hora de reloj en la zona de cada visitante, no en un instante único para todos. Además, las etiquetas de unidades del widget son palabras inglesas fijas —Days, Hours, Minutes, Seconds—, así que en un sitio que no esté en inglés desmarca Mostrar etiquetas y pon tu propia redacción en Title.
Los seis preajustes cambian solo los tres colores: Dark es #1f2937 con blanco y acento #60a5fa; Light es #f9fafb con texto #111827 y acento #2563eb; Neon, Fire, Ocean y Minimal siguen el mismo patrón. Dejar activado Mostrar marca añade un enlace pequeño de vuelta a esta página bajo el reloj. El widget necesita JavaScript y acceso a este sitio para cargar el script, así que no se verá en un correo ni en un lector de feeds.
Casos de uso
Cómo usar
Pon en Target Date & Time el momento en que la cuenta atrás debe llegar a cero; el campo viene relleno con medianoche dentro de siete días.
Escribe un Title si quieres una línea sobre los dígitos y ajusta Background, Text Color y Accent Color, o pulsa uno de los preajustes Dark, Light, Neon, Fire, Ocean y Minimal.
Elige el tamaño, un separador y desmarca las unidades Days, Hours, Minutes y Seconds que no necesites, además de Mostrar etiquetas y Mostrar marca.
Elige On Expiry: Show Message con tu propio Expiry Message, Redirect URL con una dirección completa, u Hide Widget.
Comprueba la vista previa en vivo, que avanza cada segundo con exactamente los colores y las unidades que has configurado.
Pulsa Copiar en el panel Código de inserción y pega la etiqueta script en tu página, donde deba aparecer la cuenta atrás.
Consejos Pro
- Cambia un ajuste y aparece en el código; déjalo y no aparece. Si tu fragmento parece sospechosamente corto, es por eso: cada atributo que no ves está en su valor por defecto, y añadirlo a mano no cambia nada.
- Target Date & Time no lleva zona horaria. El widget pasa la cadena al constructor Date del navegador, que la lee como hora local: un plazo a las 23:59 termina a las 23:59 en casa de cada visitante. Escribe la zona en Title si eso importa.
- Las etiquetas Days, Hours, Minutes y Seconds del widget son inglés fijo. En un sitio en otro idioma, desmarca Mostrar etiquetas y lleva el significado al Title, o el reloj mezclará dos idiomas.
- La cuenta atrás aparece exactamente donde está la etiqueta script, porque el script se inserta como su propio hermano siguiente. Pega la etiqueta dentro del contenedor que quieras, nunca en el head.
- Redirect URL solo se dispara con una dirección que empiece por http://, https:// o una barra. Un dominio escrito sin esquema se ignora y el widget no hace nada al llegar a cero.
Solución de problemas
No aparece nada en mi página después de pegar el código.
Tres causas habituales: la plataforma eliminó la etiqueta script, JavaScript está desactivado, o el navegador no pudo cargar countdown.min.js desde este sitio. Busca la etiqueta en el código fuente y abre la consola del navegador para ver si hay una petición bloqueada o fallida de ese archivo.
La cuenta atrás termina a la hora equivocada para visitantes de otros países.
Es el diseño previsto. La fecha no lleva zona horaria y el widget la lee como hora local, así que termina a la misma hora de reloj en cada zona. Si todos deben verla acabar a la vez, indica la zona en el Title para que puedan hacer la conversión.
Los dígitos dicen Days y Hours pero mi sitio no está en inglés.
Las etiquetas de unidades del widget son palabras inglesas fijas y no se pueden traducir desde esta página. Desmarca Mostrar etiquetas para quitarlas y pon la redacción que quieras en Title, que es texto tuyo.
Poner Redirect URL no hace nada al llegar a cero.
El widget solo sigue una dirección que empiece por http://, https:// o una barra, y además On Expiry tiene que estar en Redirect URL. Vuelve a escribir la dirección con su esquema y comprueba que el código incluye data-expiry y data-expiry-url.
Preguntas frecuentes
Ajusta Target Date & Time, elige los colores y las unidades que quieras mostrar, pulsa Copiar en el panel Código de inserción y pega la etiqueta script de una línea en el HTML de tu página, donde quieras el reloj. No hay nada que instalar ni cuenta alguna: el widget es un script pequeño alojado en este sitio y tus ajustes viajan en la propia etiqueta.
Sí. Sin registro, sin clave y sin plan de pago, y la etiqueta generada funciona en cualquier sitio que permita pegar HTML. Mostrar marca añade un enlace pequeño de vuelta a esta página bajo el reloj; al desmarcarlo el enlace desaparece y el widget sigue funcionando igual.
Inmediatamente después de la etiqueta script. El script del widget inserta su propio contenedor como hermano siguiente de la etiqueta, así que la posición del fragmento en el HTML es la del widget. Coloca la etiqueta dentro de la sección, columna o banner que quieras, y nunca en el head.
El widget es HTML y JavaScript, así que se ve en el navegador móvil de cualquier teléfono que visite tu página, y la caja reparte sus unidades cuando la pantalla es estrecha. No es un widget de pantalla de inicio de Android o iOS: esos los crea el sistema operativo y no se pueden hacer desde una página web.
Lo que diga On Expiry. Show Message sustituye los dígitos por el texto de Expiry Message, que empieza siendo «Time's up!». Redirect URL lleva a la visita a la dirección que hayas puesto, siempre que empiece por http://, https:// o una barra. Hide Widget quita toda la caja de la página.
La del visitante. El campo de fecha no lleva zona y el widget pasa la cadena al constructor Date del navegador, que trata una fecha y hora sin desfase como hora local. Un plazo fijado a las 20:00 termina a las 20:00 en Madrid y a las 20:00 en Nueva York, con seis horas de diferencia.
Sí, con tres campos: Background, Text Color y Accent Color, cada uno con muestra de color y casilla hexadecimal. El acento colorea los dígitos. Seis preajustes fijan los tres de golpe —Dark, Light, Neon, Fire, Ocean y Minimal— y puedes partir de uno y luego retocar un solo campo.
No. El generador produce solo la versión con script, porque una cuenta atrás tiene que actualizarse cada segundo y eso exige JavaScript. Si tu plataforma bloquea scripts externos, busca un bloque de HTML personalizado que los permita, o aloja la cuenta atrás en una página que controles.
Porque la fecha de destino está realmente así de lejos: la cifra de días no tiene tope. Revisa Target Date & Time; una errata en el año es la causa habitual. Si el horizonte largo es intencionado, desmarca Seconds y Minutes para dejar solo las unidades que cambian de forma visible.
No. Los clientes de correo y los lectores de feeds eliminan los scripts, así que la etiqueta no hace nada ahí. Las cuentas atrás en correo suelen ser imágenes animadas generadas en un servidor en cada apertura; este widget es un script de navegador y necesita una página real y acceso a este sitio.