Security ROI Calculator Builder

A no-code tool for cybersecurity marketers to build and embed interactive ROI calculators.

Type Open Source Tool
Stack React + Vanilla JS widget
License MIT

Most cybersecurity marketing teams need to quantify risk for prospects. But every time the numbers need to change, or a new product launches, or a different sales team wants a different calculator, they're back in a developer queue. This tool removes that dependency.

The ROI Calculator Builder lets a marketer configure a fully custom calculator through a visual interface, defining inputs, writing formulas, and setting branding, then copy a single <script> tag to embed the result anywhere.

How to use it
  1. 1
    Template Info Set your calculator title, product name, and description. The product name populates automatically in output labels like "Risk Exposure With Acme Shield."
  2. 2
    Branding Set your primary color, accent color, and font. Changes reflect immediately in the live preview on the right.
  3. 3
    Input Fields Toggle which inputs your prospects see versus which are fixed assumptions. By default, only employee count and FTE cost are visible. Everything else (escalation rates, IR costs, product impact) is pre-set but hidden.
  4. 4
    Outputs & Formulas Review or modify the formula for each output. All formulas are plain JavaScript expressions using input variable IDs. Edit them directly or add new outputs.
  5. 5
    Call to Action Set your CTA button text and URL. Use a UTM-tagged link to track calculator conversions in your analytics platform.
  6. 6
    Embed Switch to the Embed Code tab in the right panel. Copy the script tag and paste it anywhere on your site. No server required. The full configuration is encoded in the tag.
The cost model

The default template is built specifically for cybersecurity products. It models four cost areas: breach exposure (driven by five IBM-sourced factors), security incident management, staff productivity loss, and compliance and regulatory risk.

Breach probability is derived from incident count rather than entered as a standalone input. When a marketer shows that their product reduces incidents by 70%, that reduction flows automatically through to breach exposure, reducing both the frequency and cost of breaches simultaneously. The relationship is transparent and auditable.

The model is calibrated to behave differently across the company size spectrum. Breach costs are anchored at 10,000 employees, where IBM's Cost of a Data Breach data is most representative. At large enterprise scale, the incident-to-breach escalation rate decreases because larger organizations tend to have more mature detection and response capabilities. Productivity loss grows sub-linearly with headcount, reflecting the reality that a security incident doesn't consume proportionally more staff attention just because a company is bigger.

Hosting the widget file

The embed tag generated by the builder points to a copy of roi-widget.js hosted here, so you can test your calculator immediately without setting anything up. That's fine for evaluation, but it's not the right deployment path for production.

For any page you're sending real traffic to, download roi-widget.js from the GitHub repo and host it on your own CDN or web server. Then update the src attribute to point to your copy. Your embed will have no dependency on this site. It won't break if my URL changes, and you control when (or whether) you take updates to the widget.

The widget file is intentionally small and self-contained. No framework, no dependencies, no build step required on your end. Drop the file, update the path, done.

Editing an existing calculator

Your full configuration is encoded in the data-config attribute of the script tag, not stored anywhere on a server. That means the builder has no memory of a calculator you've already deployed. If you come back to make changes, you need to reload your configuration from the tag.

Open the builder, go to the Embed Code tab, and paste your existing script tag into the "Load Existing Calculator" section at the bottom. The builder decodes the tag and restores your full configuration. Make your changes, copy the new tag from the top of the panel, and replace the tag on your site.

Your browser session is also auto-saved, so if you close the tab mid-edit and come back on the same device, your work will be there. The auto-save is separate from your deployed embed. Publishing always requires copying the new tag and re-deploying it.

Try the Builder

Configure a calculator below and copy the embed code from the right panel.

The builder is a desktop tool and is not designed for mobile. Visit this page on a laptop or desktop to use it.