PricePoint Component | Van Westendorp Pricing Research Surveys

PricePoint is a web component for pricing research using Van Westendorp methodology. Find the optimal price point your users are willing to pay with validated price sensitivity analysis.

@sensefolks/pricepoint

PricePoint Features

💰 Van Westendorp price sensitivity analysis
📊 Identifies optimal price range and thresholds
♿ WCAG 2.1 AA accessible out of the box
⌨️ Full keyboard navigation (Tab, Enter)
🔊 Screen reader optimized with ARIA labels
🎨 Fully customizable via CSS Parts
📱 Mobile-first responsive design
🌐 Works with React, Vue, Angular, and vanilla JS

When to Use PricePoint

Embed PricePoint where pricing decisions happen:

Pricing pages — understand willingness to pay
Upgrade/paywall screens — optimize conversion pricing
Trial-to-paid flows — find the right price for conversion
Cancellation flows — discover price sensitivity of churning users

Installation

CDN (Recommended)

html

<!-- Modern browsers (ES modules) -->
<script type="module" src="https://unpkg.com/@sensefolks/pricepoint/dist/sf-pricepoint/sf-pricepoint.esm.js"></script>

<!-- Legacy browsers -->
<script nomodule src="https://unpkg.com/@sensefolks/pricepoint/dist/sf-pricepoint/sf-pricepoint.js"></script>

NPM

bash

npm install @sensefolks/pricepoint

Usage

HTML

html

<sf-pricepoint 
  survey-key="your-survey-uuid" 
  completion-message="Thank you for your feedback!">
</sf-pricepoint>

React

jsx

import '@sensefolks/pricepoint';

function App() {
  return (
    <sf-pricepoint 
      survey-key="your-survey-uuid" 
      completion-message="Thank you!">
    </sf-pricepoint>
  );
}

Vue

vue

<template>
  <sf-pricepoint 
    survey-key="your-survey-uuid" 
    completion-message="Thank you!">
  </sf-pricepoint>
</template>

<script>
import '@sensefolks/pricepoint';
export default {name: 'App'};
</script>

API Reference

Properties

Property	Attribute	Type	Default	Description
`surveyKey`	`survey-key`	string	—	UUID of the survey to load
`completionMessage`	`completion-message`	string	'Thank you for your response!'	Message shown after submission

CSS Parts

Style the component using CSS Parts:

css

sf-pricepoint::part(survey-container) {
  /* Main container */
}
sf-pricepoint::part(heading) {
  /* Step headings */
}
sf-pricepoint::part(price-input) {
  /* Price input field */
}
sf-pricepoint::part(currency-symbol) {
  /* Currency symbol */
}
sf-pricepoint::part(button) {
  /* All buttons */
}
sf-pricepoint::part(error-message) {
  /* Error messages */
}

Accessibility

Full keyboard navigation (Tab, Enter)
ARIA labels and live regions for screen readers
Price validation with accessible error messages
Focus indicators and high contrast mode support
Respects prefers-reduced-motion

Browser Support

Browser	Version
Chrome	88+
Firefox	85+
Safari	14+
Edge	88+
IE11	✅ (ES5 build)