Реализация CSAT-опроса на сайте
CSAT (Customer Satisfaction Score) измеряет удовлетворённость конкретным взаимодействием: «Насколько вы довольны этим заказом/поддержкой/функцией?» Обычно шкала 1–5 со смайлами или звёздами. CSAT = (довольные / всего) × 100%.
Отличие от NPS
CSAT — точечная оценка транзакции. NPS — долгосрочная лояльность. Собирают CSAT сразу после события: закрытие тикета поддержки, доставка заказа, завершение онбординга.
API и модель
Schema::create('csat_responses', function (Blueprint $table) {
$table->id();
$table->foreignId('user_id')->nullable()->constrained()->nullOnDelete();
$table->morphs('subject'); // Полиморфная связь: 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: звёздный виджет
const STARS = [1, 2, 3, 4, 5];
const LABELS = ['Ужасно', 'Плохо', 'Нормально', 'Хорошо', 'Отлично'];
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">Спасибо за оценку!</p>;
return (
<div className="flex items-center gap-1">
<span className="text-sm text-gray-600 mr-2">Оцените качество:</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 после закрытия тикета
// В Observer или Listener на SupportTicket closed event
public function handle(TicketClosed $event): void
{
Mail::to($event->ticket->user->email)
->later(now()->addMinutes(10), new CsatRequestMail($event->ticket));
}
В письме — прямые ссылки с оценкой: https://site.com/csat?ticket=123&score=5&token=HMAC.
Сроки
CSAT-виджет с триггером по событию и API: 1–2 рабочих дня.