Skip to content
CalcPier
CalcPier

Tutorial

How to Add a Mortgage Calculator to Google Sites

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

Before you start

Google Sites is completely free with any Google account. Iframe embedding is allowed through the Insert > Embed > Embed code option. No plan or payment required.

Step-by-step

  1. 1

    Open Google Sites and the target page

    Log in at sites.google.com. Open your site, then click the Pages panel on the right. Select the page where you want the calculator, or click + to add a new page.

  2. 2

    Insert > Embed > Embed code

    In the right sidebar, click Insert (or the + Insert button in the top-right corner of the canvas). From the menu, choose Embed. In the submenu, click Embed code (the third tab, labeled <>).

  3. 3

    Paste the iframe

    In the Embed code dialog, paste the iframe code below. Click Next, then Insert. The embed placeholder appears on the canvas.

  4. 4

    Resize the embed

    Drag the corner handles to resize the embed to your desired width and height. Google Sites respects the visual size over iframe HTML height. For full width, drag to the content area edge.

  5. 5

    Publish and mobile check

    Click Publish (top-right). Open the published site on mobile to verify the calculator fits. Google Sites auto-stacks embeds to full width on mobile — no additional configuration needed.

The embed code

Copy this exactly. It works on Google Sites 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 Google Sites layouts (two-column section), drag the embed to 400px wide and set height to 1100 for the stacked view.

<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 Google Sites allow iframes?

Yes. Google Sites supports iframe embedding via Insert > Embed > Embed code on all accounts (free and paid Google Workspace). No plan restriction.

Why is my embed not loading on Google Sites?

The most common cause is a blocked third-party cookie or Google Sites CSP restriction. Verify the iframe src starts with https:// (not http://). If it still fails, try opening the site in an incognito window — Google Sites sometimes caches broken embeds in your browser.

Can I add the calculator to a Google Sites subpage?

Yes. The Insert > Embed > Embed code flow works identically on every page and subpage of a Google Sites site.

Will the embed show up on Google Sites mobile?

Yes. Google Sites auto-adjusts embeds to full width on mobile. The calculator stacks vertically. If the height looks wrong, edit the embed and increase the visual height.

Does Google Sites limit embed sizes?

No hard limit. Embeds can span the full content width (usually 1200px max on desktop). Height is set by the visual placeholder.

Can I remove the attribution footer?

No. The "Powered by CalcPier" link must remain visible. Google Sites cannot modify iframe content due to cross-origin isolation.

Other platforms