Pricing Calculator

Overview

ObservePoint sells subscription volume in two main buckets: annual page scans for Audits and packaged Journey runs. Sales and product needed a single calculator that could live on the public marketing site and inside the product signup flow without maintaining two separate UIs.

I built the calculator as an Angular web component (<app-calc>) so WordPress and the internal app can embed the same bundle. The UI is split into Audits and Journeys, with optional add-ons on the marketing build. Audit pricing uses tiered per-page rates; users can adjust volume with a slider or by typing values like 50K or 1.2M. Journey pricing is table-driven with preset packages. A sticky footer keeps the running total and primary CTA visible while scrolling.

The same codebase supports two deployment contexts:

• Marketing site: Full experience with promotional copy, additional options (VPN), and a sign-up link that carries UTM and pricing selections.
• SaaS Application: Slimmer layout for existing customers changing subscription volume, with inputs pre-filled from account data.

You can view the Pricing Calculator here: www.observepoint.com/pricing

Why it's notable

The calculator sits on a high-intent page: visitors are already thinking about buying. Small friction in understanding volume or price can drop conversions. This tool makes the pricing model legible instead of hiding it behind a sales call.

Shipping one embeddable widget for both marketing and product signup cut duplicate maintenance. Product can change tiers in one repo; both surfaces pick up the build. Referral parameters on the sign-up URL also give downstream systems a clean record of what the user configured before they hit the form.

Unique challenges

Pricing UIs look simple until you account for where they run and how numbers get entered.

• Non-linear slider scale: Page scan volume spans 1K to 50M. A standard linear slider would cram most usable values into one end. I mapped slider position to tier boundaries so each pricing band gets usable drag range.
• Slider and text input in sync: The slider and free-text field both drive the same value. Input accepts shorthand (50K, 1.2M) with validation and fallbacks so bad input does not break the total.
• Two hosts, one bundle: Marketing WordPress and the Angular app repo consume different build outputs (custom element vs library wrapper) but share components. Context switching handles different defaults, copy, and which sections render without forking the template.
• Sticky footer without layout bugs: The total bar sticks on scroll using IntersectionObserver and a sentinel element, so it does not fight with host page CSS or leave awkward gaps at the bottom of the embed.
• Conditional add-on pricing: VPN and similar options show as paid, struck through, or included depending on whether audit + journey spend crosses a threshold. That state has to stay consistent as users change tiers above it.
• Deployable as static assets: Builds ship without content hashing so marketing can reference fixed main.js / styles.css filenames from WordPress. Asset base URLs differ per environment so icons and chunks resolve correctly when embedded on another domain.