How to Add a World Clock to Your Website

A row of clocks showing the time in London, New York and Singapore is one of the oldest devices on the business web, and it is still on the wall of every trading floor for a reason. It communicates reach in a way a sentence does not.

It is also frequently wrong. Clocks on websites drift, break at daylight saving transitions, show a time without saying whose it is, or answer a question nobody asked while ignoring the one every visitor has, which is whether anybody is available right now.

This guide covers both parts: the mechanics of showing time correctly across zones, and the editorial decisions that make a clock useful rather than ornamental. The mechanics matter more than they look, because time is the area where reasonable assumptions are wrong more often than in almost any other part of a website.

Why Clocks Break

Almost every broken clock on the web has the same cause: someone stored a number of hours.

The reasoning seems sound. New York is five hours behind London, so take London time and subtract five. It is true for part of the year and false for the rest, because the two places change their clocks on different dates. For a couple of weeks each spring and autumn the gap is four hours, and any page using the fixed number is confidently wrong.

Countries also change their rules. Governments move their transition dates, adopt or abandon daylight saving, and occasionally shift zone entirely. Any offset written into your page is a fact with an expiry date that nobody will be watching for.

The correct approach is to name the place rather than the difference. Time zones have canonical names, of the kind used in every operating system, and those names carry the rules with them, including their history and future changes. Ask for the current time in a named zone and you get the right answer without knowing anything about that country's politics.

The practical version for a website: never store or calculate offsets yourself. Let the browser format the current moment for a named zone. This is built in, it is free, and it is the single decision that separates a clock that works from one that will embarrass you in March.

Which Times to Show

A wall of clocks looks impressive and communicates very little. Three or four, chosen for a reason, do the job.

• Where you are. The head office, or wherever the people answering the phone sit. This is the one that answers the visitor's actual question.
• Where your customers are. If most enquiries come from two regions, those two.
• Where your team is, for a distributed company. Useful on an about or careers page, where it tells a candidate something real.
• The visitor's own time, which the browser already knows and which makes every other figure comparable.

What not to do is list every office you have ever had, or pick cities because they sound international. A clock showing Tokyo on a site with no connection to Japan is decoration, and readers are quite good at spotting decoration.

Label each one with the city, not with an abbreviation. Several abbreviations mean different things in different countries, and most visitors do not know them anyway. City names are unambiguous and require no explanation.

The Question Behind the Clock

Almost nobody wants to know what time it is in your office. They want to know whether anyone will answer.

That reframing changes what belongs on the page. A row of clocks makes the visitor do arithmetic. A line saying that you are open now, or that you open in three hours, does the arithmetic for them, and it can be generated from the same information.

The strongest version combines the two: a short status line saying whether you are currently available, the local opening hours in the visitor's own time, and the clocks underneath for anyone who wants the detail. It costs the same to build and answers the question instead of presenting the data.

Two rules keep it honest. If you say you are open, someone must actually be there, so the status has to reflect real staffing including holidays. And if you are closed, say when you open next, in their time, rather than leaving a closed sign with no follow up. The wider point about response times as a sales factor is covered in how customer support drives website sales.

Getting the Formatting Right

Time formats are one of the few places where a small ambiguity produces a missed meeting.

• Twelve or twenty four hour. Follow your main audience. For a mixed international audience, the twenty four hour format removes a category of confusion entirely.
• Never write a bare twelve hour time. Nine o'clock without an indicator is two different times, and readers will pick the wrong one at least half the time.
• Write noon and midnight as words. These are the genuinely ambiguous cases in the twelve hour system, and the words are never misread.
• Include the date where zones differ by a day. A meeting time between distant zones without a date is an invitation to be a day out.
• Show the day of the week for anything scheduled. Readers check the day against their own idea of it, and it catches the day boundary error immediately.
• Consider letting the visitor choose. One small toggle, remembered, and the format argument goes away.

For anything you write into text rather than render live, such as an event announcement, state the time in one zone and give the universal time in brackets. It is the only notation that is unambiguous everywhere, and technical readers will thank you.

Time Zones Are Political, Not Geographical

