True Interest Rate Calculator Widget
Embed a widget that reveals the real effective rate behind any finance quote — including hidden fees
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
Colours
accentColorsecondaryColorsliderColorsliderTrackColorheaderBgColorpanelBgColorpanelTextColorpanelHighlightColorpanelAccentColorBranding
brandNameheaderTitleshowLogoshowHeaderTheme
defaultThemeshowThemeToggleDefault Values
defaultLoanAmountdefaultRepaymentdefaultTermdefaultResidualdefaultFeeFeature Toggles
showFeeFieldshowComparisonshowBreakdownTableCTA / Actions
ctaUrlctaTargetIdctaTextctaNewTabEmbed Options
transparentBgURL 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
Final payment: $40,000 · 40.0% of loan
Your true interest rate
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
Final payment: $40,000 · 40.0% of loan
Your true interest rate
per annum
Estimate only. Subject to credit assessment.
No Header Version
Final payment: $40,000 · 40.0% of loan
Your true interest rate
per annum
Estimate only. Subject to credit assessment.
With Establishment Fee Field
Final payment: $40,000 · 40.0% of loan
Added to principal to calculate true cost
Your true interest rate
per annum
Estimate only. Subject to credit assessment.
Theme Variations
Light Mode — Default
Final payment: $40,000 · 40.0% of loan
Your true interest rate
per annum
Estimate only. Subject to credit assessment.
Dark Mode — Custom Accent
Final payment: $40,000 · 40.0% of loan
Your true interest rate
per annum
Estimate only. Subject to credit assessment.
Layout Variations
No Header (Minimal)
Final payment: $40,000 · 40.0% of loan
Your true interest rate
per annum
Estimate only. Subject to credit assessment.
Custom Header Title
Final payment: $40,000 · 40.0% of loan
Your true interest rate
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.