1. Module Installation
Follow these quick steps to get the Dynamic Pricing Calculator running on your site:
- Upload the module ZIP folder directly into your HubSpot Design Manager or deploy via CLI.
- Open your Landing Page or Website Page in the HubSpot Editor.
- Search for "Dynamic Pricing Calculator & Quote Builder" in the modules pane on the left sidebar.
- Drag and drop the module directly into your page layout.
2. Dynamic Inputs Configuration
Inside the HubSpot Content Editor sidebar, configure the pricing rules:
- Starting Price: Define the base plan entry cost.
- Per-Seat Cost Multiplier: Adjust how much each user slot adds to the plan.
- Checklist Add-Ons: Add custom checkbox features with unit prices.
- Discount Rates: Configure annual toggle discount percentages (default: 20%).
3. Design Customization
Navigate to the **Styles** tab in the sidebar editor panel to align colors with your theme:
- Modify background overlay gradients and edge-to-edge images.
- Change pricing card borders, border colors, and corner radius.
- Toggle card drop shadow glow effects.
- Configure custom CTA button background, text, and hover states.
4. Dynamic Parameter Checkout Redirect
The module automatically monitors inputs and appends configuration state values to the checkout URL in real-time:
https://yourdomain.com/checkout?seats=12&billing=yearly&addons=premium-integration&total=145
Your subscription checkout system (Stripe, HubSpot payments, etc.) can read these URL parameters to pre-fill pricing fields instantly.