✦ Embeddable · v1

An embeddable retirement calculator that answers one question.

What's the max safe Roth conversion this year? Drop a single script tag into your site, then use <retirement-calc-roth> as a custom HTML element anywhere on the page. Models 3 constraints simultaneously: federal bracket (auto-detected), IRMAA Tier 1 (Medicare-eligible), and ACA cliff (pre-Medicare). Surfaces the binding constraint so users understand WHY they can't convert more.

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

Live demos

Default (single, defaults)

Themed (orange accent, pre-Medicare household, ACA-constrained)

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

<retirement-calc-roth></retirement-calc-roth>

Or pre-seed values relevant to your audience:

<retirement-calc-roth
  plan-type="household"
  current-age="62"
  annual-magi="75000">
</retirement-calc-roth>

Attributes

Attribute	Default	Range
`plan-type`	household	`single` or `household` (= MFJ)
`current-age`	67	50 – 85 (under 65 = ACA cliff applies; 65+ = IRMAA Tier 1 applies)
`annual-magi`	100000	30,000 – 1,000,000 (your MAGI before any Roth conversion)
`refsrc`	(none)	partner attribution tag

Honest scope: 2026 IRS brackets + standard deduction (refresh annually with the engine's IRS-limits refresh slice). Auto-detects your current federal bracket from your MAGI; conversion stays within current bracket (conservative). For FIRE-community strategies that fill higher brackets (e.g. "fill 22% bracket" or "fill 24% bracket"), use the full app's Roth Strategies card. Doesn't model SS taxability provisional income shifts from conversions; doesn't model state taxes; doesn't model itemized deductions. Single-year answer — for multi-year optimization across the bridge period, use the full app.

Theming

Override CSS custom properties on the host:

retirement-calc-roth {
  --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-roth')
  .addEventListener('rc-calculated', (e) => {
    console.log('Sweet spot conversion:', e.detail.sweetSpot);    // dollars, null if no constraints apply
    console.log('Binding constraint:', e.detail.bindingConstraint); // 'Federal X% bracket' | 'IRMAA Tier 1' | 'ACA subsidy cliff'
    console.log('All constraints:', e.detail.constraints);        // array of { name, threshold, headroom, impact, applicable }
    console.log('Current bracket:', e.detail.bracket);            // { top, rate, bracketNum }
    console.log('Medicare-eligible?', e.detail.medicareEligible);
  });

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