Does the calculator show in Ghost email newsletters?

No. Email clients (Gmail, Outlook, Apple Mail) strip iframes from emails for security reasons. If you send your Ghost post as a newsletter, readers will see a blank space where the calculator was. Add a fallback text like 'Try the calculator at calciq.app/app?calc=sip' so email readers can click through instead.

Do I need a Ghost plugin to embed calculators?

No. Ghost's built-in HTML card handles iframes natively. No plugins, integrations, or code injections needed. Just paste the iframe snippet into an HTML card and it works.

Will the embed work with my Ghost theme?

Yes. The iframe uses width 100 percent, so it fills whatever content width your theme provides. Works with Casper, Edition, Headline, Alto, and all custom themes. The calculator inherits no styling from your theme — it looks consistent everywhere.

Can I embed a calculator on a Ghost page (not just posts)?

Yes. Ghost pages use the same editor as posts. Insert an HTML card with the iframe code on any page — landing pages, about pages, resource pages, etc.

Add a Calculator in Ghost

Use the HTML card. One minute, no plugins, works with every theme.

The short version

Ghost's editor has a built-in HTML card that accepts raw HTML including iframes. Paste a CalcIQ embed snippet and you have a working calculator in your blog post. No plugins, no code injection, no theme modifications needed.

One gotcha: If you send posts as email newsletters, iframes are stripped by email clients. Add a fallback link for email readers.

Step-by-step

1Copy an embed code

Open the CalcIQ embed library and click Copy on any calculator. You get:

<iframe src="https://calciq.app/app?calc=emi" width="100%" height="550" style="border:none;border-radius:8px;" title="EMI Calculator - CalcIQ"></iframe>
<p style="font-size:12px;text-align:center;margin:8px 0 0">Powered by <a href="https://calciq.app" target="_blank" rel="noopener" style="color:#10b981;font-weight:600;text-decoration:none">CalcIQ</a></p>

2Insert an HTML card

In the Ghost editor, click the + button (between content blocks) or type /html and select HTML from the card menu.

A code editor panel opens inline.

3Paste the embed code

Paste the iframe snippet into the HTML card. Click outside the card — you'll see a preview of the calculator right in the editor.

Unlike Webflow, Ghost renders iframe previews directly in the editor. What you see is what readers get.

4Publish

Publish or update your post. The calculator is immediately live and functional.

Email newsletter consideration

⚠️ Iframes don't work in emails

If you use Ghost's built-in newsletter feature to email posts to subscribers, the calculator will not appear in the email. All email clients strip iframes for security.

Solution: Add a fallback below the HTML card using a regular text card:

📊 Can't see the calculator? Use it here: https://calciq.app/app?calc=emi

Web readers see the calculator; email readers see the link. Best of both worlds.

Height recommendations by calculator

Calculator	Recommended Height
SIP, EMI, FD, Rent vs Buy	550–600px
Coffee, Fuel, Loan Comparison	500px
BMI, Age, Tip	400–450px

Advanced: Code injection (site-wide)

Add a calculator to every page

If you want a calculator in your sidebar, footer, or a specific section across all posts, use Ghost's Code Injection (Settings → Code injection → Site Footer):

<div style="max-width:400px;margin:2rem auto;">
  <iframe src="https://calciq.app/app?calc=coffee" width="100%" height="450" style="border:none;border-radius:8px;" title="Coffee Calculator"></iframe>
</div>

This adds the calculator to every page on your Ghost site. Use sparingly — only for calculators relevant to all content.

Other platforms

Need to embed on a different platform? See our guides for WordPress, Webflow, Squarespace, Wix, or Notion.

Or browse the full embed library with copy-paste code for all 19 calculators.