Help
Setting up an embed, and understanding what the calculators do. The code examples here are generated from the embed contract itself, so they cannot describe an option that no longer exists.
Embedding a calculator
A container element and one script tag. The script finds every container on the page and mounts a widget into it, so several calculators on one page need one script.
<div
data-breakdecisions-widget
data-calculators="loan-repayment"
data-layout="single"
></div>
<script src="https://breakdecisions.com/embed.js" async></script>The script is loaded async: it never blocks your page rendering, and a slow or failed load leaves your page working normally with an empty container.
Choosing calculators
Any of the 24 calculators, by id, comma-separated. Choose for the page: a refinancing article wants the comparison and break-even calculators, not all of them.
<div
data-breakdecisions-widget
data-calculators="loan-repayment,extra-repayment,offset"
data-layout="tabs"
></div>Layouts
6 options, set with data-layout: single tabs stack dropdown floating grid
With one calculator selected they all render the same thing, so the layout only matters from two upwards. The demo shows each of them running.
Prefilling values
Fields can be pre-populated from the page — useful on a listing page where the property price is already known. Prefill keys carry the p. prefix.
<div
data-breakdecisions-widget
data-calculators="loan-repayment"
data-prefill="p.loanAmount=650000&p.termYears=30"
></div>A prefilled value is a starting point the visitor can change, and it goes through the same validation as anything typed. A value the calculator would reject is ignored rather than shown as an error the visitor did not cause.
Prefills do not create indexable pages. A calculator URL canonicalises to its clean path, so a prefilled variant is never a second page in search results.
Branding
Set in the dashboard rather than in the embed code, so a change applies everywhere you have placed a widget without editing any page.
Colours, typography scale, corner radius and density are configurable from a validated set of tokens. Arbitrary CSS, uploaded fonts and externally hosted assets are not supported — anything outside the validated set is rejected rather than passed through.
Call to action
Each embed can carry one, pointing at a destination of type url, phone, email — a page on your site, a phone number, or an email address.
The destination is validated: only those three shapes are accepted, and script-style URLs are refused. When a visitor clicks, they go to your destination. Nothing is captured here, and no visitor figures are ever put into the link.
Why some calculators ask for a date
Stamp duty and income tax depend on rates that change. Duty is assessed against the scale in force when the contract was signed, and income tax against the rates for that income year — not against whatever applies today.
So the date is an input. A visitor checking a contract from last year gets last year’s scale, and the page shows which scale was used and links to the document it came from.
The wording your visitors see says what to enter — the contract date, the relevant income year — rather than describing rule versioning, which is our problem and not theirs.
Reading the metrics
Widget sessions
Visits during which the widget loaded. A session is an anonymous identifier for one visit — it is not a unique person, and two visits from the same browser count as two.
Calculator starts
A visitor changed an input. This is the first real signal of intent; a view without a start is somebody who scrolled past.
Calculations
A complete, valid result was produced after the visitor engaged. The auto-calculated default state does not count — otherwise every view would look like a calculation.
CTA views and clicks
How many saw the call to action and how many followed it. The ratio between calculations and clicks is the number worth watching.
None of these records what anybody typed. That is architectural rather than a setting: the amounts never leave the browser.
If something is not working
The widget does not appear
Check the container has the
data-breakdecisions-widgetattribute and that the script tag is present once on the page. The widget mounts into containers that exist when the script runs and into ones added afterwards.A calculator is missing from the widget
An unrecognised id in
data-calculatorsis skipped rather than failing the whole widget. Check the id against the calculator’s own page URL.South Australian stamp duty gives no result
That is deliberate and not a fault. The SA duty schedule could not be verified against an official source, so no figure is offered and the widget explains why.
The frame has an inner scrollbar
It should not: the widget reports its height and the frame resizes. If you have set a fixed height on the container in your own CSS, remove it.