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.

How to Embed a Calculator in Ghost CMS (Free, 1 Minute)

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.

Why add a calculator to your Ghost blog?

Ghost is built for serious publishers and newsletter creators, and interactive tools are one of the most effective ways to increase engagement and dwell time. A relevant calculator embedded in a post does three things a static article can't:

Keeps readers on the page longer. Someone who runs an FD or mortgage calculation stays far longer than a passive reader — a strong signal to search engines and a boost to any ad or subscription revenue.
Adds genuine utility to finance content. A "best FD rates" or "how much house can you afford" post becomes actionable when readers can plug in their own numbers instead of just reading examples.
Costs nothing and never breaks. Because it's a simple iframe, there are no plugins to update, no dependencies, and no maintenance. It keeps working across Ghost version upgrades and theme changes.

Finance, personal-development, and productivity newsletters on Ghost see the strongest results — a calculator turns your best-performing evergreen posts into interactive resources readers bookmark and return to.

Frequently asked questions

Do I need a paid Ghost plan to embed calculators?

No. The HTML card is available on all Ghost plans, including self-hosted Ghost. There's no premium tier requirement to paste an iframe.

Will the calculator slow down my Ghost site?

No. The iframe uses loading="lazy", so the calculator only loads when a reader scrolls to it. Your post's initial load time is unaffected, and the calculator itself is lightweight with no tracking scripts.

Is the embedded calculator free to use?

Yes — completely free, no signup, no API key, and no usage limits. The only requirement is keeping the small "Powered by CalcIQ" attribution link below the calculator.

Can I change the calculator's height or width?

Yes. Adjust the height attribute in the iframe (see the table above for recommendations per calculator). Width is set to 100% so it's responsive by default and fits any Ghost theme's content width.

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.

Add a Calculator in Ghost