Embed the Free Time Card Calculator on Your Website

Run an HR blog, a small-business resource, or a payroll guide? You can drop ClockTally's full time card calculator straight into your own page with one line of HTML. It is free, requires no account, and works on any site — WordPress, Webflow, Squarespace, Ghost, or hand-coded.

1. Copy this snippet

Paste it into your page wherever you want the calculator to appear:

<iframe
  src="https://clocktally.com/embed/time-card-calculator/"
  title="Free Time Card Calculator by ClockTally"
  width="100%" height="900" loading="lazy"
  style="border:1px solid #d7e0ea;border-radius:10px;max-width:760px;width:100%;">
</iframe>

2. (Optional) Make it auto-resize

The calculator grows as rows and totals are added. If you want the iframe to resize automatically to fit, add this small script anywhere on the same page:

<script>
window.addEventListener("message", function (e) {
  if (e.data && e.data.type === "clocktally:embed-height") {
    var f = document.querySelector('iframe[src*="clocktally.com/embed"]');
    if (f) f.style.height = e.data.height + "px";
  }
});
</script>

Live preview

This is exactly what your visitors will see and use:

Usage & attribution

Free to use on any website, commercial or personal.
Please keep the small “Free time card calculator by ClockTally” credit link that appears under the tool — that is the only thing we ask in return.
Everything runs in the visitor's browser. No data passes through your site or ours.
Questions or a custom version? Email hello@clocktally.com.