HubSpot Marketplace Module

Pricing Calculator Pro

Interactive Pricing Pages for HubSpot CMS

A premium interactive pricing calculator with billing toggle, quantity slider, tiered pricing cards, add-on selectors, estimated cost calculator, and collapsible feature comparison table — all in one HubSpot module with 90+ style controls and built-in analytics.

Get the Module arrow_outward Works with any HubSpot CMS theme · Pure vanilla JavaScript
Pricing Calculator Pro module for HubSpot CMS showing interactive pricing cards with billing toggle and quantity slider

Everything you need in a pricing page

calculate

Live Pricing Calculator

Real-time price calculation as visitors adjust quantity via the draggable slider or number input, toggle billing periods, and select add-ons. Three pricing modes — per-unit, volume-tiered breakpoints, and flat — cover every SaaS and service business model.

toggle_on

Billing Toggle with Discount Badge

Animated switch between two pricing options (monthly/annual or any custom labels). Optional discount badge positionable above, inline, or below the toggle. Smooth transition between price sets with optional counting animation.

view_column

5 Layout Modes

Display 1 to 5 columns with automatic responsive collapsing. Single-column renders a compact horizontal row layout. Set gap to zero for stacked mode — cards merge into a unified comparison panel with shared borders and dividers.

add_shopping_cart

Add-On Selectors

Checkbox-based add-on items with icons, descriptions, and pricing. Each add-on can be flat-rate or per-unit priced. Add-ons feed directly into the estimated cost calculation with live breakdown formulas.

table_chart

Feature Comparison Table

Collapsible feature comparison across all tiers with categorized rows, check/cross icons, sticky headers, and horizontal scroll on mobile. Opens and closes with an animated chevron trigger.

analytics

Built-In Event Analytics

Automatic event tracking for slider changes, toggle switches, add-on selections, and CTA clicks. Events push to Google Tag Manager (dataLayer), HubSpot behavioral events (_hsq), and custom DOM events.

link

CTA Parameter Passing

CTA buttons can append the visitor's selections — plan, billing period, quantity, and add-ons — as URL parameters. Checkout or signup pages pre-fill configuration automatically from the pricing page.

palette

90+ Style Controls

Full visual control over cards, badges, buttons, toggle, slider, add-ons, comparison table, tooltips, estimated cost boxes, and responsive breakpoints. Colors, typography, spacing, shadows, hover states, animations — nothing is hardcoded.

Works with any HubSpot theme

Pricing Calculator Pro is a standalone module. Install it in any HubSpot CMS portal and drop it on any page. No theme dependency, no jQuery, no external libraries. Pure vanilla JavaScript with zero hardcoded values.

Questions

What pricing models does it support?

add
Three pricing modes: per-unit multiplication (quantity times price), volume-tiered breakpoints (price changes at quantity thresholds), and flat pricing (fixed cost regardless of quantity). You can also create "Contact Us" plans with custom price text instead of a number.

How does the mobile layout work?

add
Three mobile layout modes: stack (single column), horizontal scroll (swipeable cards), and tabbed navigation (one tier visible at a time with tab buttons). Featured cards auto-promote to the top position on mobile.

Does it track user interactions?

add
Yes. Built-in analytics automatically track slider changes, toggle switches, add-on selections, and CTA clicks. Events push to Google Tag Manager dataLayer, HubSpot behavioral events, and custom DOM events — no additional scripting required.

Do you offer support?

add
Yes. Documentation included, plus email support for setup and customization questions.

Build your pricing page with Pricing Calculator Pro

The most complete interactive pricing module on the HubSpot Marketplace. Billing toggle, quantity slider, add-ons, cost calculator, comparison table, and 90+ style controls.

Get the Module arrow_outward