Finance Calculator Widget

Embed a fully customisable equipment finance calculator on your website

Quick Start

Copy and paste this code into your website to embed the calculator with default settings:

<div>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebApplication",
  "name": "Finance Equipment Finance Calculator",
  "url": "https://calculator.finlease.app",
  "applicationCategory": "FinanceApplication",
  "operatingSystem": "All",
  "description": "Calculate loan repayments, interest, and financing costs instantly."
}
</script>

<iframe
  id="finlease-calculator"
  src="https://calculator.finlease.app/embed?defaultTheme=light"
  title="Finlease Equipment Finance 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_CALCULATOR_RESIZE') {
      var iframe = document.getElementById('finlease-calculator');
      if (iframe) {
        iframe.style.height = event.data.height + 'px';
      }
    }
  });
</script>

Example Implementations

Full Width with Auto-Resize

Responsive calculator that automatically adjusts height:

<div>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebApplication",
  "name": "Finance Equipment Finance Calculator",
  "url": "https://calculator.finlease.app",
  "applicationCategory": "FinanceApplication",
  "operatingSystem": "All",
  "description": "Calculate loan repayments, interest, and financing costs instantly."
}
</script>

<iframe
  id="finlease-calculator"
  src="https://calculator.finlease.app/embed?defaultTheme=light"
  title="Finlease Equipment Finance 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_CALCULATOR_RESIZE') {
      var iframe = document.getElementById('finlease-calculator');
      if (iframe) {
        iframe.style.height = event.data.height + 'px';
      }
    }
  });
</script>

Compact Sidebar Widget

No header for compact embedding in sidebars:

<iframe
  id="finlease-calculator"
  src="https://calculator.finlease.app/embed?showHeader=false&defaultTheme=light"
  title="Finlease Equipment Finance Calculator"
  style="width: 100%; max-width: 420px; 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>

Minimal Widget

Hide header, theme toggle, and breakdown sections:

<iframe
  src="https://calculator.finlease.app/embed?showHeader=false&showThemeToggle=false&showBreakdown=false&showSchedule=false"
  title="Finlease Equipment Finance 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>

Custom Branding

With custom brand name, colours, and CTA:

<iframe
  src="https://calculator.finlease.app/embed?brandName=Your%20Company&accentColor=8b5cf6&headerBgColor=1e293b&ctaText=Request%20Quote&ctaUrl=https://yoursite.com/quote"
  title="Finlease Equipment Finance 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>

All Parameters

Parameter

Description

Type

Default

Colours

accentColor

Primary brand colour — CTA buttons, slider, payment amount, tab indicators

colour

#22c55e

secondaryColor

Chart secondary segment colour (interest portion)

colour

#3b82f6

tertiaryColor

Chart tertiary segment colour (balloon/residual)

colour

#f59e0b

sliderColor

Slider track fill and thumb border colour (defaults to accentColor)

colour

accentColor

sliderTrackColor

Slider unfilled track background colour

colour

theme bg

headerBgColor

Header banner background colour

colour

#0f172a

Branding

brandName

Brand name shown in header when showLogo is false

string

Finlease

headerTitle

Custom header text — overrides both logo and brandName

string

undefined

showLogo

Show the Finlease logo SVG in the header

boolean

true

showHeader

Show or hide the header banner entirely — use false for minimal embeds

boolean

true

Theme

defaultTheme

Initial colour scheme on load

select

light

showThemeToggle

Show the light/dark mode toggle button in the header

boolean

true

CTA / Actions

ctaUrl

URL to navigate to when the primary CTA button is clicked — calculator values are appended as query params

string

finlease.com.au/fast-track/

ctaTargetId

HTML ID of an element on the parent page to jump to (overrides ctaUrl)

string

ctaText

Label text on the primary CTA button

string

Get Your Free Quote

ctaNewTab

Open the CTA link in a new browser tab

boolean

true

Default Values

defaultPrice

Initial equipment price pre-loaded into the calculator

