Most legacy-planning content stops at "spend less, save more." This calculator doesn't — it runs a real 1,000-scenario simulation against the numbers a reader enters, and shows what their plan actually leaves for heirs across the range of futures the market might hand them. Drop it into your own article in one script tag, and it looks like it was built for your site, not bolted onto it.
Sibling of <retirement-calc-age> — same engine, different question.
Full explanation: Legacy & Estate Planning →
See it in context
Here's exactly what that looks like — a live instance embedded inside a sample article, using someone else's fonts and colors, not ours.
That's the exact <retirement-calc-legacy> widget, unmodified — same script tag, same math as the full app. See the full picture → · Jump to the embed code ↓
Everything below is for embedding this calculator on your own site — integration code, theming, and events.
Pick colors that match your site, then copy the CSS snippet at the bottom.
retirement-calc-legacy {
--rc-accent: #4f8ec9;
--rc-bg: #ffffff;
--rc-surf: #f7f9fc;
--rc-text: #1a1f2e;
}
Drop this into your HTML:
<script src="https://app.retirementscenario.com/embed/v1/legacy.js"></script>
<retirement-calc-legacy></retirement-calc-legacy>
In the partner program? Add your via tag — readers who click through to the full app then credit your account (40% of anything they buy, 90-day window):
<retirement-calc-legacy via="your-partner-name"></retirement-calc-legacy>
Or pre-seed values relevant to your audience:
<retirement-calc-legacy
plan-type="household"
current-age="48"
current-savings="1200000"
contrib-annual="35000"
retirement-age="62"
monthly-goal="7500"
ss-amount="2700"
return-pct="7.0">
</retirement-calc-legacy>
| Attribute | Default | Range |
|---|---|---|
current-age | 50 | 30 – 70 |
current-savings | 1000000 | 0 – 5,000,000 |
contrib-annual | 25000 | 0 – 50,000 (incl. employer match) |
retirement-age | 65 | 50 – 75 (planned retirement age) |
monthly-goal | 5000 | 1,000 – 20,000 (today's-$ monthly retirement spending) |
ss-amount | 2500 | 0 – 5,000 (monthly at FRA) |
return-pct | 7.0 | 4.0 – 10.0 (nominal annual %, engine handles inflation) |
plan-type | single | single or household — Household mode assumes a spouse matching your age, retirement age, Social Security benefit, and contribution — enter savings and spending as household totals. |
refsrc | (none) | optional placement label for your own tracking (analytics only) |
via | (none) | your affiliate tag — credits your partner account (40% of referred purchases) when readers click through and buy |
Override CSS custom properties on the host:
retirement-calc-legacy {
--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;
}
The element emits two custom events you can listen to:
document.querySelector('retirement-calc-legacy')
.addEventListener('rc-calculated', (e) => {
console.log('Today\'s $ median legacy:', e.detail.todayMedian);
console.log('Nominal median legacy:', e.detail.nominalMedian);
});
document.querySelector('retirement-calc-legacy')
.addEventListener('rc-cta-clicked', (e) => {
console.log('User clicked CTA to:', e.detail.url);
});