EN

Embed a Calculator in Ghost

Tested on a fresh Ghost 5 install with the Koenig editor. One card, no code injection settings needed.

Copy the embed code

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

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

Swap /embed/hours/ 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 post or page

In Ghost Admin, go to Posts (or Pages) and click New post / New page. Give it a title like “Hours calculator”.

Ghost admin with the New post screen open

Step 2. Insert an HTML card

Click the + button on an empty line to open the card menu, then choose HTML. Shortcut: type /html and press Enter.

Ghost Koenig card menu with the HTML card highlighted

Step 3. Paste the embed code

Paste the code into the HTML card. Ghost renders a live preview of the iframe right inside the editor — if you can see the calculator there, it will render on the site.

Ghost HTML card containing the iframe code with a live preview of the calculator below it

Step 4. Publish and view

Click Publish in the top-right corner, confirm, then open the post's public URL. Done — the widget is live.

Published Ghost post showing the embedded hours calculator on the live site

Frequently asked questions

Can I put a widget on every page (footer/header)?
Yes — Ghost Admin → Settings → Code injection → Site footer accepts raw HTML. Paste the iframe there and it renders on every page of your theme.
The card shows an empty gray box in the editor.
That's the editor's live preview doing its job with network delays — check the published page. If the public page is also blank, make sure the pasted code starts with <iframe and that you used the HTML card, not a Markdown card.
Does it work with members-only content?
The widget renders for any visitor who can see the post — it knows nothing about Ghost memberships. Put it on public posts for the widest use.

Other guides

WordPressBlock editor, sidebar widgets, classic editorJoomlaCustom Module, article HTMLAny HTML site / static siteHand-coded pages, Hugo, Jekyll, Astro