ROI Calculator on Confluence

A Cloud Migration Proposal usually buries its ROI math in a paragraph or bolts it onto a linked spreadsheet nobody opens. Embed a live ROI calculator directly on the Confluence page instead — readers change the numbers and watch payback period, annual savings, and 3-year ROI update instantly, without leaving the doc.

The numbers above are a demo. Try changing the current infrastructure cost, migration cost, or expected annual savings — the result recomputes as you type or drag the sliders.

The problem it solves

When a stakeholder wants to test their own assumptions against your migration business case, they have to open Excel, hunt down the right linked spreadsheet, or ask you to re-run the math with different numbers. Each of those is a context switch that costs momentum, and most readers never make it — they skim the static numbers you gave them, or skip the ROI section entirely. The part of the proposal that should be doing the most persuading ends up the part nobody touches.

Mini Sites removes that context switch. The calculator lives on the page, next to the argument it supports, and it responds to the reader's own numbers instead of yours.

How it works

1. Create — Build (or generate, see the prompt below) a small self-contained HTML/CSS/JS bundle like the one in the demo above: an index.html, a stylesheet, and a script.
2. Upload — Add the bundle's files to the Mini-Site macro on your Confluence page.
3. Publish — The macro serves the bundle live, inline, on the page. Readers interact with it right where the proposal already lives — no separate link, no login, no spreadsheet.

Prompt

Want your own version — adapted to your numbers, or a different calculator entirely? Paste this into Claude, ChatGPT, or a similar AI assistant and fill in the bracketed details for your scenario.

I want you to build me a small, self-contained interactive ROI calculator as a
single-page web app. I will upload the files it produces directly into a
Confluence page using an app called "Mini Sites," so it must follow these
hard constraints:

1. Output exactly three files: index.html, styles.css, and calculator.js.
2. No external dependencies of any kind — no CDN links, no npm packages, no
   Google Fonts, no icon libraries, no build step. Everything must run by
   double-clicking index.html or serving the folder with a plain static
   file server.
3. All JavaScript must be vanilla (no frameworks). All CSS must be plain CSS
   (no preprocessors).
4. The page must work fully offline and never make a network request.
5. Do NOT use localStorage, sessionStorage, IndexedDB, or cookies — Mini Sites serves the bundle
   in a sandboxed iframe with an opaque origin, where all of those throw or silently no-op. Keep
   all state in plain JS variables; it's fine if it resets on reload.

Here is the calculator I need:

- Title / context: [e.g. "Cloud Migration ROI Calculator" — describe what
  business decision this supports]
- Inputs (as number fields AND matching sliders, kept in sync with each
  other): [list 2-4 inputs, e.g. "Current infrastructure cost per year",
  "Migration cost (one-time)", "Expected annual savings"]
- Outputs (recalculated live on every input change, no submit button):
  [list the outputs and their formulas, e.g. "Payback period = migration
  cost / annual savings", "3-year ROI % = ((annual savings * 3 - migration
  cost) / migration cost) * 100"]
- Reasonable default values pre-filled in each input so the calculator shows
  a sensible result before anyone touches it.
- Format currency values with thousands separators and a $ sign. Format
  percentages with a % sign. Handle divide-by-zero and empty inputs
  gracefully (show "N/A" instead of erroring).

Design requirements:

- Clean, professional, modern look — this represents our company to
  prospects and clients reading a business proposal. Use a light theme,
  generous whitespace, clear typography, and a card-based layout for inputs
  vs. outputs.
- Make the primary output (the number that matters most for the decision)
  visually emphasized — larger text and/or a distinct accent color.
- Responsive: usable on a laptop screen inside a Confluence page and on a
  narrower viewport.

Please output the full contents of all three files, ready to save and
upload as-is.

After generating: save the three files locally with the exact names above, open index.html in a browser to confirm the numbers update as you type, then add the Mini-Site macro to your Confluence page and upload all three files. Publish, and the calculator renders live, inline, on the page.

Related

• Mini Sites for Confluence — the hub page: what the app is, how the sandbox works, limits and permissions.

Install Mini Sites for Confluence →