CSAT Survey Implementation for Customer Satisfaction on Your Website

API and Data Model

Schema::create('csat_responses', function (Blueprint $table) { $table->id(); $table->foreignId('user_id')->nullable()->constrained()->nullOnDelete(); $table->morphs('subject'); // Polymorphic: Order, SupportTicket, Feature $table->tinyInteger('score')->unsigned(); // satisfaction scale $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]); } 

Polymorphic relation allows attaching a rating to any object — order, ticket, feature — without schema changes.

Frontend: Star 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 your experience:</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> ); } 

The widget is easily customizable: change colors, labels, add emojis. We use React but adapt to Vue, Angular, or vanilla JS.

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

The email contains direct rating links: https://site.com/csat?ticket=123&score=5&token=HMAC. HMAC token prevents tampering.

What Triggers Do We Use?

Depending on the scenario, we apply different survey display channels:

By combining these triggers, we achieve 50–70% survey completion rates.

What's Included in the Work?

1. Audit of touchpoints — determine where and how to ask the question.
2. Schema design — choose scale, response options, data model.
3. API development (Laravel + SQL) and interactive widget (React/TypeScript).
4. Trigger configuration (email, in-app, webhook) and CRM integration.
5. API documentation and admin guide.
6. 30-day support after launch.

Timeline and Cost

A basic CSAT widget with API and one trigger takes 1–2 business days. Full cycle with CRM integration, analytics dashboards, and A/B testing takes up to 5 days. Cost is calculated individually after auditing your project.

Contact us to discuss your project and get a personalized proposal. Get a consultation on CSAT implementation right now — we'll evaluate your project and offer the best solution.

We guarantee performance and Core Web Vitals compliance: the widget doesn't affect LCP or cause layout shifts. With over 5 years of operation and 50+ successful projects, your CSAT will work reliably.