What could break my retirement plan? Drop a single script tag into your site, then use <retirement-calc-stress> as a custom HTML element anywhere on the page. Runs the user's plan through 4 canonical stress scenarios (crash at retirement, longevity, SS benefits cut 25%, Lost Decade) and ranks them by impact. First risk-ranking embed in the family — the headline names the biggest risk to THIS user's plan, not a generic one.
Complementary to <retirement-calc-resilience> (single sequence-risk scenario, deeper) — Stress Portfolio gives the multi-scenario ranked view, Resilience gives the single-scenario verdict.
Pick colors that match your site, then copy the CSS snippet at the bottom.
retirement-calc-stress {
--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/stress.js"></script>
<retirement-calc-stress></retirement-calc-stress>Or pre-seed values relevant to your audience:
<retirement-calc-stress
plan-type="household"
current-age="60"
retirement-age="65"
nest-egg="1000000"
monthly-goal="6000"
ss-fra-benefit="2500"
life-expectancy="90"
expected-return="6">
</retirement-calc-stress>| Attribute | Default | Range |
|---|---|---|
plan-type | single | single or household |
current-age | 55 | 30 – 80 |
retirement-age | 65 | 45 – 80 |
nest-egg | 800000 | 100,000 – 10,000,000 (portfolio at retirement) |
monthly-goal | 5000 | 1,000 – 30,000 (monthly spending target) |
ss-fra-benefit | 2200 | 0 – 5,000 (SS at full retirement age — typical SSA statement number) |
life-expectancy | 90 | 70 – 105 |
expected-return | 6 | 2 – 12 (% expected pre-retirement nominal return) |
refsrc | (none) | partner attribution tag |
Honest scope: 4 canonical stresses chosen to span distinct risk dimensions (market timing, longevity, policy, prolonged returns). Doesn't include healthcare shock (requires fiddly baseline setup) or pure high inflation (engine's all-pass-through model makes it neutral for SS-heavy plans). SS-cut stress assumes 25% benefit reduction (CBO's no-action projection for the trust fund around 2033). Single retirement horizon; full app handles staggered/multi-event plans. 5× MC (~3-5 sec total compute).
Override CSS custom properties on the host:
retirement-calc-stress {
--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-stress')
.addEventListener('rc-calculated', (e) => {
console.log('Baseline success rate:', e.detail.baselineSR); // %
console.log('Biggest risk:', e.detail.biggestRisk); // label string
console.log('All stresses ranked:', e.detail.stresses); // array sorted by impact (worst first)
});
document.querySelector('retirement-calc-stress')
.addEventListener('rc-cta-clicked', (e) => {
console.log('User clicked CTA to:', e.detail.url);
});