Embed Financial Calculators — Widget Generator

Selected calculator

Savings Goal Calculator

Weekly, fortnightly and monthly amounts to reach any savings goal.

Iframe settings

Size preset

Sidebar300 × 640

Standard100% × 900

Compact100% × 650

Full-width hero100% × 1100

Width (custom)

Height (custom)

Presets set both fields for you — still fully editable afterward for an exact fit.

Theme

Match your site — dark works well on dark backgrounds, light for standard websites.

🎨 Widget colour — recolour the calculator itself

Recolours sliders, buttons and highlighted numbers inside the calculator — separate from the branding box below, which has its own colour.

🌍 Default currency — visitors can still change it

Sets what your visitors see first. A small currency selector stays visible in the corner of the widget so anyone can switch — your global audience is not locked in.

🏷️ Add your branding (optional, free)

Your business name

One-line tagline

Button text

Button URL

Badge (e.g. AFSL)

Branding box colour (hex)

Add your partner slug to co-brand the embed with your Featured Partner block. Ask us at partners.html to get set up (free).

Live preview

/savings-goal.html?embed=1

Embed code — copy this

⚡ Optional: auto-resize the iframe

Drop this tiny script anywhere on your page and the iframe will auto-adjust its height as visitors interact with the calculator. No more scrollbars.

<script>
window.addEventListener('message',function(e){
  if(e.data && e.data.type==='mdc-embed-height'){
    document.querySelectorAll('iframe[src*="mydailycost.com"]').forEach(function(f){
      f.style.height = e.data.height + 'px';
    });
  }
});
</script>

How to embed — 3 steps

Pick a calculator from the list on the left. Preview updates instantly on the right.

Adjust size, colour and currency to match your site. Click Copy code to copy the <iframe>.

(Optional) Add the auto-resize script above to eliminate scrollbars and have the iframe adjust to content.

Where to paste it — pick your platform

WordPress

Wix

Squarespace

Webflow

Shopify

Any other site

Edit the page, add a Custom HTML block (search for "HTML" when adding a block), paste the code inside it, then update or publish the page.

Open the editor, click Add Elements → Embed → Embed a Widget, choose Enter Code, paste it in, then resize the placeholder to roughly match your chosen height.

Edit the page, add a Code Block (not a Text block), paste the code inside it, then save.

Drag an Embed element onto the page from the Add panel, paste the code into it, then publish.

In your theme editor, add a Custom Liquid section (or a Custom HTML block if your theme supports it), paste the code inside it, then save.

Paste the code directly into your page’s HTML, anywhere inside the <body>, wherever you want the calculator to appear. Every major site builder supports a plain HTML/embed block somewhere — search your platform’s help docs for "embed HTML" or "custom code" if you are not sure where.

Works the same everywhere in the world — the iframe just loads a page from mydailycost.com, no plugin or account needed on your end.

Embed our calculators on your site.

Savings Goal Calculator