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:

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.

Implementation Process

1. Analytics: determine key events and user segments.
2. Design: develop triggers and widget design.
3. Implementation: write API, migrations, components.
4. Testing: check display conditions, data collection correctness.
5. 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