✦ Embeddable · v1

An embeddable retirement calculator that answers one question.

Should you take the lump sum or the pension annuity? Drop a single script tag into your site, then use <retirement-calc-pension> as a custom HTML element anywhere on the page. Models the full payment stream including survivor benefit, surfaces the break-even return rate (the answer most users actually want), and shows side-by-side PV comparison at any expected return.

Pure NPV math — no Monte Carlo needed. See also: <retirement-calc-ss> (when to claim SS), <retirement-calc-withdrawal> (4% vs Guyton-Klinger).

Live demos

Default (household, $3,500/mo vs $500K lump)

Themed (single, healthy retiree, $2,800/mo vs $400K lump)

Preview your theme

Pick colors that match your site, then copy the CSS snippet at the bottom.

Theme colors

Accent color Big number, slider thumb, CTA button

#4f8ec9

Card background Outer surface of the calc

#ffffff

Inner surface Result area + toggle background

#f7f9fc

Text color Title, slider values, result subline

#1a1f2e

retirement-calc-pension {
  --rc-accent: #4f8ec9;
  --rc-bg: #ffffff;
  --rc-surf: #f7f9fc;
  --rc-text: #1a1f2e;
}

Integration code

Drop this into your HTML:

<script src="https://app.retirementscenario.com/embed/v1/pension.js"></script>

<retirement-calc-pension></retirement-calc-pension>

Or pre-seed values relevant to your audience:

<retirement-calc-pension
  plan-type="household"
  current-age="65"
  life-expectancy="88"
  spouse-life-expectancy="92"
  monthly-annuity="4200"
  lump-sum-offered="650000"
  expected-return="6.5"
  survivor-pct="75">
</retirement-calc-pension>

Attributes

Attribute	Default	Range
`plan-type`	household	`single` or `household` (= MFJ)
`current-age`	65	50 – 75 (your age when pension would start)
`life-expectancy`	87	currentAge – 105 (your expected lifespan)
`spouse-life-expectancy`	90	currentAge – 105 (HH only)
`monthly-annuity`	3500	500 – 20,000 ($/mo offered for life)
`lump-sum-offered`	500000	50,000 – 5,000,000 (one-time cash offer)
`expected-return`	6	0 – 12 (% annual return if you invest the lump)
`survivor-pct`	50	0 – 100 (HH only — % spouse receives after first death; common values: 50, 66, 75, 100)
`refsrc`	(none)	partner attribution tag

Honest scope: Nominal dollars only — no inflation adjustment, no COLA on annuity (most pensions are flat). Taxes treated equally between options (both options pay ordinary income tax similarly when received). Assumes pension is in user's name (survivor benefit applies when user dies first; swap inputs if pension is in spouse's name). Spouse assumed same age as user (pension starts same year). Doesn't model partial commutation (some plans offer partial lump + partial annuity). For multi-year retirement-plan modeling with this decision applied, use the full app.

Theming

Override CSS custom properties on the host:

retirement-calc-pension {
  --rc-accent: #ff6b35;    /* primary color */
  --rc-bg: #ffffff;        /* card background */
  --rc-surf: #f7f9fc;      /* sub-surface (result area) */
  --rc-text: #1a1f2e;
  --rc-muted: #6a7280;
  --rc-border: rgba(20,30,50,0.10);
  --rc-radius: 12px;
}

Events

The element emits two custom events you can listen to:

document.querySelector('retirement-calc-pension')
  .addEventListener('rc-calculated', (e) => {
    console.log('Annuity wins?', e.detail.annuityWins);           // boolean
    console.log('NPV delta:', e.detail.npvDelta);                 // absolute dollar advantage
    console.log('Break-even rate:', e.detail.breakEvenRate);      // % or null
    console.log('Annuity PV at return:', e.detail.pvAnnuityAtReturn);  // dollars
    console.log('Lump sum offered:', e.detail.lumpSum);
    console.log('Annuity nominal total:', e.detail.annuityTotalNominal);
  });

document.querySelector('retirement-calc-pension')
  .addEventListener('rc-cta-clicked', (e) => {
    console.log('User clicked CTA to:', e.detail.url);
  });