Реализация CSAT-опроса (Customer Satisfaction) на сайте

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>
  );
}

Виджет легко кастомизируется: меняйте цвета, лейблы, добавляйте эмодзи. Мы используем React, но адаптируем под Vue, Angular или чистый JS.

Триггер по 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. Токен HMAC защищает от подделки.

Какие триггеры мы используем?

В зависимости от сценария применяем разные каналы показа опроса:

Комбинируя эти триггеры, мы добиваемся 50–70% заполняемости опросов.

Что входит в работу?

1. Аудит точек контакта — определяем, где и как задавать вопрос.
2. Проектирование схемы — выбираем шкалу, варианты ответов, модель данных.
3. Разработка API (Laravel + SQL) и интерактивного виджета (React/TypeScript).
4. Настройка триггеров (email, in-app, webhook) и интеграция с CRM.
5. Документация по API и инструкция для администраторов.
6. Поддержка в течение 30 дней после запуска.

Сроки и стоимость

Базовый CSAT-виджет с API и одним триггером реализуется за 1–2 рабочих дня. Полный цикл с интеграцией в CRM, дашбордами аналитики и A/B-тестами — до 5 дней. Стоимость рассчитывается индивидуально после аудита вашего проекта.

Свяжитесь с нами для обсуждения вашего проекта и получите персональное предложение. Получите консультацию по внедрению CSAT прямо сейчас — мы оценим ваш проект и предложим оптимальное решение.

Гарантируем работоспособность и соответствие Core Web Vitals: виджет не влияет на LCP и не вызывает смещения контента. За более чем 5 лет работы мы реализовали 50+ успешных проектов — ваш CSAT будет работать надёжно.