Worth a short section, because it explains why the named zone approach is not merely tidier but necessary.

Zones are set by governments and they change. Countries have adopted and abandoned daylight saving, shifted the dates on which it starts, moved themselves to a neighbour's time for trade reasons, and in at least one case changed by half an hour. Not every offset is a whole number of hours, which quietly breaks code that assumes it is.

Two consequences for anything you build. A zone name such as the continent and city form is stable while the rules underneath it are updated by whoever maintains the data your browser or system uses. And a number of hours written into your page is a snapshot of a political decision that may not survive the year.

This is also why you should be cautious with any list of offsets you find, including one you wrote yourself last year. It was probably right when it was written. The named zone approach is the only one that stays right without anybody watching the news for you.

The practical takeaway is small: store and display zones by name, always, and let the platform resolve them at the moment of display.

Design That Reads at a Glance

A clock is looked at for one second, which puts unusual weight on a few choices.

Digital or analogue. Digital is read faster and works at small sizes. Analogue is decorative and suits a brand where that fits, but it is genuinely harder to read quickly, and it is unusable below a certain size.

Keep the city label bigger than you think. The label is what makes the number mean something, and it is the part usually shrunk to fit.

Consider hiding the seconds. Nobody needs them, and a display that changes every second attracts the eye away from everything else on the page.

Show a day or night indication. A small sun or moon, or a subtle background change, communicates the important part instantly, which is whether it is a reasonable hour to call.

Stack, do not squeeze, on mobile. Four clocks side by side on a phone become unreadable. Two rows of two, or a vertical list, survive.

Reserve the space. A clock that appears after the page loads and pushes the content down is a small but real annoyance. Give it a fixed area from the start.

Where a Clock Earns Its Place

• Contact and support pages. The clearest case. Someone about to call or write wants to know whether it is worth doing now.
• Careers pages for distributed teams. Showing where the team actually sits tells a candidate about overlap hours, which is the thing they are trying to work out.
• Event and webinar pages. Where a time in the wrong zone means an empty seat, and the visitor's own time is the only figure that matters.
• Booking and scheduling pages, where the zone must be stated explicitly beside every slot.
• Internal dashboards and intranets, the original use, and still the best one for a multi city display.
• Sites about markets or broadcasts with fixed opening and airing times in a particular zone.

Where it does not belong: a homepage hero on a local business, a checkout, or anywhere it is doing the job of a decoration. The general test for a utility on a page is whether it answers a question the visitor already had, which is the same standard applied in our roundup of customer engagement tools.

Opening Hours Without Lying

If the clock is there to communicate availability, the opening hours behind it need to be right, and this is where most implementations quietly fail.

• Handle holidays. An automatic open sign on a public holiday is worse than no sign, because it made a promise. Keep a list of closure dates the display respects.
• Handle lunch and split hours, if that is how you work. A single opening and closing time cannot express it.
• Decide what happens near the edges. Ten minutes before closing, "open" is technically true and practically misleading. Consider saying closing soon.
• Say what closed means. If messages sent overnight are answered first thing, say so. That turns a closed sign into a promise rather than a dead end.
• Keep one source of truth. Opening hours usually appear on the contact page, in the footer, in your business listings and now beside a clock. Four copies means at least one is wrong.

None of this is difficult, and all of it is the difference between a status line that builds confidence and one that produces a complaint about a phone nobody answered.

Meetings, Bookings and Deadlines

A clock is display. The moment a time becomes an appointment or a deadline, the stakes rise and a few more rules apply.

• Always name the zone beside a specific time. A slot listed as three o'clock with nothing else is a support ticket waiting to happen.
• Convert for the visitor rather than asking them to. Show the slot in their local time as the primary figure, with yours in brackets. They are choosing from their own diary, not yours.
• Show the date with the time, because a late slot in one zone is the following day in another and people book the wrong one.
• Be careful across a daylight saving change. A recurring meeting booked before a transition drifts for one side afterwards, which is why an appointment a month out sometimes arrives an hour early.
• State deadlines in one zone and repeat it everywhere. Competitions, applications and offers should carry the same wording on every page and in every email.
• Send confirmations with the zone in them, and ideally an attachment the recipient's calendar can read, which removes the question entirely.

