Tre widget, una frase per regolarli
Il generatore qui sopra funziona come gli altri strumenti di Clooock: una frase con alcune parole dentro dei riquadri. Tocca una parola per cambiarla e l’anteprima si aggiorna subito. Quello che vedi nell’anteprima è il widget vero, la stessa pagina che caricheranno i tuoi visitatori.
- Orologio: l’ora di una delle 168 città disponibili, oppure l’ora locale di ogni visitatore. In cifre a 24 o 12 ore, o con quadrante e lancette, con o senza secondi.
- Conto alla rovescia: giorni, ore, minuti e secondi fino a una data e un’ora, con un titolo sopra e un messaggio che prende il posto dei numeri allo zero.
- Timer: una durata che parte con un tocco (o da sola), va in pausa, si azzera e suona alla fine con uno di cinque suoni.
Come funziona il codice
Codice per il tuo sito copia un piccolo blocco HTML: un iframe che carica il widget da clooock.com e, subito sotto, un link testuale a Clooock. L’iframe si carica in differita (lazy loading), quindi non rallenta la parte alta della pagina. Il link è un link normale e visibile, con il nostro nome come testo. Aiuta altre persone a trovare lo strumento; se preferisci non mostrarlo, cancella la riga che inizia con <a e il widget continua a funzionare allo stesso modo.
Link per Notion copia solo l’indirizzo del widget. Notion, OBS e la maggior parte dei costruttori di siti accettano un semplice indirizzo nei loro strumenti di incorporamento, e tutte le impostazioni sono scritte lì: l’indirizzo basta.
Tutte le impostazioni vivono in quell’indirizzo. Se ti va di modificarlo a mano, ecco cosa significa ogni parte:
| Parte | Cosa regola | Esempio |
|---|---|---|
| tz | Fuso orario dell’orologio o della data del conto alla rovescia (nome IANA). Senza tz vale l’ora di ogni visitatore. | tz=Europe/Zurich |
| t | Nome sopra l’orologio, o titolo del conto alla rovescia | t=Sede di Lugano |
| h, s, v | Orologio: formato 12 o 24 ore, senza secondi (s=0), lancette (v=a) | h=12&s=0 |
| to, u, m | Conto alla rovescia: data e ora, unità, messaggio allo zero | to=2027-06-12T18:00&u=dhm |
| d, a, snd | Timer: durata in secondi, partenza automatica (a=1), suono | d=900&a=1&snd=chime |
| c, f | Colori di sfondo e del testo in esadecimale, c=none per nessuno sfondo | c=0A7E8C&f=FFFFFF |
| l | Lingua delle scritte: en, fr, es, de, it o pt | l=it |
Il parametro c accetta qualsiasi colore, non solo i sei della frase: sostituisci il codice dopo c= con quello del colore del tuo marchio e lascia il testo bianco (f=FFFFFF) o scuro (f=111111) perché resti leggibile.
La misura giusta
Il widget riempie il riquadro che gli dai. Le cifre crescono o si rimpiccioliscono con lui, da un angolo di 200 × 100 pixel a tutta la larghezza di una pagina. Nei riquadri molto piccoli le scritte si fanno da parte e restano solo i numeri. Il codice imposta una larghezza del 100 % e un’altezza adatta a ogni widget, che puoi cambiare nell’attributo height:
| Widget | Altezza nel codice | Ideale per |
|---|---|---|
| Orologio digitale | 180 px | Un’intestazione, una barra laterale, una pagina contatti |
| Orologio con lancette | 280 px | Una barra laterale o uno spazio quadrato |
| Conto alla rovescia | 200 px, 230 px con titolo | Una pagina evento o lancio, un banner |
| Timer | 220 px | Una ricetta, una pagina di lezione, un allenamento |
Dove incollarlo
Qualsiasi pagina che accetta HTML può mostrare il widget. Ogni piattaforma chiama la funzione in modo un po’ diverso, quindi abbiamo scritto una guida breve per le più usate: WordPress, Wix, Squarespace, Shopify, Google Sites e Notion. Chi fa dirette può caricarlo anche in OBS come sorgente browser, con lo sfondo trasparente: vedi la guida OBS.
Fusi orari e cambio dell’ora
Orologio e conto alla rovescia usano le regole dei fusi orari del browser del visitatore, lo stesso database di telefoni e computer. Quando Roma o New York passano all’ora legale, il widget segue senza che tu debba toccare nulla. Per un conto alla rovescia scegli a chi appartiene la data: al tuo fuso, perché arrivi a zero nello stesso istante in tutto il mondo (un lancio, una diretta), oppure all’ora di ogni visitatore, perché ognuno abbia la sua mezzanotte (Capodanno).
Leggero e rispettoso
La pagina del widget non ha pubblicità, cookie o statistiche, e non legge nulla della pagina che la contiene. Pesa circa 60 KB con i suoi due caratteri, molto meno quando sono già nella cache del browser. I suoni vengono generati sul momento, senza file audio. Per gli strumenti completi, con più opzioni, ci sono l’orologio mondiale, il conto alla rovescia per una data e il timer online.