Skip to content
CalcPier
CalcPier

Tutorial

How to Add a Mortgage Calculator to Ghost

Add a working mortgage calculator to any Ghost page in under 3 minutes. The widget loads inside an iframe and updates results as users type.

Before you start

Ghost(Pro) starts at $9/month (Starter). Self-hosted Ghost is free but requires your own server. Both versions support HTML Cards in the editor, which accept iframes.

Step-by-step

  1. 1

    Open Ghost admin and the post

    Log in at your Ghost admin (yoursite.com/ghost). Click Posts > New Post, or open an existing post. The Ghost editor opens in card-based mode.

  2. 2

    Add an HTML Card

    In the editor, type /html on a new line and press Enter. An HTML card appears. Alternatively, click the + button (bottom of the editor), scroll to the Advanced section, and select HTML.

  3. 3

    Paste the iframe inside the HTML Card

    Click inside the HTML card. Paste the embed code below. Ghost preserves HTML in the card without conversion — straight quotes stay straight quotes.

  4. 4

    Preview and publish

    Click the Settings icon (gear) and select Preview to see the post as visitors will. Verify the calculator loads. Click Publish (top-right) when ready.

  5. 5

    Check mobile rendering

    Open the published post on your phone. Ghost themes (Casper, London, etc.) auto-fit HTML cards to the content column width. If the calculator gets cut off on narrow screens, edit the HTML card and increase height to 1100.

The embed code

Copy this exactly. It works on Ghost and every other supported platform.

<iframe src="https://calcpier.com/embed/mortgage-calculator/" width="100%" height="900" style="border:0;border-radius:12px;max-width:900px" title="Mortgage Calculator by CalcPier" loading="lazy"></iframe>
<p style="font-size:12px;color:#666;text-align:center;margin-top:8px">Calculator by <a href="https://calcpier.com/">CalcPier</a> - free financial tools for US homebuyers.</p>

Sidebar or narrow layout

For narrow Ghost layouts, wrap the iframe in a div with style="max-width:400px;margin:0 auto". Increase height to 1100 for stacked layout.

<iframe src="https://calcpier.com/embed/mortgage-calculator/" width="100%" height="1100" style="border:0;border-radius:12px;max-width:400px" title="Mortgage Calculator by CalcPier" loading="lazy"></iframe>
<p style="font-size:12px;color:#666;text-align:center;margin-top:8px">Calculator by <a href="https://calcpier.com/">CalcPier</a> - free financial tools for US homebuyers.</p>

Frequently asked questions

Does Ghost allow iframes?

Yes. Ghost HTML Cards preserve raw HTML, including iframes. There is no CSP restriction by default on Ghost(Pro) or self-hosted instances.

Can I add the calculator to my Ghost newsletter?

No. Ghost newsletters send email, and email clients block iframes. The widget only works on web pages, not in newsletters.

Which Ghost plan do I need?

Any Ghost(Pro) plan works ($9/month Starter and up). Self-hosted Ghost is free but requires managing your own server. Both support HTML Cards.

Will the calculator affect my Ghost page speed?

No. The iframe uses loading="lazy", so it does not block initial render. Ghost themes typically keep 90+ Lighthouse scores with the widget embedded.

How do I add the calculator to a Ghost page (not post)?

Ghost Pages use the same editor as posts. Create a new page, insert an HTML Card, paste the iframe. The process is identical to posts.

Can I remove the attribution footer?

No. The "Powered by CalcPier" link must remain visible. Cross-origin policy prevents CSS overrides and hiding the footer violates the widget terms.

Other platforms