EN

Embed a Calculator on Any HTML Site

For hand-coded pages, landing page builders with custom-HTML blocks, and static site generators. If you can edit HTML, this takes one minute.

Copy the embed code

This example embeds the decimal converter — swap in any widget from the Help Center list.

<iframe src="https://timecardcentral.com/embed/decimal/" width="100%" height="860" style="border:0;border-radius:12px" loading="lazy" title="Free calculator by TimeCard Central"></iframe>

Swap /embed/decimal/ for any other widget and adjust the height — the full list is on the Help Center home. The only requirement is keeping the attribution link inside the frame.

Step 1. Open the page's HTML where the widget should appear

Open the file in any editor and find the spot between <body> … </body> where the calculator belongs — typically inside your main content column.

A code editor showing a simple HTML page with the iframe snippet pasted inside the body

Step 2. Paste the code and deploy

Paste the snippet, save, and deploy or upload the file like any other change. The widget loads lazily when visitors scroll near it.

Browser view of the plain HTML page with the decimal converter widget rendered and working

Step 3. Static site generators: Hugo, Jekyll, Astro, Eleventy

Raw HTML in Markdown files works as-is in all of these. If your Markdown pipeline sanitizes iframes, put the snippet in a layout template or a raw-HTML include instead (e.g. layouts/partials/ in Hugo, _includes/ in Jekyll) and include it from the page.

Frequently asked questions

Will the iframe be blocked by my Content Security Policy?
If your site sends a CSP with frame-src/frame-ancestors directives, add https://timecardcentral.com to frame-src. Most sites don't send a CSP; if the frame stays blank, check the browser console for a CSP error.
My site is HTTP, the widget is HTTPS.
That's fine — HTTPS content inside an HTTP page is allowed (the reverse would be blocked). We still recommend HTTPS for your own pages.
Can I lazy-load or resize it dynamically?
The snippet already includes loading="lazy". For dynamic resizing, adjust the height attribute from your own script — the widget has no internal scrollbar at the suggested heights.

Other guides

WordPressBlock editor, sidebar widgets, classic editorGhostHTML card in the Koenig editorJoomlaCustom Module, article HTML