The underlying principle: whenever a time is something a person will act on, it should appear at least once in their own time and at least once labelled with a zone. Doing only one of those is where the confusion comes from.

Accessibility

Clocks have one accessibility problem that dominates all the others: a display that updates every second can make a screen reader announce the time continuously, which renders a page unusable.

Do not mark a ticking clock as a live region. If assistive technology should announce a change, it should be a meaningful one, such as opening or closing, not the passing of a second.

Provide the time as text, not as an image. An analogue clock drawn as a graphic needs a text alternative giving the time and the city.

Do not rely on colour for the day and night indication. Add a word or a shape.

Check contrast on a decorative clock face, which is frequently the lowest contrast element on a page because it is treated as ornament.

Respect a reduced motion preference by not animating a sweeping second hand.

The simple version: show the digits as real text, update quietly, and announce only what matters.

Building One Yourself

If you are writing it rather than embedding, the whole thing is short, and these are the decisions that matter.

1. Use the browser's own formatting with a named zone. It handles daylight saving, local conventions and language without any rules of your own.
2. Take the time from the device, not from a server. The device clock is nearly always right, and using it means no network request per tick.
3. Update once a second, and only the digits. Rewriting a larger part of the page every second is where a clock starts costing battery.
4. Recalculate when the tab becomes visible again, since background tabs are throttled and a clock that resumes from where it stopped is wrong.
5. Detect the visitor's zone rather than guessing from location, which the browser also provides and which is more accurate than any address based guess.
6. Test around a daylight saving change, by setting your machine clock forward. It is the only way to see the bug before your visitors do.

A word on server rendered pages: a clock rendered on the server is wrong the moment it is cached, so the time must be produced in the visitor's browser. This is the most common cause of a page showing a time that is stuck.

Working Across Zones, Beyond the Clock

If the clock exists because your business genuinely spans zones, a few habits do more good than the display itself.

Publish your overlap, not your hours. A client in another country cares about the window when you are both awake. Naming that window in a sentence is more useful than any set of clocks.

Write times into your email signature if you routinely arrange calls. One line saying which zone you are in prevents an entire genre of exchange.

Set expectations for replies. A promise to answer within one working day means something different across eight hours of separation. Say what a working day means for you.

Avoid tomorrow and this afternoon in writing. Relative words are read at a different moment in another zone. Dates and times survive; relative phrases do not.

Decide a default zone for your organisation and use it in internal documents. Teams that never agree one spend a surprising amount of time reconstructing when something happened.

A clock on the website is the public face of all of this, and it works best when the practices behind it are already sound. On its own it is a display; alongside clear hours and a stated overlap, it becomes part of an answer.

Problems and Their Fixes

• The clock is an hour out. Daylight saving, and a fixed offset somewhere. Replace the number with a named zone.
• It shows the same time as the visitor's own. The zone is not being applied at all. Check the zone name is spelled exactly as the standard has it.
• It is stuck at the time the page was built. The clock was rendered on the server and cached. It has to run in the browser.
• It drifts after the tab is left open. The clock is counting rather than reading the current time. Recalculate on each update.
• It looks wrong to visitors in one country. Usually a format difference. Show the city, and consider the twenty four hour format.
• The open sign is wrong on holidays. Holidays are not in the logic. Add the closure list.
• It pushes the page around on load. No space was reserved for it. Give it a fixed size.

Getting Started

The short path. Pick three cities that mean something for your business, label them by city rather than by abbreviation, and let the browser format the time for named zones so daylight saving looks after itself. Add the visitor's own local time, and above the clocks put one line saying whether you are open and, if not, when you next are. Hide the seconds, show a day or night hint, and stack the clocks on a phone.

If you would rather not build and maintain the zone handling, a world clock widget gives you the cities, the faces and the styling on any page, with the daylight saving rules kept current for you.

If the clock is there because your audience works across zones, the other small utility worth considering on a working page is a pomodoro timer, which has the same do-not-decorate rule attached to it.