Building a pricing page on HubSpot CMS has always meant compromises. You either settle for a basic pricing table module that shows static cards and nothing else, or you hire a developer to build a custom solution from scratch. Neither option is ideal. Static pricing tables cannot handle the interactive elements that modern SaaS and service companies need — billing toggles, quantity-based calculations, add-on selectors, or feature comparison tables. And custom builds are expensive, time-consuming, and difficult to maintain.
Pricing Calculator Pro eliminates that trade-off. It is the most comprehensive interactive pricing module available on the HubSpot Marketplace — a single module that combines a billing toggle, quantity slider with live number input, tiered pricing cards, optional add-ons, an estimated cost calculator, and a collapsible feature comparison table. All of it is configurable from the HubSpot visual editor with 90+ style controls and zero hardcoded values.
This article walks through everything the module includes, how the interactive pricing calculator works, and why it matters for SaaS companies, agencies, and service businesses building pricing pages on HubSpot.
Most pricing page modules on the HubSpot Marketplace follow the same template: a row of cards, each with a plan name, a price, a feature list, and a CTA button. That format works for the simplest pricing structures, but it falls apart when your pricing model has any complexity at all.
Consider what a typical SaaS pricing page actually needs to communicate:
None of these are exotic requirements. They are standard elements on pricing pages for companies like Slack, HubSpot itself, Notion, and virtually every SaaS product with tiered pricing. But until now, building this kind of pricing page on HubSpot CMS meant custom development. Pricing Calculator Pro brings all of these capabilities into a single, configurable HubSpot module.
The billing toggle lets visitors switch between two pricing options — typically monthly and annual billing, but the labels are fully customizable. You could use "Starter" and "Growth," "Standard" and "Enterprise," or any two labels that fit your pricing structure.
The toggle includes an animated switch with smooth transitions between price sets. When visitors flip the toggle, every pricing card on the page updates simultaneously. An optional counting animation makes the price change feel dynamic rather than abrupt, which reinforces the value difference between the two options.
An optional discount badge can be positioned above, inline with, or below the toggle. This is where you surface the annual savings — "Save 20%" or "2 months free" — at exactly the moment a visitor is considering which billing period to choose. The badge position is configurable because the right placement depends on your page layout and visual hierarchy.
The quantity slider is one of the most powerful features in Pricing Calculator Pro. It is a draggable range slider synced with a number input field — visitors can drag the slider thumb or type an exact value directly. As they adjust the quantity, every pricing card on the page recalculates in real time.
The slider supports three pricing modes, covering the most common pricing structures in SaaS and service businesses:
The estimated cost box updates live as visitors move the slider. It shows the total price and an optional breakdown formula — for example, "50 users x $10/user + $29 add-on = $529/mo" — so visitors understand exactly how the number is calculated. This transparency builds trust and reduces friction at the point where pricing uncertainty often causes visitors to leave the page.
Pricing Calculator Pro includes a dedicated add-on section with checkbox-based items. Each add-on can include an icon, a name, a description, and a price. Add-ons can be flat-rate (a fixed cost added to the total) or per-unit priced (multiplied by the quantity from the slider).
When a visitor checks an add-on, the estimated cost boxes across all pricing cards update immediately. The breakdown formula includes the add-on cost so visitors see exactly how it affects their total. This makes it possible to present optional features, premium support tiers, implementation packages, or any supplementary offering alongside the core pricing plans.
The add-on section has its own layout settings — columns, gap, and padding are independent of the pricing cards. You can display add-ons in a single column list or a multi-column grid depending on how many options you offer and how much visual space they need.
The feature comparison table is a collapsible section that shows a detailed side-by-side feature comparison across all pricing tiers. This is the element that separates a professional pricing page from a basic one. When visitors are deciding between plans, they need to see exactly what is included in each tier without scrolling between separate plan pages.
The comparison table supports categorized rows, so you can group features under headings like "Core Features," "Integrations," "Support," and "Security." Each feature row shows a check icon, a cross icon, or custom text for each tier. Sticky headers keep the plan names visible as visitors scroll through long feature lists.
On mobile, the table scrolls horizontally with all columns accessible via swipe. The collapsible behavior — controlled by an animated chevron trigger — lets visitors expand the table when they want details and collapse it when they are ready to act. This keeps the pricing page scannable while still providing the depth of information that informed buyers need.
Each pricing card in the module supports a rich set of content fields that go well beyond a basic plan name and price:
One of the most conversion-focused features in Pricing Calculator Pro is CTA parameter passing. When enabled, the CTA buttons on each pricing card automatically append the visitor's selections — the selected plan, billing period, quantity, and checked add-ons — as URL parameters on the button link.
This means when a visitor clicks "Start free trial" after configuring 25 users on annual billing with a premium support add-on, the checkout or signup page receives all of that information in the URL. The receiving page can pre-fill the signup form, pre-select the plan, or pass the data through to your payment processor. No custom JavaScript needed. No form hidden fields. The pricing page and the checkout page stay connected through standard URL parameters.
For SaaS companies and service businesses, this eliminates one of the most common conversion leaks — the disconnect between the pricing page and the signup flow. Visitors who have already configured their plan on the pricing page should not have to reconfigure it on the next page.
Pricing Calculator Pro includes built-in event tracking that fires automatically as visitors interact with the module. Every meaningful interaction generates an analytics event:
Events are pushed to three destinations simultaneously: Google Tag Manager (dataLayer), HubSpot behavioral events (_hsq), and custom DOM events. This triple-push approach means your analytics setup can capture pricing page interactions regardless of which tracking platform you use. There is no additional scripting required — the events fire out of the box the moment the module is installed.
For marketing and product teams, this data answers questions that are otherwise invisible: What quantity range do visitors explore most? How many visitors switch to annual billing? Which add-ons get the most interest? Which plan's CTA gets clicked most often? This behavioral data from the pricing page is among the most commercially valuable analytics a SaaS company can capture.
Pricing Calculator Pro supports 1 to 5 column grids, giving you flexibility to present your pricing structure in whatever format fits best:
On mobile, three layout modes are available: stack (single column), horizontal scroll (swipeable cards), and tabbed navigation (one tier visible at a time with tab buttons). The featured card automatically promotes to the top position on mobile so the recommended plan is always seen first.
The Style tab contains over 90 configurable fields organized by component. This is not a handful of color pickers — it is full visual control over every element the module renders:
Nothing is hardcoded. Every color, every spacing value, every shadow, every hover state, every font size — all configurable from the visual editor. If you can see it on the pricing page, you can style it from the Style tab.
Pricing Calculator Pro is built with pure vanilla JavaScript. There is no jQuery dependency, no React, no external animation library, and no third-party framework adding weight to the page. Every interaction — the slider, the toggle, the add-on checkboxes, the live calculations, the comparison table expand/collapse, the analytics event dispatching — is handled with native browser APIs.
For teams that care about page performance and Core Web Vitals, this matters. The module adds no external HTTP requests beyond its own code. There are no render-blocking third-party scripts to wait for. The pricing page loads fast and interacts smoothly because the JavaScript is purpose-built for exactly what it needs to do and nothing more.
The module is designed for businesses where pricing is not a static number on a page but a dynamic conversation with the visitor:
Most pricing modules on the HubSpot Marketplace offer static cards with a plan name, price, feature list, and button. Some add a billing toggle. Very few go further than that.
Pricing Calculator Pro is fundamentally different because it treats the pricing page as an interactive tool, not a static display. The quantity slider with live calculation, the add-on selectors that feed into the total, the breakdown formula that shows visitors exactly how the price is computed, the CTA parameter passing that carries their selections to checkout, and the built-in analytics that capture every interaction — these are capabilities that previously required custom development.
The comparison between a static pricing table and Pricing Calculator Pro is the comparison between showing visitors a menu and handing them a calculator. One presents information. The other lets visitors explore, configure, and understand their cost before they commit. That difference shows up directly in conversion rates.
Pricing Calculator Pro is available on the HubSpot Marketplace for $14.99. After installing the module, it appears in your HubSpot module library and can be dragged onto any page. Configure your pricing tiers, set up your billing toggle, adjust the slider range and pricing mode, add your features and add-ons, style everything from the Style tab, and publish.
Full product details, live demos, and documentation are available on the Pricing Calculator Pro product page.
If your HubSpot pricing page is a static row of cards and you know it should be doing more, Pricing Calculator Pro is the upgrade. Billing toggle, quantity slider, live cost calculator, add-ons, feature comparison table, built-in analytics, CTA parameter passing, and 90+ style controls — the most complete interactive pricing module on the HubSpot Marketplace.