Ourwidgets

How to use Ourwidgets

The flow is the same for every widget on this page, and it is short enough to finish in one sitting. Pick the display you want — a single clock, a multi-zone row, or a countdown. Set its zone. Leaving it on the visitor's own zone is right for most sites; fixing it to a specific place is right when the time belongs to you, such as opening hours or a broadcast slot.

Adjust size, format and colours in the preview until it looks like the rest of your page. Copy the snippet and paste it into your HTML where you want the widget to appear. The preview is live: what you see there is what the snippet produces. If it looks wrong in the preview, changing the settings is faster than editing the pasted code afterwards.

Choosing the zone: yours or theirs

This is the one decision worth thinking about, because getting it backwards makes a widget confidently wrong rather than obviously broken. Visitor's zone — for a general-purpose clock, or anything the visitor will read as "the time right now" for themselves.

Fixed zone — for opening hours, support availability, event start times, or anything anchored to a physical place. Both together — for events with a remote audience, where showing your time and theirs side by side saves everyone the conversion.

A clock that shows the wrong zone never looks broken. It looks like a clock, which is exactly the problem.

Fitting it into your page

The widget inherits what it can from your page's styling, so it will usually pick up the surrounding font rather than fight it. Where you place it matters more than how you style it. Give it a container with a defined width if your layout is narrow, and check it on a phone before publishing — a multi-zone row that looks balanced on a wide screen can wrap awkwardly on a small one.

If you are embedding more than one widget on the same page, keep them visually distinct. Two clocks in the same style sitting near each other invite the reader to assume they show the same thing, and the whole point of a second clock is that it does not.

If it does not appear

Most failures come from the paste, not the widget. Work through these before assuming something deeper is wrong: Check the snippet was pasted whole — a truncated copy is the most common cause of nothing rendering.

Make sure your editor pasted it as HTML, not as escaped text. If you can see the tags on the published page, that is what happened. Confirm the container it sits in is actually visible and has room; a zero-height parent will hide a perfectly working widget.

If the time shows but looks off by a whole number of hours, it is a zone setting, not a fault — go back and check which zone the widget was configured for.