Drei Widgets, ein Satz zum Einstellen
Der Generator oben funktioniert wie die anderen Tools auf Clooock: ein Satz mit ein paar Wörtern in Rahmen. Tippe auf ein Wort, um es zu ändern, und die Vorschau darunter passt sich sofort an. Was du in der Vorschau siehst, ist das echte Widget, genau die Seite, die deine Besucher laden.
- Uhr: die Uhrzeit in einer von 168 Städten oder die Ortszeit jedes Besuchers. Als Digitaluhr im 24- oder 12-Stunden-Format oder als Zeigeruhr, wahlweise mit Sekunden.
- Countdown: Tage, Stunden, Minuten und Sekunden bis zu einem Datum und einer Uhrzeit, mit einem Titel darüber und einer Nachricht, die bei null die Zahlen ersetzt.
- Timer: eine feste Dauer, die per Antippen (oder von selbst) startet, pausiert, zurückgesetzt wird und am Ende mit einem von fünf Tönen klingelt.
So funktioniert der Einbettungscode
Code für deine Website kopiert einen kleinen HTML-Block: ein iframe, das das Widget von clooock.com lädt, und direkt darunter einen Textlink zu Clooock. Das iframe wird verzögert geladen (Lazy Loading) und bremst den oberen Teil deiner Seite nicht aus. Der Link ist ein normaler, sichtbarer Link mit unserem Namen als Text. Er hilft anderen, das Tool zu finden. Willst du ihn nicht zeigen, lösche die Zeile, die mit <a beginnt: Das Widget funktioniert genauso weiter.
Link für Notion kopiert nur die Adresse des Widgets. Notion, OBS und die meisten Homepage-Baukästen nehmen in ihren Einbettungsfunktionen eine bloße Adresse an, und alle Einstellungen stehen darin: Die Adresse genügt.
Alle Einstellungen stecken in dieser Adresse. Wenn du sie von Hand anpassen willst, bedeutet jeder Teil Folgendes:
| Teil | Was er einstellt | Beispiel |
|---|---|---|
| tz | Zeitzone der Uhr oder des Countdown-Datums (IANA-Name). Ohne tz gilt die Zeit jedes Besuchers. | tz=Europe/Vienna |
| t | Name über der Uhr oder Titel des Countdowns | t=Büro Wien |
| h, s, v | Uhr: 12- oder 24-Stunden-Format, ohne Sekunden (s=0), Zeiger (v=a) | h=12&s=0 |
| to, u, m | Countdown: Datum und Uhrzeit, Einheiten, Nachricht bei null | to=2027-06-12T18:00&u=dhm |
| d, a, snd | Timer: Dauer in Sekunden, startet von selbst (a=1), Ton | d=900&a=1&snd=chime |
| c, f | Hintergrund- und Textfarbe als Hex-Code, c=none für keinen Hintergrund | c=0A7E8C&f=FFFFFF |
| l | Sprache der Beschriftungen: en, fr, es, de, it oder pt | l=de |
Der Parameter c nimmt jede Farbe an, nicht nur die sechs aus dem Satz: Ersetze den Code nach c= durch den deiner Markenfarbe und lass den Text weiß (f=FFFFFF) oder dunkel (f=111111), damit er lesbar bleibt.
Die richtige Größe
Das Widget füllt jeden Rahmen, den du ihm gibst. Die Ziffern wachsen und schrumpfen mit, von einer kleinen Ecke mit 200 × 100 Pixeln bis zur vollen Seitenbreite. In sehr kleinen Rahmen treten die Beschriftungen zurück, und nur die Zahlen bleiben. Der Code setzt eine Breite von 100 % und eine Höhe, die zum jeweiligen Widget passt. Du kannst sie im Attribut height ändern:
| Widget | Höhe im Code | Passt gut zu |
|---|---|---|
| Digitaluhr | 180 px | Kopfbereich, Seitenleiste, Kontaktseite |
| Zeigeruhr | 280 px | Seitenleiste oder quadratischer Platz |
| Countdown | 200 px, 230 px mit Titel | Event-Seite, Launch-Seite, Banner |
| Timer | 220 px | Rezept, Kursseite, Training |
Wo du es einfügst
Jede Seite, die HTML annimmt, kann das Widget zeigen. Jede Plattform nennt die Funktion etwas anders, deshalb gibt es eine kurze Anleitung für die gängigsten: WordPress, Wix, Squarespace, Shopify, Google Sites und Notion. Streamer können es auch als Browserquelle in OBS laden, mit transparentem Hintergrund: siehe die OBS-Anleitung.
Zeitzonen und Zeitumstellung
Uhr und Countdown nutzen die Zeitzonenregeln im Browser des Besuchers, dieselbe Datenbank, auf die Handys und Computer zurückgreifen. Wenn Berlin oder Wien auf Sommerzeit umstellen, zieht das Widget mit, ohne dass du etwas ändern musst. Beim Countdown legst du fest, wem das Datum gehört: deiner Zeitzone, damit er überall im selben Moment null erreicht (Produktlaunch, Livestream), oder der Zeit jedes Besuchers, damit jeder seine eigene Mitternacht bekommt (Silvester).
Leicht und datensparsam
Die Widget-Seite hat keine Werbung, keine Cookies und kein Tracking, und sie liest nichts von der Seite, in die sie eingebettet ist. Mit ihren beiden Schriften wiegt sie etwa 60 KB, deutlich weniger, sobald diese im Browser-Cache liegen. Die Töne werden direkt erzeugt, eine Audiodatei gibt es nicht. Für die vollständigen Tools mit mehr Optionen gibt es die Weltuhr, den Countdown bis zu einem Datum und den Online-Timer.