✦ Embeddable · v1

An embeddable retirement calculator that answers one question.

What's the best age to claim Social Security? Drop a single script tag into your site, then use <retirement-calc-ss> as a custom HTML element anywhere on the page.

Part of the retirement calculator family — same engine math, different question. Household mode includes survivor benefit math.

Live demos

Default (single, defaults)

Themed (orange accent, household, pre-seeded)

Preview your theme

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

Theme colors

Big number, slider thumb, CTA button
#4f8ec9
Outer surface of the calc
#ffffff
Result area + toggle background
#f7f9fc
Title, slider values, result subline
#1a1f2e
retirement-calc-ss {
  --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/ss.js"></script>

<retirement-calc-ss></retirement-calc-ss>

Or pre-seed values relevant to your audience:

<retirement-calc-ss
  plan-type="household"
  current-age="62"
  fra-benefit="2800"
  life-expectancy="92"
  spouse-current-age="60"
  spouse-fra-benefit="2200"
  spouse-life-expectancy="94">
</retirement-calc-ss>

Attributes

AttributeDefaultRange
plan-typesinglesingle or household
current-age6050 – 80
fra-benefit2500500 – 6000 (your monthly SS benefit at Full Retirement Age — read this from your SSA statement)
life-expectancy9070 – 100 (the longer you live, the more delaying wins)
spouse-current-age5850 – 80 (household only)
spouse-fra-benefit1800500 – 6000 (household only — your spouse's SSA-statement number)
spouse-life-expectancy9270 – 100 (household only)
refsrc(none)partner attribution tag

Honest scope: Assumes Full Retirement Age 67 (born 1960+). Spousal 50% benefit (non-working spouse) not modeled — assumes both spouses have own earning records. SS taxation not included. Lifetime SS in today's dollars. Survivor benefit math embedded for household — when first spouse dies, survivor keeps the larger of own benefit or deceased's adjusted benefit.

Theming

Override CSS custom properties on the host:

retirement-calc-ss {
  --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-ss')
  .addEventListener('rc-calculated', (e) => {
    console.log('Optimal strategy:', e.detail.optimalStrategy);
    console.log('All strategies:', e.detail.strategies);
    console.log('Breakeven age (single only):', e.detail.breakeven);
  });

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