NPS Survey Implementation on a Website
Users are leaving and you don't know why? NPS survey (Net Promoter Score) is a standard for measuring loyalty, but its implementation is often done incorrectly: showing to everyone without segmentation, not linking to specific events. The result is low response rates and garbage data that doesn't help the business.
Over 5 years, we have implemented NPS in more than 50 projects—from SaaS to online stores. In one project, proper trigger configuration increased response rates by 30%, and real-time detractor handling reduced churn by 15%. In another project, instant notifications about detractors decreased customer churn by 25%. Our experience guarantees clean data and actionable insights.
Proper segmentation and frequency of display are key to high NPS and relevant data. For example, for an online store, we configure display after each purchase for new customers, and for B2B SaaS, after trial completion or first contact with support.
Contact us to get a consultation on NPS implementation and estimate potential retention savings.
How Typical Mistakes Kill NPS Value
First mistake: showing the survey to all users indiscriminately. New users (less than 7 days) haven't formed an impression yet, and users with open support tickets are predictably dissatisfied. The result is biased data.
Second: too rare or too frequent display. If you show the survey once every six months, you miss sentiment changes. If every day, users block the widget with adblock. Optimal: once every 90 days, tied to a key action.
Third: ignoring segmentation. Detractors (0-6) and promoters (9-10) require different approaches. A detractor needs an immediate response and problem resolution; a promoter—thanks and an offer to join a loyalty program.
What Data to Collect Along with the Score?
In addition to the score (0-10) and comment, we save: user ID or session_id, trigger event (order_completed, trial_ended), page URL, IP address, and timestamp. This allows segmenting results and identifying problematic interface points. In the backend, this looks like:
// database/migrations/create_nps_responses_table.php
Schema::create('nps_responses', function (Blueprint $table) {
$table->id();
$table->foreignId('user_id')->nullable()->constrained()->nullOnDelete();
$table->string('session_id')->nullable();
$table->tinyInteger('score')->unsigned();
$table->text('comment')->nullable();
$table->string('trigger_event')->nullable(); // 'order_completed', 'trial_ended'
$table->string('page_url')->nullable();
$table->ipAddress('ip')->nullable();
$table->timestamps();
});
// NpsController
public function store(Request $request): JsonResponse
{
$validated = $request->validate([
'score' => 'required|integer|min:0|max:10',
'comment' => 'nullable|string|max:1000',
'trigger_event' => 'nullable|string|max:100',
]);
$response = NpsResponse::create([
...$validated,
'user_id' => auth()->id(),
'session_id' => $request->session()->getId(),
'page_url' => $request->input('page_url'),
'ip' => $request->ip(),
]);
// Сохраняем в сессии чтобы не показывать снова
$request->session()->put('nps_submitted_at', now()->timestamp);
// Алерт в Slack если критик оставил комментарий
if ($validated['score'] <= 6 && !empty($validated['comment'])) {
SlackNotification::send('#feedback', "NPS {$validated['score']}: {$validated['comment']}");
}
return response()->json(['success' => true]);
}
When and to Whom to Show: Trigger Conditions
Display timing is 60% of success. We use three trigger categories:
| Trigger Type | Examples | Display Delay |
|---|---|---|
| Event-based | Order completed, trial ended, first feature use | Immediately after 2-3 sec |
| Time-based | 14-30 days after registration, quarterly | Depends on cycle |
| Segment-based | Exclude new users (<7 days), users with open tickets | — |
Backend: Model and API
// database/migrations/create_nps_responses_table.php
Schema::create('nps_responses', function (Blueprint $table) {
$table->id();
$table->foreignId('user_id')->nullable()->constrained()->nullOnDelete();
$table->string('session_id')->nullable();
$table->tinyInteger('score')->unsigned();
$table->text('comment')->nullable();
$table->string('trigger_event')->nullable(); // 'order_completed', 'trial_ended'
$table->string('page_url')->nullable();
$table->ipAddress('ip')->nullable();
$table->timestamps();
});
// NpsController
public function store(Request $request): JsonResponse
{
$validated = $request->validate([
'score' => 'required|integer|min:0|max:10',
'comment' => 'nullable|string|max:1000',
'trigger_event' => 'nullable|string|max:100',
]);
$response = NpsResponse::create([
...$validated,
'user_id' => auth()->id(),
'session_id' => $request->session()->getId(),
'page_url' => $request->input('page_url'),
'ip' => $request->ip(),
]);
// Сохраняем в сессии чтобы не показывать снова
$request->session()->put('nps_submitted_at', now()->timestamp);
// Алерт в Slack если критик оставил комментарий
if ($validated['score'] <= 6 && !empty($validated['comment'])) {
SlackNotification::send('#feedback', "NPS {$validated['score']}: {$validated['comment']}");
}
return response()->json(['success' => true]);
}
How to Check Whether to Show the Widget?
// Middleware or helper for check
public function shouldShowNps(Request $request): bool
{
$user = auth()->user();
if (!$user) return false;
// Не показывать чаще раза в 90 дней
$lastShown = $request->session()->get('nps_shown_at');
if ($lastShown && now()->timestamp - $lastShown < 90 * 86400) {
return false;
}
// Уже ответил
if ($request->session()->has('nps_submitted_at')) return false;
// Пользователь зарегистрирован > 14 дней
return $user->created_at->diffInDays(now()) >= 14;
}
Frontend: React Widget
// NpsWidget.tsx
export function NpsWidget({ triggerEvent }: { triggerEvent: string }) {
const [score, setScore] = useState<number | null>(null);
const [comment, setComment] = useState('');
const [step, setStep] = useState<'score' | 'comment' | 'done'>('score');
const submit = async () => {
await fetch('/api/nps', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ score, comment, trigger_event: triggerEvent }),
});
setStep('done');
};
const label = score === null ? '' : score <= 6 ? 'Detractor' : score <= 8 ? 'Neutral' : 'Promoter';
return (
<div className="fixed bottom-6 right-6 w-80 rounded-xl bg-white shadow-xl p-5">
{step === 'score' && (
<>
<p className="font-semibold mb-3">How likely are you to recommend us?</p>
<div className="flex gap-1 justify-between mb-2">
{Array.from({ length: 11 }, (_, i) => (
<button key={i} onClick={() => { setScore(i); setStep('comment'); }}
className={`w-7 h-7 rounded text-sm ${i <= 6 ? 'bg-red-100' : i <= 8 ? 'bg-yellow-100' : 'bg-green-100'}`}>
{i}
</button>
))}
</div>
<div className="flex justify-between text-xs text-gray-400">
<span>Unlikely</span><span>Very likely</span>
</div>
</>
)}
{step === 'comment' && (
<>
<p className="font-semibold mb-2">Score: {score} ({label}). What influenced your score?</p>
<textarea value={comment} onChange={e => setComment(e.target.value)}
className="w-full border rounded p-2 text-sm h-20 resize-none" placeholder="Optional..." />
<button onClick={submit} className="mt-2 w-full bg-blue-600 text-white rounded py-1.5 text-sm">
Submit
</button>
</>
)}
{step === 'done' && <p className="text-center text-green-600 font-medium">Thank you for your feedback!</p>}
</div>
);
}
NPS Analytics: SQL Query for Calculation
-- NPS calculation for period
SELECT
COUNT(*) FILTER (WHERE score >= 9)::float / COUNT(*) * 100 AS promoters_pct,
COUNT(*) FILTER (WHERE score <= 6)::float / COUNT(*) * 100 AS detractors_pct,
(COUNT(*) FILTER (WHERE score >= 9) - COUNT(*) FILTER (WHERE score <= 6))::float
/ COUNT(*) * 100 AS nps_score
FROM nps_responses
WHERE created_at >= now() - interval '90 days';
What NPS is Considered Good? Comparison with Alternatives
NPS survey is more advantageous than CSAT (satisfaction with a specific transaction) because it measures overall loyalty, not a one-time impression. And better than CES (ease of interaction) for strategic decisions. NPS is the best indicator of future growth: companies with NPS >50 grow twice as fast as competitors.
| Metric | Focus | Question | Scale |
|---|---|---|---|
| NPS | Loyalty | "Would you recommend?" | 0-10 |
| CSAT | Satisfaction | "Are you satisfied with the service?" | 1-5 |
| CES | Ease | "Was it easy?" | 1-7 |
Example of NPS Calculation
If 50% promoters (9-10) and 20% detractors (0-6), then NPS = 50 - 20 = 30. Neutrals (7-8) are not counted.Implementation Process
- Analytics: determine key events and user segments.
- Design: develop triggers and widget design.
- Implementation: write API, migrations, components.
- Testing: check display conditions, data collection correctness.
- Deployment: roll out to production and set up monitoring.
What's Included
- Data model and API (Laravel 11, PHP 8.3+)
- Widget component (React 18, Next.js or Vue 3)
- Display conditions with segmentation
- Integration with Slack / Telegram for detractor alerts
- SQL script for analytics and dashboard (optional)
- Documentation on triggers and support
Timeline and Savings
Widget with basic analytics — from 3 to 4 business days. Timely identification of detractors reduces churn by 20-40%. For your project evaluation, contact us — we will prepare a custom proposal. Order NPS implementation and start collecting clean loyalty data within a week.
Source: Wikipedia: Net Promoter