Introduction

PSM is a website widget that lets you determine how much your customers are willing to pay for your product or service. It is based on Van Westendorp's Price Sensitivity Meter

How it works Add PSM to your website, visitors take the survey and you see the pricing insights on our dashboard. It's that simple!

Benefits of using PSM ✅ Remove guesswork from your pricing ✅ Set the perfect pricing ✅ Don't leave money on the table!

Contents

This page contains the following information:

• Prerequisites (Things to do before adding PSM to your website)
• How to add PSM to your website
  • Installing PSM
  • Customising PSM
  • Styling PSM
• How to make sense of the insights
• Features
• Support

Prerequisite

1. Login or create your account on vitalwidgets.com
2. Add a folder for your website, then add the PSM widget inside that website folder. (Tip: This is a good way to organise your websites & widgets)
3. You will get a widgetId that we will use after adding the widget to the website (covered in the next section)

How to add PSM to your website

Step 1: Install PSM PSM can be installed on your website in the following ways:

• Using <script> tag This method is ideal for static websites. Add the following to the pages where you want to render the PSM widget <script type="module" src="https://unpkg.com/@vital-widgets/psm/dist/vw-psm/vw-psm.esm.js" async></script>
• Via NPM This method is ideal for frameworks like React, Vue, Angular etc. Install PSM in your codebase using the following command npm i @vital-widgets/psm
• Wordpress Coming soon

Step 2: Add the PSM code After installing the PSM widget, add the following code in the relevant locations:

• If you installed using script tag

  <vw-psm
    widget-id="your-widget-id"
    intro-heading="Take this survey & get discounts"
    intro-subheading="Help us set the right pricing for our 		product. You will get a discount when we launch 🎁"
    personas="Student, Teacher"
  ></vw-psm>

• If you installed using NPM

  import VwPsm from VwPsm
  
  <VwPsm
    widget-id="your-widget-id"
    intro-heading="Take this survey & get discounts"
    intro-subheading="Help us set the right pricing for our product. You will get a discount when we launch 🎁"
    personas="Student, Teacher"
  ></VwPsm>

Step 3: Styling PSM You can control every aspect of PSM to reflect the look and feel of your brand. PSM uses CSS class based styling.

How to make sense of the insights

Features

Support

For feedback, bug reports, feature request or anything you would like to tell us, kindly drop a mail at [email protected] or get in touch with us over Twitter at @vital.widgets