True Interest Rate Calculator Widget

Embed a widget that reveals the real effective rate behind any finance quote — including hidden fees

Route: /true-interest-rate/embed

Quick Start

Copy and paste this into your website to embed the True Interest Rate calculator:

<div>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebApplication",
  "name": "True Interest Rate Calculator",
  "url": "https://calculator.finlease.app",
  "applicationCategory": "FinanceApplication",
  "operatingSystem": "All",
  "description": "Discover the true interest rate on your finance quote."
}
<\/script>

<iframe
  id="finlease-tir-calculator"
  src="https://calculator.finlease.app/true-interest-rate/embed"
  title="True Interest Rate Calculator"
  style="width: 100%; border: none; border-radius: 24px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); overflow: hidden; display: block; transition: height 0.3s ease-out;"
  scrolling="no"
></iframe>
</div>

<script>
  window.addEventListener('message', function(event) {
    if (event.data && event.data.type === 'FINLEASE_TIR_RESIZE') {
      var iframe = document.getElementById('finlease-tir-calculator');
      if (iframe) { iframe.style.height = event.data.height + 'px'; }
    }
  });

  document.addEventListener('DOMContentLoaded', function() {
    var iframe = document.getElementById('finlease-tir-calculator');
    if (iframe && iframe.src) {
      var url = new URL(iframe.src);
      url.searchParams.set('ref', window.location.href);
      var parentParams = new URLSearchParams(window.location.search);
      parentParams.forEach(function(value, key) {
        if (key.startsWith('utm_')) url.searchParams.set(key, value);
      });
      if (!url.searchParams.has('utm_source')) url.searchParams.set('utm_source', 'finlease-website');
      if (!url.searchParams.has('utm_medium')) url.searchParams.set('utm_medium', 'calculator');
      if (!url.searchParams.has('utm_campaign')) url.searchParams.set('utm_campaign', 'true-interest-rate-calculator');
      iframe.src = url.toString();
    }
  });
</script>

Example Implementations

Full Width with Auto-Resize

Responsive widget that automatically adjusts height:

<iframe
  id="finlease-tir-calculator"
  src="https://calculator.finlease.app/true-interest-rate/embed"
  title="True Interest Rate Calculator"
  style="width: 100%; border: none; border-radius: 24px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); overflow: hidden; display: block; transition: height 0.3s ease-out;"
  scrolling="no"
></iframe>

Compact Sidebar Widget

No header for compact embedding in sidebars:

<iframe
  src="https://calculator.finlease.app/true-interest-rate/embed?showHeader=false"
  title="True Interest Rate Calculator"
  style="width: 100%; max-width: 420px; border: none; border-radius: 24px; overflow: hidden; display: block; transition: height 0.3s ease-out;"
  scrolling="no"
></iframe>

With Establishment Fee

Show the fee field to expose its true rate impact:

<iframe
  src="https://calculator.finlease.app/true-interest-rate/embed?showFeeField=true&defaultFee=995"
  title="True Interest Rate Calculator"
  style="width: 100%; border: none; border-radius: 24px; overflow: hidden; display: block; transition: height 0.3s ease-out;"
  scrolling="no"
></iframe>

White Label Partner

Custom brand colours and CTA:

<iframe
  src="https://calculator.finlease.app/true-interest-rate/embed?brandName=YourBrand&showLogo=false&accentColor=3b82f6&headerBgColor=1e3a8a&ctaText=Get+a+Better+Deal&ctaUrl=https://yourbrand.com/apply"
  title="True Interest Rate Calculator"
  style="width: 100%; border: none; border-radius: 24px; overflow: hidden; display: block; transition: height 0.3s ease-out;"
  scrolling="no"
></iframe>

All Parameters

Parameter
Description
Type
Default

Colours

accentColor
Primary brand colour — hero rate number, CTA, sliders, highlights
colour
#95c92c
secondaryColor
Secondary colour for breakdown chart (interest segment)
colour
#000043
sliderColor
Slider fill colour (defaults to accentColor)
colour
#95c92c
sliderTrackColor
Slider unfilled track background colour
colour
theme bg
headerBgColor
Header banner background colour
colour
#000043
panelBgColor
Right panel background override
colour
#000043
panelTextColor
Right panel text colour override
colour
#ffffff
panelHighlightColor
Right panel highlight/shadow colour
colour
#000043
panelAccentColor
Right panel accent (big rate number)
colour
#95c92c

Branding

brandName
Brand name shown in header when showLogo is false
string
Finlease
headerTitle
Custom header text — overrides logo and brandName
string
showLogo
Show the Finlease logo SVG in the header
boolean
true
showHeader
Show or hide the header banner entirely
boolean
true

Theme

defaultTheme
Initial colour scheme on load
select
light
showThemeToggle
Show the light/dark mode toggle button
boolean
true

Default Values

