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
3. Copy the code
How to add the clock to your website
- Choose the settings above. The preview and the code update as you change each option.
- 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. - 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:
| Parameter | Values | What it does |
|---|---|---|
tz | IANA identifier, e.g. America/Sao_Paulo | Time zone shown. Invalid values fall back to Brasília. |
theme | light, dark, transparent | Colors of the clock. |
color | hex, e.g. ffffff | Text color for the transparent theme. |
h24 | 1 or 0 | 24-hour or 12-hour (AM/PM) format. |
sec, date, label | 1 or 0 | Show or hide seconds, date and city name. |
city | text (up to 40 characters) | Name displayed under the time. |
lang | pt or en | Language 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.