Tres widgets y una frase para ajustarlos
El generador de arriba funciona como las demás herramientas de Clooock: una frase con algunas palabras dentro de recuadros. Toca una palabra para cambiarla y la vista previa se actualiza al momento. Lo que ves en la vista previa es el widget real, la misma página que cargarán tus visitantes.
- Reloj: la hora de una de las 168 ciudades disponibles, o la hora local de cada visitante. En dígitos de 24 o de 12 horas, o en una esfera con agujas, con o sin segundos.
- Cuenta atrás (o cuenta regresiva): días, horas, minutos y segundos hasta una fecha y una hora, con un título encima y un mensaje que sustituye a los números al llegar a cero.
- Temporizador: una duración que arranca con un toque (o sola), se pausa, se reinicia y suena al final con uno de cinco sonidos.
Cómo funciona el código
Código para tu web copia un pequeño bloque HTML: un iframe que carga el widget desde clooock.com y, justo debajo, un enlace de texto a Clooock. El iframe se carga en diferido (lazy loading), así que no frena la parte alta de tu página. El enlace es un enlace normal y visible, con nuestro nombre como texto. Ayuda a que otras personas encuentren la herramienta; si prefieres no mostrarlo, borra la línea que empieza por <a y el widget seguirá funcionando igual.
Enlace para Notion copia solo la dirección del widget. Notion, OBS y la mayoría de los creadores de webs aceptan una dirección sin más en sus herramientas de inserción, y todos los ajustes van escritos en ella: con la dirección basta.
Todos los ajustes viven en esa dirección. Si te apetece tocarla a mano, esto es lo que significa cada parte:
| Parte | Qué ajusta | Ejemplo |
|---|---|---|
| tz | Zona horaria del reloj o de la fecha de la cuenta atrás (nombre IANA). Sin tz, se usa la hora de cada visitante. | tz=America/Bogota |
| t | Nombre sobre el reloj, o título de la cuenta atrás | t=Oficina de Bogotá |
| h, s, v | Reloj: formato de 12 o 24 horas, sin segundos (s=0), agujas (v=a) | h=12&s=0 |
| to, u, m | Cuenta atrás: fecha y hora, unidades, mensaje al llegar a cero | to=2027-06-12T18:00&u=dhm |
| d, a, snd | Temporizador: duración en segundos, arranque solo (a=1), sonido | d=900&a=1&snd=chime |
| c, f | Colores de fondo y de texto en hexadecimal, c=none para quitar el fondo | c=0A7E8C&f=FFFFFF |
| l | Idioma de los textos: en, fr, es, de, it o pt | l=es |
El parámetro c admite cualquier color, no solo los seis de la frase: sustituye el código que va tras c= por el del color de tu marca y deja el texto blanco (f=FFFFFF) u oscuro (f=111111) para que se lea bien.
Elige el tamaño
El widget ocupa todo el recuadro que le des. Los números crecen o encogen con él, desde una esquina de 200 × 100 píxeles hasta todo el ancho de una página. En recuadros muy pequeños, los textos se apartan y solo quedan los números. El código fija un ancho del 100 % y una altura pensada para cada widget, que puedes cambiar en el atributo height:
| Widget | Altura en el código | Ideal para |
|---|---|---|
| Reloj digital | 180 px | Una cabecera, una barra lateral, una página de contacto |
| Reloj de agujas | 280 px | Una barra lateral o un hueco cuadrado |
| Cuenta atrás | 200 px, 230 px con título | Una página de evento o de lanzamiento, un banner |
| Temporizador | 220 px | Una receta, una página de clase, un entrenamiento |
Dónde pegarlo
Cualquier página que acepte HTML puede mostrar el widget. Cada plataforma llama a la herramienta de forma un poco distinta, así que hemos escrito una guía corta para las más habituales: WordPress, Wix, Squarespace, Shopify, Google Sites y Notion. Si haces directos, también puedes cargarlo en OBS como fuente de navegador, con el fondo transparente: mira la guía de OBS.
Zonas horarias y cambio de hora
El reloj y la cuenta atrás usan las reglas de zonas horarias que trae el navegador del visitante, la misma base de datos de móviles y ordenadores. Cuando Madrid o Ciudad de México cambian de hora, el widget lo sigue sin que tengas que tocar nada. En una cuenta atrás eliges a quién pertenece la fecha: a tu zona horaria, para que llegue a cero en el mismo instante en todo el mundo (un lanzamiento, un directo), o a la hora de cada visitante, para que cada uno tenga su propia medianoche (Nochevieja).
Ligero y respetuoso
La página del widget no tiene anuncios, ni cookies, ni analítica, y no lee nada de la página que la rodea. Pesa unos 60 KB con sus dos tipografías, y mucho menos cuando ya están en la caché del navegador. Los sonidos se generan al momento, sin ningún archivo de audio. Si buscas las herramientas completas, con más opciones, tienes el reloj mundial, la cuenta atrás hasta una fecha y el temporizador online.