✦ Embeddable · v1

An embeddable retirement calculator that answers one question.

Will my income trigger IRMAA? Drop a single script tag into your site, then use <retirement-calc-irmaa> as a custom HTML element anywhere on the page. Shows the user's IRMAA tier + per-person + household surcharge cost + cliff proximity awareness. 2-year lookback rule surfaced; all-tiers reference table built in.

Sibling of <retirement-calc-spend> — same engine, different question.

Live demos

Default (single, defaults)

Themed (orange accent, single filer, pre-Medicare)

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-irmaa {
  --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/irmaa.js"></script>

<retirement-calc-irmaa></retirement-calc-irmaa>

Or pre-seed values relevant to your audience:

<retirement-calc-irmaa
  plan-type="household"
  current-age="67"
  annual-magi="220000">
</retirement-calc-irmaa>

Attributes

AttributeDefaultRange
plan-typehouseholdsingle or household (= MFJ)
current-age6755 – 85 (pre-65 users see forward-looking projection)
annual-magi22000050,000 – 1,000,000 (your forward-looking MAGI — IRMAA uses 2-yr lookback)
refsrc(none)partner attribution tag

Honest scope: 2026 IRS values (refresh annually with the engine's IRS-limits refresh slice). Combined Medicare Part B + Part D surcharge per person per year. Doesn't model Part A premiums (employment-based, separate). Doesn't model Medigap or Medicare Advantage premiums (plan-specific). IRMAA uses a 2-year lookback — your 2026 surcharge is based on your 2024 MAGI. Enter your forward-looking MAGI; the calc shows what would apply if MAGI stays at this level.

Theming

Override CSS custom properties on the host:

retirement-calc-irmaa {
  --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-irmaa')
  .addEventListener('rc-calculated', (e) => {
    console.log('IRMAA tier:', e.detail.tier);             // null = standard premium; else { tierNum, threshold, perPerson }
    console.log('Per person/yr:', e.detail.perPerson);
    console.log('Household/yr:', e.detail.householdAnnual);
    console.log('Distance over current tier:', e.detail.distanceFromCurrentTier);
    console.log('Distance to next tier:', e.detail.distanceToNextTier);
    console.log('Medicare-eligible?', e.detail.medicareEligible);
  });

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