Embed your calculator anywhere

Add a branded property cost calculator to your website with a single line of code. It auto-resizes, works on any device, and stays up to date automatically.

Quick start

Paste this snippet into your website where you want the calculator to appear. Replace YOUR_SUBDOMAIN with the part before .law.fifo.systems in your calculator URL. For example, if your calculator is at sca.law.fifo.systems, your subdomain is sca. 

<!-- FIFO Law Calculator Widget -->
<div id="fifo-law-calculator"></div>
<script src="https://law.fifo.systems/widget.js"
  data-tenant="YOUR_SUBDOMAIN"
  data-color="#15803D"></script>

That's it — no dependencies, no build tools, no API keys.

Options

Attribute Description
data-tenant Your tenant subdomain (required)
data-color Brand accent colour (hex). Used for mobile CTA button and store badge bar.
data-theme Force "light" or "dark" mode. Match your website's background.
data-mode "calculator" (default) shows the calculator grid. "docs" shows your tenant's downloadable document library.
data-calculator Skip the grid and open a specific calculator: "transfer", "bond", "total", "affordability", "repayment", "cgt", "roi", "commission", "bridging" or "accrual". Only calculators enabled on your account will open. Calculator mode only.
data-rounded Border radius for tiles in pixels. Use "0" for sharp corners to match your site.
data-play-store Google Play listing URL. Shows a "Get it on Google Play" badge below the calculator.
data-app-store App Store listing URL. Shows a "Download on the App Store" badge.
data-height Initial iframe height in pixels before auto-resize kicks in.
data-max-width Maximum width of the widget in pixels. Use this if your page content is wider than the default.
data-target ID of the container element. Use this if you have multiple widgets on one page.

Full example with app store badges

<!-- FIFO Law Calculator Widget -->
<div id="fifo-law-calculator"></div>
<script src="https://law.fifo.systems/widget.js"
  data-tenant="YOUR_SUBDOMAIN"
  data-color="#15803D"
  data-play-store="YOUR_PLAY_STORE_URL"
  data-app-store="YOUR_APP_STORE_URL"></script>

Documents widget

Want to surface your downloadable PDFs (process guides, fee schedules, FICA checklists) on your existing site? Add data-mode="docs" to the same script — the widget renders your tenant's document library instead of the calculator. Available on the Plus tier.

<script src="https://law.fifo.systems/widget.js"
  data-tenant="YOUR_SUBDOMAIN"
  data-mode="docs"
  data-color="#15803D"></script>

How it works

1

Loads your branding

The widget fetches your firm's logo, colours, and calculator settings automatically. No configuration needed.

2

Desktop: embedded iframe

On desktop, a responsive iframe renders the full calculator inline. It auto-resizes to fit the content — no scrollbars.

3

Mobile: smart link

On mobile, the widget shows a branded button linking to your calculator web app, with optional app store badges.

Live preview

These are exactly what your visitors will see. Try interacting with them — they're real, against the demo tenant.

Calculator widget

Documents widget

FAQ

No. The widget script is tiny (about 5KB over the wire) and loads the calculator in an iframe, so it runs in its own sandbox and won't affect your page performance or styles.

The calculator displays your firm's branding — logo, colours, and name. The widget itself has a clean, neutral frame that works well on light and dark backgrounds.

No. Transfer duty rates, deeds office fees, and all other rates are managed centrally. When rates change, your embedded calculator updates automatically — no code changes required.

Absolutely. Just send them this page — the code snippet is all they need. It works with any website builder, CMS, or custom site. If they can paste HTML, they can install it.

No. The embeddable widget is included with every FIFO Law subscription at no extra charge.