Usage Estimator
An interactive estimator with a seats slider and annual switch on one side and an inverted summary card with a line item breakdown on the other.
An interactive estimator with a seats slider and annual switch on one side and an inverted summary card with a line item breakdown on the other.
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 Estimator turns pricing into a conversation about the visitor's own team. A centered header sits above a single split panel: the left half holds a seats slider with a live readout, an annual billing switch, and a short list of what every plan includes, while the right half is an inverted summary card that recomputes the bill line by line as the controls move.
The math is a fixed base fee plus a per seat rate, with the annual switch shaving a set amount off every seat, so the breakdown always adds up in front of the visitor. Rates and limits live in small constants at the top of the file, and the whole panel is drawn with theme tokens so it holds up in light and dark mode.
Reach for this block when your product bills by seat and prospects keep asking what it would cost for their team. It suits the pricing page of a team tool where headcount is the only real variable, letting a ten person startup and a forty person agency each see their own number without decoding a tier table. Because the estimate updates instantly, it also softens the jump from a free tier to a paid plan.
A natural flow around it on a Marketing Pro page:
Before
After
The obvious fit is per seat SaaS pricing with an annual discount. A few other ways to use the frame:
Tip: keep the slider range honest. Cap it where your self serve pricing genuinely ends and hand bigger teams to sales instead of showing a made up number.