CSAT Customer Satisfaction survey on website

CSAT Survey Implementation on Website

CSAT (Customer Satisfaction Score) measures satisfaction with a specific interaction: "How satisfied are you with this order/support/feature?" Typically uses a 1-5 scale with smileys or stars. CSAT = (satisfied / total) × 100%.

Difference from NPS

CSAT is a point-in-time transaction rating. NPS measures long-term loyalty. CSAT is collected immediately after an event: support ticket closure, order delivery, onboarding completion.

API and Model

Schema::create('csat_responses', function (Blueprint $table) {
    $table->id();
    $table->foreignId('user_id')->nullable()->constrained()->nullOnDelete();
    $table->morphs('subject');  // Polymorphic relation: Order, SupportTicket, Feature
    $table->tinyInteger('score')->unsigned();  // 1-5
    $table->text('comment')->nullable();
    $table->timestamps();
});

// CsatController
public function store(Request $request): JsonResponse
{
    $request->validate([
        'score'        => 'required|integer|min:1|max:5',
        'subject_type' => 'required|string|in:order,ticket',
        'subject_id'   => 'required|integer',
        'comment'      => 'nullable|string|max:500',
    ]);

    CsatResponse::updateOrCreate(
        ['user_id' => auth()->id(), 'subject_type' => $request->subject_type, 'subject_id' => $request->subject_id],
        ['score' => $request->score, 'comment' => $request->comment]
    );

    return response()->json(['success' => true]);
}

Frontend: Star Rating Widget

const STARS = [1, 2, 3, 4, 5];
const LABELS = ['Terrible', 'Poor', 'Okay', 'Good', 'Excellent'];

export function CsatWidget({ subjectType, subjectId }: CsatProps) {
  const [hover, setHover] = useState(0);
  const [score, setScore] = useState(0);
  const [submitted, setSubmitted] = useState(false);

  const submit = async (s: number) => {
    setScore(s);
    await fetch('/api/csat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ score: s, subject_type: subjectType, subject_id: subjectId }),
    });
    setSubmitted(true);
  };

  if (submitted) return <p className="text-sm text-gray-500">Thank you for your rating!</p>;

  return (
    <div className="flex items-center gap-1">
      <span className="text-sm text-gray-600 mr-2">Rate quality:</span>
      {STARS.map(s => (
        <button key={s} title={LABELS[s - 1]}
          onMouseEnter={() => setHover(s)} onMouseLeave={() => setHover(0)}
          onClick={() => submit(s)}
          className={`text-2xl ${(hover || score) >= s ? 'text-yellow-400' : 'text-gray-300'}`}>
          ★
        </button>
      ))}
    </div>
  );
}

Email Trigger After Ticket Closure

// In Observer or Listener on SupportTicket closed event
public function handle(TicketClosed $event): void
{
    Mail::to($event->ticket->user->email)
        ->later(now()->addMinutes(10), new CsatRequestMail($event->ticket));
}

In the email, direct links with ratings: https://site.com/csat?ticket=123&score=5&token=HMAC.

Timeline

CSAT widget with event-driven trigger and API: 1-2 business days.