Embed the time card calculator

The Time Card Calculator time card calculator is free to embed on your own site, blog, forum thread or internal wiki. It runs in the reader's browser, needs no account or API key, and gives the same results as the tool on this site. The only thing we ask is that the small "Powered by Time Card Calculator" link under the tool stays in place.

Copy the code

Paste this where you want the time card calculator to appear:

<iframe
  src="https://timecardcalculatortool.com/embed"
  title="time card calculator by Time Card Calculator"
  width="100%"
  height="800"
  loading="lazy"
  style="border:1px solid #ccc;max-width:48rem"
></iframe>

Live preview

This is exactly what your visitors will see:

Who this is for

Small-business blogs, payroll and HR guides, staffing agencies and employee handbooks embed it so readers can total a week of punches without leaving the page. It suits any page that explains overtime, rounding or pay periods.

How it works

The reader types clock-in and clock-out times for each day, plus any unpaid break. The widget returns daily and weekly hours in h:mm and decimal, the overtime split, and gross pay at the hourly rate they enter.

The iframe loads a stripped-down page from timecardcalculatortool.com with no header, footer, cookie banner or analytics, so it adds nothing to your page weight beyond the tool itself and sets no cookies on your domain. Because it is a plain iframe, it works on WordPress, Squarespace, Wix, Ghost, Webflow, Shopify pages, phpBB and Discourse forums, Notion (via the embed block) and any hand-written HTML page. If your platform strips iframes from the editor, paste the snippet into an HTML or "custom code" block instead.

Customizing it

The snippet uses sensible defaults. To change the size, adjust width and height on the iframe; the time card calculator reflows to fit the frame, so a narrower column simply stacks the fields. If your page has a hard max-width, drop the inline style attribute and size the iframe from your own stylesheet instead. The tool follows the reader's light or dark preference automatically. Raise height a little if you see a scrollbar inside the frame on narrow screens.

Terms

Embedding is free for personal and commercial sites. Do not remove or hide the attribution link, do not present the tool as your own product, and do not wrap it in a page that charges for access to it. Time card calculator results are provided as-is; see the terms for the full disclaimer. If the embed ever breaks on your page, contact us with the page URL and we will look at it.