CTA with ROI calculatorPro

Team size, report hours, an hour's cost and the tools you'd retire in; the yearly saving, the return and the payback out, adding up line by line.

When to use

A calculator that works out the yearly saving and return from the visitor's own team and costs.
B2B pricing and sales pages, where the case is made in money.

When not to use

Self-serve products with a low price: the maths gets in the way of signing up; CTA banner.
Savings you can't stand behind: it estimates from the visitor's own numbers, so its assumptions must be honest.

Usage

CTA with ROI calculator with your own data: every prop has the sample as its default, so pass only what you have.

example.tsx

1import { CtaRoi } from "@/components/dashral/blocks/cta-roi"
2
3<CtaRoi
4  product="Acme"
5  tools={replacedTools}
6  currency="EUR"
7  cta={{ label: "Book a demo", href: "/demo" }}
8/>

API reference

CtaRoi

A call to action that makes the case in numbers: the team size, the hours each person spends on reports, what an hour costs and the tools you'd retire go in; out comes the yearly saving (counting to its new value), how it adds up line by line, the return and how many days it takes to pay for itself, and today against with the product. Copy estimate puts the summary on the clipboard. The assumptions are written under it. Every part comes from props: your product, its price and what it saves, the tools it replaces, and where the call to action goes.

Prop	Type	Default
`eyebrow`	`React.ReactNode`	`"Return on investment"`
`title`	`React.ReactNode`	`sample`
`description`	`React.ReactNode`	`sample`
`product`	`string` Your product's name, in the breakdown, the bars and the copied summary.	`"Acme"`
`assumptions`	`{ timeSaved: number; weeks: number; pricePerSeat: number; plan: string }` The assumptions behind the estimate, written under it: the share of report hours that comes back, working weeks a year, and the price a person a month on `plan`.	`sample`
`tools`	`RoiTool[]` The tools it could retire, at what a month, and teams like the visitor's to fill everything in at once.	`sample`
`presets`	`RoiPreset[]`	`sample`
`initial`	`{ people: number; hours: number; rate: number; tools: string[] }` Where the inputs start.	`sample`
`currency`	`string` The money format.	`"USD"`
`locale`	`string`	`"en-US"`
`cta`	`{ label: string; href?: string; onClick?: (estimate: RoiEstimate) => void }` The call to action: a link, or your own handler with the estimate as it stands.	`sample`

type RoiTool

Prop	Type	Default
`id`	`string`	—
`name`	`string`	—
`monthly`	`number`	—

type RoiPreset

Prop	Type	Default
`name`	`string`	—
`people`	`number`	—
`hours`	`number`	—
`rate`	`number`	—
`tools`	`string[]`	—

type RoiEstimate

The estimate as it stands, for your call to action.

Prop	Type	Default
`people`	`number`	—
`hoursSaved`	`number`	—
`timeValue`	`number`	—
`toolSavings`	`number`	—
`cost`	`number`	—
`saving`	`number`	—
`roi`	`number`	—
`paybackDays`	`number \| null`	—