Three widgets, one sentence to set them
The maker above works like the other tools on Clooock: a sentence with a few words in frames. Tap a word to change it, and the preview under the sentence updates on the spot. What you see in the preview is the real widget, the same page your visitors will load.
- Clock: the time in one of 168 cities, or the local time of each visitor. Digits in 12-hour or 24-hour format, or a round face with hands. Seconds are optional.
- Countdown: days, hours, minutes and seconds until a date and time, with a title above and a message that replaces the numbers at zero.
- Timer: a set duration that starts with a tap (or on its own), pauses, resets and rings at the end with one of five sounds.
How the embed code works
Code for your site copies a small block of HTML: an iframe that loads the widget from clooock.com, and a plain text link to Clooock just below it. The iframe is lazy-loaded, so it does not slow down the top of your page. The link is a normal, visible link with our name as its text. It helps people find the tool, and if you would rather not show it, delete the line that starts with <a: the widget keeps working exactly the same.
Link for Notion copies only the address of the widget. Notion, OBS and most site builders accept a bare address in their embed tools, and every setting is written in it, so the address alone is enough.
Every setting lives in that address. If you are comfortable editing it by hand, here is what each part means:
| Part | What it sets | Example |
|---|---|---|
| tz | Time zone of the clock or of the countdown date (IANA name). Leave it out to use each visitor’s own time. | tz=America/Chicago |
| t | Label above the clock, or title of the countdown | t=Chicago office |
| h, s, v | Clock: 12 or 24-hour format, seconds off (s=0), hands (v=a) | h=24&s=0 |
| to, u, m | Countdown: target date and time, units, message at zero | to=2027-06-12T18:00&u=dhm |
| d, a, snd | Timer: duration in seconds, start on its own (a=1), sound | d=900&a=1&snd=chime |
| c, f | Background and text colors as hex codes, c=none for no background | c=0A7E8C&f=FFFFFF |
| l | Language of the labels: en, fr, es, de, it or pt | l=en |
The c parameter takes any color, not only the six in the sentence: replace the code after c= with the hex code of your brand color and keep the text white (f=FFFFFF) or dark (f=111111) so it stays readable.
Pick the right size
The widget fills whatever box you give it. The digits grow or shrink with the frame, from a small 200 by 100 pixel corner to the full width of a page. On very small frames, the labels step aside and only the numbers stay. The code sets a width of 100% and a height that suits each widget, which you can change in the height attribute:
| Widget | Height in the code | Good for |
|---|---|---|
| Clock with digits | 180 px | A header, a sidebar, a contact page |
| Clock with hands | 280 px | A sidebar or a square spot |
| Countdown | 200 px, 230 px with a title | An event page, a launch page, a banner |
| Timer | 220 px | A recipe, a class page, a workout |
Where to paste it
Any page that accepts HTML can show the widget. Each platform names the tool a little differently, so we wrote a short guide for the most common ones: WordPress, Wix, Squarespace, Shopify, Google Sites and Notion. Streamers can also load it in OBS as a browser source, with a transparent background: see the OBS guide.
Time zones and daylight saving time
The clock and the countdown use the time zone rules built into your visitor’s browser, the same database that phones and computers rely on. When Chicago or Paris switches to summer time, the widget follows without any change on your side. For a countdown, you choose who the date belongs to: your own time zone, so that it reaches zero at the same instant everywhere (a product launch, a live stream), or each visitor’s time, so that everyone gets their own midnight (New Year’s Eve).
Light and private
The widget page has no ads, no cookies and no tracking, and it does not read anything from the page around it. It weighs about 60 KB with its two fonts, and much less once they are in the browser cache. Sounds are generated on the spot, so there is no audio file to download. For the full tools, with more options, see the world clock, the countdown to a date and the online timer.