number

50000

defaultRate

Initial interest rate (% p.a.) pre-loaded into the calculator

number

7.99

defaultDeposit

Initial deposit amount pre-loaded

number

defaultTerm

Initial loan term (in selected frequency units)

number

defaultBalloon

Initial balloon/residual payment percentage

number

defaultFrequency

Initial repayment frequency

select

monthly

Feature Toggles

showBreakdown

Show the pie chart cost breakdown on the back panel

boolean

true

showSchedule

Show the full amortisation schedule table on the back panel

boolean

true

showFinanced

Show the amount financed figure in the summary stats

boolean

true

showInterestFigures

Show the interest total figure in the summary stats

boolean

true

showTotalCost

Show the total cost figure in the summary stats

boolean

true

showEmailQuote

Show the Email This Quote button and modal

boolean

true

Embed Options

transparentBg

Use transparent background for seamless embedding

boolean

false

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

/embed

Custom Header Title

/embed?headerTitle=Truck%20Loan%20Calculator&showLogo=false

Dark Theme + Custom Accent

/embed?defaultTheme=dark&accentColor=8b5cf6&secondaryColor=06b6d4&headerBgColor=1e1b4b

Minimal — No Header

/embed?showHeader=false&showThemeToggle=false

Custom CTA

/embed?ctaUrl=https://yoursite.com/apply&ctaText=Apply%20Now&ctaNewTab=false

Jump to Form (Anchor Target)

/embed?ctaTargetId=quote-form&ctaNewTab=false

Pre-filled Values

/embed?defaultPrice=125000&defaultRate=6.99&defaultDeposit=10000&defaultBalloon=20

White Label

/embed?brandName=YourBrand&showLogo=false&accentColor=3b82f6&headerBgColor=1e3a8a&ctaUrl=https://yourbrand.com/quote&ctaText=Get%20Quote

Common Embed Patterns

Full Width Responsive

Best for dedicated calculator pages or wide content areas.

<iframe
  id="finlease-calculator"
  src="https://calculator.finlease.app/embed"
  title="Finlease Equipment Finance 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/embed?showHeader=false"
  title="Finlease Equipment Finance 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/embed?defaultTheme=dark&showThemeToggle=false"
  title="Finlease Equipment Finance 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>

Auto-Resize Script (Recommended)

Add this script to automatically adjust the iframe height when the calculator content changes (e.g., when users switch between calculator and breakdown views).

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

Auto-Resize Script (Recommended)

Add this script to automatically adjust the iframe height when the calculator content changes:

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

Live Sandbox

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

Colors

Accent color

Secondary color

Tertiary color

Slider color

Slider Track

Header BG

Right Panel BG

Right Panel Text

Panel Highlight

Panel Accent

Branding

Brand name

Header title

Show logo

Show header

Theme

Default theme

Show theme toggle

CTA / Actions

CTA URL

Target Element ID

CTA text

Open in new tab

SEO & Metadata

Widget Title

Description

Default Values

Equipment price ($)

Interest rate (%)

Feature Toggles

Show breakdown chart

Show schedule table

Show amount financed

Show interest figures

Show total cost

Show email quote

Preview

Amount Financed

Term

months

Interest Rate

Balloon / Residual% detected

Type a % (e.g. 30%) or $ amount (e.g. $15000) — mode is auto-detected

Payment Timing

Repayment Frequency

Est. Repayment

$1,006.88

per month

Financed

$50,000

Interest

$10,413

Total Cost

$60,413

Estimate only. Subject to credit assessment.

Generated Embed Code

<div>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebApplication",
  "name": "Finance calculator for estimating loan repayments and interest",
  "url": "https://calculator.finlease.app",
  "applicationCategory": "FinanceApplication",
  "operatingSystem": "All",
  "description": "Calculate loan repayments, interest, and financing costs instantly."
}
</script>

