How to Embed a Free Clock on Your Website

What to look for in an embeddable clock widget, how iframes work, and where to paste the code in WordPress, Squarespace, or plain HTML.

Adding a live clock to a website used to require a plugin, a widget account, or writing JavaScript from scratch. None of those are necessary. A working clock can be embedded on any webpage — WordPress, Squarespace, Wix, or plain HTML — in about two minutes using an iframe.

What an iframe embed is

An iframe (inline frame) is an HTML element that displays another webpage inside your own. When you embed a clock using an iframe, visitors to your site see a live, working clock — but the clock itself is running on the source page. You don't maintain any code; you just include the embed snippet.

The basic embed snippet

To embed a clock on any webpage, add this HTML wherever you want the clock to appear:

<iframe
  src="https://timerrapp.com/"
  width="400"
  height="120"
  frameborder="0"
  style="border:none;"
  title="Online clock">
</iframe>

Adjust the width and height values to fit your layout. The clock will display at the size you specify.

How to add it in WordPress

In the WordPress block editor, add a Custom HTML block wherever you want the clock. Paste the iframe snippet into the block. Switch to Preview to confirm it appears correctly, then publish. For the classic editor, switch to the Text tab (not Visual) before pasting, so the HTML is interpreted rather than displayed as text.

How to add it in Squarespace

Add a Code Block to your page from the block menu. Paste the iframe snippet into the code block. Squarespace renders it in preview automatically. Make sure the block is set to "HTML" mode rather than "Markdown."

How to add it in plain HTML

Paste the iframe snippet directly into your HTML file at the location where you want the clock to appear. No additional libraries or dependencies are required.

What to look for in a clock widget

Three things matter when choosing what to embed. First, it should be ad-free — ads in an embedded clock look unprofessional and reflect on your site. Second, it should be lightweight: a clock that loads slowly or imports large JavaScript libraries will hurt your page speed. Third, it should be responsive, meaning it displays correctly on both desktop and mobile screen sizes.

Timerrapp's clock meets all three: it carries no advertising, loads as a static Eleventy-generated page, and is built with responsive CSS. For embedding a countdown timer rather than a live clock, the same approach applies — use the timer page URL as the iframe source instead.