Product Configurator on Confluence

Stop explaining every configuration. Let people explore it themselves. Your solution-architecture or sales-engineering docs already answer "if you pick region X + plan Y + N users, here's what you get" — just as a wall of bullet lists, one per combination. Embed a live product configurator directly on the Confluence page instead: readers pick region, plan, user count, storage, and integrations, and the recommended architecture, estimated cost, and feature availability update instantly, in front of them.

The plans and pricing above are a demo. Try changing the region, dragging the users slider, switching plan tier or storage, or toggling an integration — the architecture, cost, and feature list all recompute as you go.

The problem it solves

Solution architects and sales engineers maintain the same answer over and over: a matrix of region × plan × user-count × storage × integration combinations, each written out as its own bullet list or table row because a static doc can't compute anything. Every new combination a prospect asks about means another paragraph to write, another row to keep in sync, another chance for the doc to drift out of date with what the product actually offers. Readers, meanwhile, have to find the row that matches their situation in a list built for every situation — or just ask you directly, which is the conversation the doc was supposed to prevent.

Mini Sites removes the search. The configurator lives on the page, next to the solution doc it supports, and it computes the answer for the reader's own combination instead of listing every combination up front.

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 configure it right where the solution doc already lives — no separate link, no login, no spreadsheet.

Prompt

Want your own version — adapted to your product's plans, regions, and pricing? 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 product configurator
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 app.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. Every output value must recompute live, on every input change — no submit
   button, no page reload.
6. 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 configurator I need:

- Product / context: [e.g. "Enterprise SaaS deployment configurator" —
  describe what decision this supports, e.g. sizing a deployment for a
  prospect during a sales-engineering or solution-architecture conversation]
- Inputs (mix of dropdowns, a slider, and checkboxes): [list 4-6 inputs,
  e.g. "Deployment region (US / EU / APAC)", "Number of users (1-1000,
  slider)", "Plan tier (Starter / Business / Enterprise)", "Storage tier
  (Standard / Extended / Unlimited)", "Integrations (SSO, API access, audit
  log export, data residency controls — checkboxes)"]
- Outputs (recalculated live on every input change):
  - Recommended architecture: [describe the rules, e.g. "under 25 users on
    Starter = single-region shared cluster; over 200 users or Enterprise
    plan = multi-region active-active cluster; Enterprise + data residency
    checked = deployment pinned to the selected region"]
  - Estimated cost: [describe the formula, e.g. "per-user monthly rate by
    plan tier × user count × regional cost multiplier, plus flat or metered
    add-ons for storage tier and enabled integrations"]
  - Feature availability: [list which integrations/features are included,
    optional, or unavailable per plan tier, and show that clearly — e.g. a
    checklist with a distinct visual state for "included", "available but
    not enabled", and "not offered on this plan"]
- Reasonable default values pre-selected so the configurator shows a
  sensible result before anyone touches it.
- Format currency values with thousands separators, a $ sign, and a
  "/ mo" suffix. Handle edge cases gracefully (e.g. zero users, no plan
  selected) without erroring.

Design requirements:

- Clean, professional, modern look — this represents our company to
  prospects and clients evaluating a technical proposal. Use a light theme,
  generous whitespace, clear typography, and a two-column layout: inputs on
  one side, live outputs (architecture, cost, feature list) on the other.
- Make the cost output visually emphasized — larger text and/or a distinct
  accent color — since it is usually the number a reader scans for first.
- Responsive: usable on a laptop screen inside a Confluence page and on a
  narrower viewport (stack to a single column below ~720px).

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 directly in a browser and change every input to confirm architecture, cost, and feature availability all update correctly, then add the Mini-Site macro to your Confluence page and upload all three files. Publish, and the configurator 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.
• ROI Calculator for Confluence — the same live-recalculation pattern applied to a cloud migration business case.

Install Mini Sites for Confluence →