defaultLoanAmount
Initial loan/principal amount
number
100000
defaultRepayment
Initial periodic repayment amount
number
1510
defaultTerm
Initial loan term in months
number
60
defaultResidual
Initial residual/balloon payment in dollars
number
0
defaultFee
Initial establishment fee in dollars (rolled into IRR)
number
0

Feature Toggles

showFeeField
Show the establishment fee input field
boolean
false
showComparison
Show fee impact comparison row in results panel
boolean
true
showBreakdownTable
Show the View Cost Breakdown button and panel
boolean
true

CTA / Actions

ctaUrl
URL when primary CTA is clicked — calculator values appended as query params
string
finlease.com.au/fast-track/
ctaTargetId
HTML ID on parent page to jump to (overrides ctaUrl)
string
ctaText
Label text on the CTA button
string
See if we can beat that
ctaNewTab
Open CTA link in a new browser tab
boolean
true

Embed Options

transparentBg
Transparent background for seamless embedding
boolean
true

URL Parameter Examples

All props can be passed as URL query parameters. Color values can include or omit the # prefix. Boolean values are the strings true or false.

Default (Finlease branding)

/true-interest-rate/embed

Pre-filled — $120k loan, $1,800/mo, 5 years

/true-interest-rate/embed?defaultLoanAmount=120000&defaultRepayment=1800&defaultTerm=60

Show establishment fee field

/true-interest-rate/embed?showFeeField=true&defaultFee=995

Dark theme + custom accent

/true-interest-rate/embed?defaultTheme=dark&accentColor=8b5cf6&headerBgColor=1e1b4b

Minimal — no header

/true-interest-rate/embed?showHeader=false&showThemeToggle=false

White label partner

/true-interest-rate/embed?brandName=YourBrand&showLogo=false&accentColor=3b82f6&headerBgColor=1e3a8a&ctaText=Get+a+Better+Deal&ctaUrl=https://yourbrand.com/apply

Custom CTA

/true-interest-rate/embed?ctaText=See+If+We+Can+Beat+That&ctaUrl=https://finlease.com.au/fast-track/

Common Embed Patterns

Full Width Responsive

Best for dedicated calculator pages or wide content areas.

<iframe
  id="finlease-tir-calculator"
  src="https://calculator.finlease.app/true-interest-rate/embed"
  title="True Interest Rate Calculator"
  style="width: 100%; border: none; border-radius: 24px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); overflow: hidden; display: block; transition: height 0.3s ease-out;"
  scrolling="no"
></iframe>

Sidebar Widget

Fixed width for sidebars or narrow columns.

<iframe
  src="https://calculator.finlease.app/true-interest-rate/embed?showHeader=false"
  title="True Interest Rate Calculator"
  style="width: 100%; max-width: 380px; border: none; border-radius: 24px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); overflow: hidden; display: block; transition: height 0.3s ease-out;"
  scrolling="no"
></iframe>

Dark Page

Match the widget to a dark-themed website.

<iframe
  src="https://calculator.finlease.app/true-interest-rate/embed?defaultTheme=dark&showThemeToggle=false"
  title="True Interest Rate Calculator"
  style="width: 100%; border: none; border-radius: 24px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); overflow: hidden; display: block; transition: height 0.3s ease-out;"
  scrolling="no"
></iframe>

Embed Script (Resize & Tracking)

Add this script to automatically adjust the iframe height and track usage (passing UTM parameters and referral URL into the iframe).

window.addEventListener('message', function(event) {
  if (event.data && event.data.type === 'FINLEASE_TIR_RESIZE') {
    var iframe = document.getElementById('finlease-tir-calculator');
    if (iframe && event.data.height) {
      iframe.style.height = event.data.height + 'px';
    }
  }
});

document.addEventListener('DOMContentLoaded', function() {
  var iframe = document.getElementById('finlease-tir-calculator');
  if (iframe && iframe.src) {
    var url = new URL(iframe.src);
    url.searchParams.set('ref', window.location.href);
    var parentParams = new URLSearchParams(window.location.search);
    parentParams.forEach(function(value, key) {
      if (key.startsWith('utm_')) url.searchParams.set(key, value);
    });
    if (!url.searchParams.has('utm_source')) url.searchParams.set('utm_source', 'finlease-website');
    if (!url.searchParams.has('utm_medium')) url.searchParams.set('utm_medium', 'calculator');
    if (!url.searchParams.has('utm_campaign')) url.searchParams.set('utm_campaign', 'true-interest-rate-calculator');
    iframe.src = url.toString();
  }
});

Live Sandbox

Adjust any parameter below and see the widget update instantly. Copy the generated embed code when ready.

Colors

Branding

Theme

CTA / Actions

Default Values

Feature Toggles

SEO & Metadata

Preview

$
$
months
$ detected

Final payment: $40,000 · 40.0% of loan

Your true interest rate

8.60%

per annum

Estimate only. Subject to credit assessment.

Generated Embed Code

