Net Promoter Score (NPS) Calculator
What is Net Promoter Score (NPS)?
The Net Promoter Score (NPS) is a customer loyalty and satisfaction metric used to gauge the willingness of customers to recommend a company's products or services to others. It's a simple yet powerful tool that can provide valuable insights into customer satisfaction and predict business growth.
How NPS Works:
The NPS survey typically asks one question: "On a scale of 0 to 10, how likely are you to recommend [company/product/service] to a friend or colleague?" Based on their response, customers are categorized into three groups:
- Promoters (Score 9-10): These are loyal enthusiasts who will keep buying and refer others, fueling growth.
- Passives (Score 7-8): These are satisfied but unenthusiastic customers who are vulnerable to competitive offerings.
- Detractors (Score 0-6): These are unhappy customers who can damage your brand and impede growth through negative word-of-mouth.
Calculating Your NPS Score:
The NPS score is calculated using the following formula:
NPS = (% of Promoters) – (% of Detractors)
The resulting score can range from -100 to +100.
Interpreting Your NPS Score:
- +70 and above: World-class. Indicates exceptional customer loyalty.
- +30 to +70: Excellent. Shows strong customer satisfaction and loyalty.
- 0 to +30: Good. Indicates a decent level of customer satisfaction, but there's room for improvement.
- Below 0: Needs Improvement. Suggests significant issues with customer satisfaction and loyalty.
Regularly tracking your NPS can help you identify trends, address customer concerns, and ultimately improve customer experience and drive business success.
Example Calculation:
Let's say you surveyed 100 customers:
- 60 customers responded with a 9 or 10 (Promoters)
- 20 customers responded with a 7 or 8 (Passives)
- 20 customers responded with a 0 to 6 (Detractors)
Total respondents = 100
Percentage of Promoters = (60 / 100) * 100 = 60%
Percentage of Detractors = (20 / 100) * 100 = 20%
NPS = 60% – 20% = 40
An NPS of 40 falls into the "Excellent" category, indicating a strong base of loyal customers.
function calculateNPS() {
var promotersInput = document.getElementById("promoters");
var passivesInput = document.getElementById("passives");
var detractorsInput = document.getElementById("detractors");
var resultDiv = document.getElementById("result");
var promoters = parseFloat(promotersInput.value);
var passives = parseFloat(passivesInput.value);
var detractors = parseFloat(detractorsInput.value);
if (isNaN(promoters) || isNaN(passives) || isNaN(detractors) || promoters < 0 || passives < 0 || detractors < 0) {
resultDiv.textContent = "Please enter valid non-negative numbers for all fields.";
return;
}
var totalRespondents = promoters + passives + detractors;
if (totalRespondents === 0) {
resultDiv.textContent = "Total respondents cannot be zero.";
return;
}
var percentPromoters = (promoters / totalRespondents) * 100;
var percentDetractors = (detractors / totalRespondents) * 100;
var npsScore = percentPromoters – percentDetractors;
resultDiv.textContent = Math.round(npsScore);
}
.calculator-wrapper {
font-family: sans-serif;
border: 1px solid #ccc;
padding: 20px;
border-radius: 8px;
max-width: 800px;
margin: 20px auto;
background-color: #f9f9f9;
}
.calculator-wrapper h2, .calculator-wrapper h3, .calculator-wrapper h4 {
color: #333;
margin-bottom: 15px;
}
.calculator-inputs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 30px;
padding: 20px;
background-color: #fff;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.input-group {
display: flex;
flex-direction: column;
}
.input-group label {
font-weight: bold;
margin-bottom: 5px;
color: #555;
}
.input-group input[type="number"] {
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
width: 100%;
box-sizing: border-box; /* Include padding and border in the element's total width and height */
}
.calculator-inputs button {
background-color: #007bff;
color: white;
padding: 12px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
align-self: center; /* Center the button if it's not spanning the full width */
grid-column: 1 / -1; /* Make button span across all columns */
width: auto; /* Allow button to size to content */
justify-self: center; /* Center the button horizontally within its grid area */
}
.calculator-inputs button:hover {
background-color: #0056b3;
}
.calculator-results {
text-align: center;
margin-top: 20px;
padding: 20px;
background-color: #eef7ff;
border: 1px solid #b3d7ff;
border-radius: 6px;
}
.calculator-results h3 {
color: #007bff;
margin-bottom: 10px;
}
#result {
font-size: 48px;
font-weight: bold;
color: #0056b3;
margin: 0;
}
.calculator-explanation {
margin-top: 30px;
line-height: 1.6;
color: #444;
text-align: justify;
}
.calculator-explanation h3, .calculator-explanation h4 {
text-align: left;
color: #333;
}
.calculator-explanation ul {
margin-top: 10px;
padding-left: 20px;
}
.calculator-explanation li {
margin-bottom: 8px;
}
.calculator-explanation p strong {
color: #333;
}
@media (max-width: 600px) {
.calculator-inputs {
grid-template-columns: 1fr;
}
.calculator-inputs button {
grid-column: 1; /* Reset grid column for single column layout */
width: 100%;
justify-self: stretch;
}
}