Usage Cost Estimator
Two column pricing estimator with seat and project steppers and add on switches beside a live itemized receipt that totals your monthly cost.
Two column pricing estimator with seat and project steppers and add on switches beside a live itemized receipt that totals your monthly cost.
Search blocks by description or jump to a page.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Usage Cost Estimator lets the buyer build their own bill. Stepper rows for seats and projects sit beside two add on switches, and every change lands on a live receipt to the right, line by line, ending in the monthly total and a note on what paying yearly saves at that size. The lede promises the number before checkout, and the receipt keeps that promise.
A client component on the ui Button and Switch with plain useState, the constants at the top of the file are the whole price model, the base price, the included allowances, and the per seat and per pack rates. Set them to your own plan and the steppers, the switches, and the total all recompute together.
Reach for this block on a pricing page where the plan is usage based and the sticker number depends on the buyer. A table of tiers makes them do the arithmetic in their head, the estimator does it for them and shows the total the moment they stop dragging, which is exactly when intent peaks and the CTA is waiting.
A natural flow around it on a Marketing Pro page:
Before
After
One strong use is a per seat plan with project packs. Other billing shapes:
Tip: keep every line on the receipt, a total with no breakdown reads as a number you made up on the spot.