EN

Embed a Calculator in Joomla

Tested on a fresh Joomla 5 install. The reliable route is a Custom Module; embedding inside an article also works.

Copy the embed code

This example embeds the overtime calculator — swap in any widget from the Help Center list.

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

Swap /embed/overtime/ 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. Create a Custom Module

In Joomla Administrator go to Content → Site Modules and click the New button, then choose Custom as the module type. Give it a title (used internally, e.g. “Calculator”).

Joomla administrator listing Site Modules with the New button highlighted

Step 2. Paste the code in the editor

Paste the code through a source-code view, never the visual editor. With TinyMCE, click the </> Source code toolbar button and paste into the dialog. If the iframe still gets stripped, switch the editor: System → Global Configuration → Default Editor → CodeMirror (or None) — then the module's content is a plain text field you can paste into directly.

Joomla custom module editor with the TinyMCE source code view containing the iframe snippet

Step 3. Choose the position and pages

In the right column, set Status: Published, open the Position dropdown and pick a slot from your template — we picked Footer [footer] on the default Cassiopeia template. Keep Menu Assignment on its default (all pages) unless you want the widget somewhere specific. Click Save & Close.

Joomla module settings with position and menu assignment fields

Step 4. Check the front end

Open the page you assigned the module to. The calculator renders inside your template's layout.

Joomla front end showing the embedded overtime calculator in the chosen template position

Frequently asked questions

The iframe disappears when I save the article/module.
Joomla's text filters are stripping the iframe. Log in as a Super User (filters don't apply to Super Users by default) or raise the filter for your group in System → Global Configuration → Text Filters. (2) The visual editor mangled the code on paste: paste only through a source-code view, or switch editors entirely (System → Global Configuration → Default Editor → CodeMirror or None) and paste into the plain field.
Can I embed inside an article instead of a module?
Yes — edit the article, use the editor's source-code view to paste the code, and save. If the iframe gets stripped, it's the same text-filter issue as above.
Which module position should I choose?
Depends on your template. Preview positions in your template's documentation, or enable Template Preview to see them labeled. Full-width positions above/below content fit the taller widgets best.

Other guides

WordPressBlock editor, sidebar widgets, classic editorGhostHTML card in the Koenig editorAny HTML site / static siteHand-coded pages, Hugo, Jekyll, Astro