Clock widget for your website

20:36:31
Free, no sign-up, no cookiesTime zone, theme, size and 12h/24h

Build a clock showing the exact time in Brasília (or any city in the world), preview it live and copy the code to paste into your website, blog or online store. It takes less than a minute.

1. Set up the clock

2. Preview it

Live preview (this is the actual clock your site will load)

3. Copy the code

Please note: the clock includes a small "Brasília Time" link under the time. It is what keeps the widget free and it must not be removed, hidden or covered. By using the code you agree to keep it visible.

How to add the clock to your website

  1. Choose the settings above. The preview and the code update as you change each option.
  2. Click "Copy code". The code is a single <iframe> tag, so there is nothing to install and no script to load on your own page.
  3. Paste it where the clock should appear: a sidebar, header, footer or any page. The steps for the most common platforms are below.

WordPress

In the block editor, add a Custom HTML block and paste the code. For a sidebar or footer, go to Appearance > Widgets and add a Custom HTML widget (on block themes use Appearance > Editor). In the classic editor, switch to the Text tab before pasting, otherwise the visual editor may strip the tag.

Wix, Squarespace, Blogger and Google Sites

Wix: Add Elements > Embed Code > Embed HTML, choose "Code" and paste. Squarespace: add a Code block (untick "Display source"). Blogger: Layout > Add a Gadget > HTML/JavaScript. Google Sites: Insert > Embed > Embed code. Free plans of some builders restrict custom HTML, so check that yours allows iframes.

Plain HTML, Shopify and other platforms

Paste the tag anywhere inside <body>. In Shopify use a Custom Liquid section; in online stores and CMS tools look for an "HTML", "code" or "embed" block.

Make the clock responsive

The clock resizes itself to fill the iframe, so the trick is to let the iframe resize. Put it inside a container with a maximum width and set the width to 100%:

<div style="max-width:320px">
  <iframe src="..." style="border:0;width:100%;height:100px" title="Clock"></iframe>
</div>

Keep the height proportional to the width: about 40% of the width with date and city name, about 25% without them. If the text looks cramped, increase the height; if there is too much empty space, reduce it. Avoid heights below 60 px, where the line with the date becomes hard to read.

Customize through the address

Everything is controlled by parameters in the src address, so you can also edit the code by hand:

ParameterValuesWhat it does
tzIANA identifier, e.g. America/Sao_PauloTime zone shown. Invalid values fall back to Brasília.
themelight, dark, transparentColors of the clock.
colorhex, e.g. ffffffText color for the transparent theme.
h241 or 024-hour or 12-hour (AM/PM) format.
sec, date, label1 or 0Show or hide seconds, date and city name.
citytext (up to 40 characters)Name displayed under the time.
langpt or enLanguage of the date and of the attribution link.

Time zone you can trust

The clock does not trust the visitor's computer. On load it asks our server for the current time and uses it as the reference, so a device with a wrong clock still shows the right time. The selected time zone is applied by the browser using the official IANA database, which also covers daylight saving time. If you need to compare cities, see the world clock, and to understand the offsets read our time zones guide. For a full-screen clock for your own screen, use the online clock.

Attribution link and privacy

The link is part of the deal. The widget is free because it carries a small "Brasília Time" link that points to this site. It is a normal link that helps visitors find an accurate time reference, and it must stay visible. Hiding it, making it transparent, shrinking it to unreadable size or covering it with other elements is not allowed.

No cookies, no tracking. The widget page sets no cookies, runs no ads and loads no analytics. It is not indexed by search engines. The only thing that happens is the usual request your visitor's browser makes to load the iframe (and one tiny request to read the server time). We do not use it to build profiles.

Frequently asked questions

Is the website clock widget free?

Yes. There is no fee and no sign-up. The only condition is to keep the small "Brasília Time" link that appears under the clock.

Can I remove the link shown in the clock?

No. The link to Brasília Time is part of the widget and is what pays for the free use. If you hide or cover it with CSS or any other trick, you should not use the clock.

Does it show the right time even if the visitor's computer clock is wrong?

Yes. The clock syncs with our server time and only uses the device clock to count the seconds. The time zone you choose applies to every visitor, wherever they are.

Does it work on WordPress, Wix, Blogger and Google Sites?

It works anywhere that accepts HTML or an iframe: the WordPress "Custom HTML" block, the "Embed code" element in Wix and Squarespace, Blogger's HTML widget and Google Sites "Embed".

Does the clock collect data or use cookies?

No. The clock page has no cookies, ads or analytics, and does not identify the visitor. It only receives the normal request to load the iframe, like any external image or font.

Does the clock adjust itself for daylight saving time?

Yes, in countries that observe daylight saving time. The clock uses the time zone identifier (for example, Europe/London) and the browser applies the current rules, so you never have to update anything.