<div>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebApplication",
  "name": "True Interest Rate Calculator — Uncover Your Real Rate",
  "url": "https://calculator.finlease.app/true-interest-rate",
  "applicationCategory": "FinanceApplication",
  "operatingSystem": "All",
  "description": "Discover the true interest rate on your finance quote. See what you're really paying after fees."
}
</script>

<iframe
  id="finlease-tir-calculator"
  src="https://calculator.finlease.app/true-interest-rate/embed"
  title="True Interest Rate Calculator — Uncover Your Real Rate"
  width="100%"
  height="800"
  frameborder="0"
  allowtransparency="true"
  style="border: none; border-radius: 24px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); overflow: hidden; display: block; transition: height 0.3s ease-out; background: transparent;"
  scrolling="no"
></iframe>
</div>

<script>
  window.addEventListener('message', function(event) {
    if (event.data && event.data.type === 'FINLEASE_TIR_RESIZE') {
      var iframe = document.getElementById('finlease-tir-calculator');
      if (iframe) {
        iframe.style.height = event.data.height + 'px';
      }
    }
    if (event.data && event.data.type === 'FINLEASE_QUOTE_CLICK' && event.data.ctaUrl) {
      window.location.href = event.data.ctaUrl;
    }
  });

  document.addEventListener('DOMContentLoaded', function() {
    var iframe = document.getElementById('finlease-tir-calculator');
    if (iframe && iframe.src) {
      var url = new URL(iframe.src);
      url.searchParams.set('ref', window.location.href);
      var parentParams = new URLSearchParams(window.location.search);
      parentParams.forEach(function(value, key) {
        if (key.startsWith('utm_')) url.searchParams.set(key, value);
      });
      if (!url.searchParams.has('utm_source')) url.searchParams.set('utm_source', 'finlease-website');
      if (!url.searchParams.has('utm_medium')) url.searchParams.set('utm_medium', 'calculator');
      if (!url.searchParams.has('utm_campaign')) url.searchParams.set('utm_campaign', 'true-interest-rate-calculator');
      iframe.src = url.toString();
    }
  });
</script>

Only changed parameters are included in the URL — unchanged values use their defaults. Paste this anywhere on your website.

Example Implementations

Custom Branding with Purple Theme

$
$
months
$ detected

Final payment: $40,000 · 40.0% of loan

Your true interest rate

8.60%

per annum

Estimate only. Subject to credit assessment.

No Header Version

$
$
months
$ detected

Final payment: $40,000 · 40.0% of loan

Your true interest rate

8.60%

per annum

Estimate only. Subject to credit assessment.

With Establishment Fee Field

$
$
months
$ detected

Final payment: $40,000 · 40.0% of loan

$

Added to principal to calculate true cost

Your true interest rate

8.27%

per annum

vs. without fees
8.60%-0.33%

Estimate only. Subject to credit assessment.

Theme Variations

Light Mode — Default

$
$
months
$ detected

Final payment: $40,000 · 40.0% of loan

Your true interest rate

8.60%

per annum

Estimate only. Subject to credit assessment.

Dark Mode — Custom Accent

$
$
months
$ detected

Final payment: $40,000 · 40.0% of loan

Your true interest rate

8.60%

per annum

Estimate only. Subject to credit assessment.

Layout Variations

No Header (Minimal)

$
$
months
$ detected

Final payment: $40,000 · 40.0% of loan

Your true interest rate

8.60%

per annum

Estimate only. Subject to credit assessment.

Custom Header Title

Rate Checker
$
$
months
$ detected

Final payment: $40,000 · 40.0% of loan

Your true interest rate

8.60%

per annum

Estimate only. Subject to credit assessment.

PostMessage Events

The widget emits two types of window.postMessage events to the parent page:

FINLEASE_TIR_RESIZE — Auto-resize the iframe height

window.addEventListener('message', function(event) {
  if (event.data && event.data.type === 'FINLEASE_TIR_RESIZE') {
    document.getElementById('finlease-tir-calculator').style.height
      = event.data.height + 'px';
  }
});

FINLEASE_TIR_CLICK — Capture CTA button interactions

window.addEventListener('message', function(event) {
  if (event.data && event.data.type === 'FINLEASE_TIR_CLICK') {
    var data = event.data.data;
    // data.loanAmount, data.repayment, data.loanTerm,
    // data.trueRate, data.frequency
    console.log('True rate:', data.trueRate + '% p.a.');
  }
});

Features

Newton-Raphson IRR

Precise iterative IRR calculation for accurate true rate discovery — not a simple approximation.

Responsive Layout

Automatically switches between vertical and horizontal layouts at 680px. Perfect for any container size.

Fee Impact Comparison

Show how establishment fees inflate the true effective rate — a powerful transparency tool for borrowers.

Residual / Balloon

Handles balloon/residual payments with smart auto-detection of % vs $ input modes.

Theme Support

Full dark and light theme support with smooth transitions. Users can toggle or you can lock a default.

Full Customisation

Customise colours, branding, default values, and which features to show via URL parameters.