<iframe
  id="finlease-calculator"
  src="https://calculator.finlease.app/embed?ctaNewTab=true"
  title="Finance calculator for estimating loan repayments and interest"
  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_CALCULATOR_RESIZE') {
      var iframe = document.getElementById('finlease-calculator');
      if (iframe) {
        iframe.style.height = event.data.height + 'px';
      }
    }
  });
</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

Amount Financed

Term

months

Interest Rate

Balloon / Residual% detected

Type a % (e.g. 30%) or $ amount (e.g. $15000) — mode is auto-detected

Payment Timing

Repayment Frequency

Est. Repayment

$1,006.88

per month

Financed

$50,000

Interest

$10,413

Total Cost

$60,413

Estimate only. Subject to credit assessment.

Responsive Layout (resize to see it adapt)

Amount Financed

Term

months

Interest Rate

Balloon / Residual% detected

Type a % (e.g. 30%) or $ amount (e.g. $15000) — mode is auto-detected

Payment Timing

Repayment Frequency

Est. Repayment

$1,006.88

per month

Financed

$50,000

Interest

$10,413

Total Cost

$60,413

Estimate only. Subject to credit assessment.

No Header Version

Amount Financed

Term

months

Interest Rate

Balloon / Residual% detected

Type a % (e.g. 30%) or $ amount (e.g. $15000) — mode is auto-detected

Payment Timing

Repayment Frequency

Est. Repayment

$1,006.88

per month

Financed

$50,000

Interest

$10,413

Total Cost

$60,413

Estimate only. Subject to credit assessment.

Custom Header Title Version

Truck Loan Calculator

Amount Financed

Term

months

Interest Rate

Balloon / Residual% detected

Type a % (e.g. 30%) or $ amount (e.g. $15000) — mode is auto-detected

Payment Timing

Repayment Frequency

Est. Repayment

$1,006.88

per month

Financed

$50,000

Interest

$10,413

Total Cost

$60,413

Estimate only. Subject to credit assessment.

Theme Variations

Light Mode — Default

Amount Financed

Term

months

Interest Rate

Balloon / Residual% detected

Type a % (e.g. 30%) or $ amount (e.g. $15000) — mode is auto-detected

Payment Timing

Repayment Frequency

Est. Repayment

$704.81

per month

Financed

$35,000

Interest

$7,289

Total Cost

$42,289

Estimate only. Subject to credit assessment.

Dark Mode — Custom Accent

Amount Financed

Term

months

Interest Rate

Balloon / Residual% detected

Type a % (e.g. 30%) or $ amount (e.g. $15000) — mode is auto-detected

Payment Timing

Repayment Frequency

Est. Repayment

$1,527.57

per month

Financed

$75,000

Interest

$16,654

Total Cost

$91,654

Estimate only. Subject to credit assessment.

Layout Variations

No Header (Minimal)

Amount Financed

Term

months

Interest Rate

Balloon / Residual% detected

Type a % (e.g. 30%) or $ amount (e.g. $15000) — mode is auto-detected

Payment Timing

Repayment Frequency

Est. Repayment

$1,006.88

per month

Financed

$50,000

Interest

$10,413

Total Cost

$60,413

Estimate only. Subject to credit assessment.

Custom Header Title

Truck Loan Calculator

Amount Financed

Term

months

Interest Rate

Balloon / Residual% detected

Type a % (e.g. 30%) or $ amount (e.g. $15000) — mode is auto-detected

Payment Timing

Repayment Frequency

Est. Repayment

$1,006.88

per month

Financed

$50,000

Interest

$10,413

Total Cost

$60,413

Estimate only. Subject to credit assessment.

Features

Responsive Layout

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

Auto-Resize

Calculator sends height messages to parent iframe for automatic height adjustment when content changes.

Theme Support

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

Full Customisation

Customise colors, branding, default values, and which sections to show via URL parameters.

Transparent Background

Embed seamlessly into any page background with full transparency support.

Dynamic Term Units

Term input automatically converts between months, fortnights, and weeks based on payment frequency.