MortgageMeterdevelopers

Embed

Drop the MortgageMeter calculator hub into any page with two lines. Embed keys are managed from /settings/developer, where each key carries its own allowed-domain list and its own choice of which calculators to show.

<div class="mortgagemeter-hub" data-apikey="mm_..."></div>
<script src="https://app.mortgagemeter.ca/embed.js" defer></script>

One key, many pages

The same embed key can look different on every page it’s pasted into. Add attributes to the snippet to pick which calculators show, which one opens first, and what starting numbers greet the visitor — no second key, no settings change.

<!-- On a listing page -->
<div class="mortgagemeter-hub" data-apikey="mm_..."
     data-calculators="purchase" data-price="750000"></div>

<!-- On a blog post about land transfer tax -->
<div class="mortgagemeter-hub" data-apikey="mm_..."
     data-calculators="land-transfer-tax" data-theme="auto"></div>

Attributes

  • data-apikey — required. The embed key from your settings page.
  • data-calculators — optional. Comma-separated calculator slugs, e.g. data-calculators="purchase,closing-cost". Order is preserved and the first surviving slug becomes the tab that opens; when only one calculator survives the tab strip is omitted entirely instead of showing a single dead tab. A calculator your key doesn’t allow stays hidden even if you name it here — the snippet can only narrow what the key permits, never widen it. If none of the requested slugs are permitted, the embed falls back to the key’s normal set rather than showing an error, since an error would be visible to visitors on your live site. Narrowing changes which calculator server-renders, which changes the embed’s real height — pair this with data-initial-height to avoid a layout jump when the frame first loads.
  • data-theme — optional. light (default), dark, or auto (follows the visitor’s OS preference). The default is light, not auto: the embed renders inside someone else’s page, so following the visitor’s OS is something you opt into, not something that happens automatically.
  • data-price, data-rate — optional. Numbers that prefill a calculator’s starting inputs. data-price sets the purchase price on land-transfer-tax, closing-cost and purchase, and the target price on required-income. data-rate sets the rate on stress-test, mortgage, purchase, trigger-rate and refinance. Every other calculator ignores both — deliberately, since guessing which field a number belongs to (a purchase price treated as a mortgage amount, say) would produce a wrong number, and a wrong prefill is worse than none. renewal-switch doesn’t support prefill at all: its rate lives inside a nested object the prefill mechanism doesn’t reach.
  • data-title — optional. An accessible label for the iframe, useful when a page has more than one embed and a screen reader needs to tell them apart.
  • data-max-height — optional. Any CSS length (600px, 70vh). Caps the rendered height; the calculator scrolls inside the cap instead of growing the page.
  • data-initial-height — optional. A number of pixels (e.g. data-initial-height="700") used as the placeholder height before the calculator finishes loading, instead of the built-in estimate. The built-in estimate is calibrated to the default hub with every calculator enabled; a data-calculators-narrowed embed can settle at a very different real height, which otherwise shows up as a visible jump right as the (lazy-loaded) frame scrolls into view. Set it near the calculator’s real settled height. This never reaches the calculator itself — it only affects the placeholder box on your page. The snippet copied from Settings → Developer already includes it when a key’s hidden calculators change which calculator opens first.

Sizing

Width comes from the page: the embed fills whatever box .mortgagemeter-hub occupies, so style that element or any container around it.

Height is managed by the embed, which grows and shrinks to fit the active calculator so there is never a scrollbar inside a scrollbar. Setting height in CSS on the wrapper has no effect — use data-max-height if you need it to fit a fixed slot such as a sidebar.

<!-- Width: style the wrapper, or any container around it -->
<style>.mortgagemeter-hub { max-width: 720px; margin: 0 auto }</style>

<!-- Height: cap it for a constrained slot; the hub scrolls inside -->
<div class="mortgagemeter-hub"
     data-apikey="mm_..."
     data-max-height="600px"></div>

Notes

  • Keep defer on the script tag and place the snippet where you want the calculator to appear.
  • More than one embed on a page is supported; each sizes itself independently.
  • Requests are rejected unless the page’s domain is on the key’s allowed list.