Bir web sitesi geri bildirim widget’ı geliştirdim, işte neden ve nasıl yaptım

Web siteleri geliştiren her yazılımcının karşılaştığı ortak sorunlardan biri, geri bildirim sürecinin karmaşık olmasıdır.

Staging ortamına dağıtım yaptığınızda, bağlantıyı gönderiyorsunuz ve ardından sonraki hafta boyunca e-postalardan, Slack mesajlarından, WhatsApp ekran görüntülerinden ve “üstteki şey doğru görünmüyor” diyen birkaç telefon görüşmesinden geri bildirim toplamakla geçiriyorsunuz.

Bu durumu yıllardır yaşıyorum ve nihayet bunu çözmek için bir araç geliştirdim.

Sorunun Detayı

Web siteleri üzerindeki müşteri geri bildirimleri iki temel soruna sahiptir:

1. Kanallar arasında dağınık. E-posta, Slack, WhatsApp, metin mesajları ve yüz yüze konuşmalar gerektiğinde her şeyi toplamak zordur. Her şeyi topladığınızda, çoğu kez yarısını kaybetmiş oluyorsunuz.

2. Bağlam eksikliği. “İletişim sayfasındaki buton çalışmıyor” — pekala, hangi tarayıcı? Hangi ekran boyutu? Gönder butonu mu yoksa geri butonu mu? Önce formu doldurdular mı? Doğru bilgilerle bu durumu 2 dakikada çözeceğiniz yerde 15 dakika harcıyorsunuz.

Geliştirdiğim Araç

Lairo, herhangi bir web sitesine tek bir script etiketi ekleyerek ekleyeceğiniz bir geri bildirim aracıdır:

"https://cdn.lairo.io/widget.js" data-project="YOUR_PROJECT_ID" async>
        

Bir ziyaretçi (genellikle müşteriniz) widget’a tıkladığında, şunları yapabilir:

• Sayfadaki herhangi bir öğeye tıklamak
• Bir metin yorumu eklemek
• Araç, tıklanan öğenin otomatik olarak anotasyonlu bir ekran görüntüsünü, tarayıcıyı, işletim sistemini, görünüm boyutunu ve sayfa URL’sini yakalar

Geri bildirimde bulunan kişiden hesap oluşturması istenmez. Herhangi bir tarayıcı uzantısı gerektirmez. Sadece tıklayıp yorum yaparlar.

Teknik Kararlar

Bunu geliştirirken düşündüğüm birkaç şey:

Framework bağımsız widget. Widget, ana uygulamadan tamamen ayrı, bağımsız bir yapıdadır. Bağımsız olarak paketlemek için özel bir Vite yapılandırması kullanıyorum; bu yüzden ana uygulamayla sıfır framework bağımlılığına sahiptir. SPAs, statik siteler, WordPress, Laravel, Next.js ve daha fazlası dahil her sitede çalışmalıdır. Hiçbir çatışma veya stil sızıntısı olmadan.

Ekran görüntüsü yakalama. Widget, mevcut DOM durumunu istemci tarafında canvas ile render ederek yakalar, böylece ekran görüntüsü kullanıcının gördüğü şeyi tam olarak yansıtır — dinamik içerik, kaydırma konumu ve SPA durumu dahil. Ne görüyorsanız, ne rapor ediliyorsa odur.

Oturum tekrar kaydı. Bu, yeni bir eklemeydi. Widget, DOM değişikliklerini ve kullanıcı etkileşimlerini bir olay akışı olarak kaydeder, sıkıştırır ve sunucuya gönderir. Sonuç, her geri bildirim parçasına ekli bir oturum tekrarıdır — bu nedenle sadece hatanın olduğu bir ekran görüntüsünü görmekle kalmaz, müşterinin önceki eylemlerini izleyebilirsiniz.

Meta veri toplama. Her geri bildirim gönderimi otomatik olarak şunları içerir:

• navigator.userAgent, okunabilir tarayıcı + işletim sistemi biçiminde ayrıştırılmıştır
• Görünüm boyutları
• Mevcut URL (SPA rotası dahil)
• Tıklanan öğenin sabitlenmiş ekran görüntüsü
• Herhangi bir hata (varsa) için Konsol/Ağ hataları
• Oturum tekrar kaydı

Bu, “çalışmıyor” ifadesini eyleme geçirilebilir bir bug raporuna dönüştüren verilerdir.

Hesapsız geri bildirim. Bu, kasıtlı bir seçimdi. Geri bildirim bırakan kişi genellikle teknik olmayan bir müşteridir. Her ek adım — bir hesap oluşturmak, bir uzantı yüklemek, yeni bir araç öğrenmek — onların sadece e-posta göndermeye geri dönmelerine neden olan sürtünmelerdir. Widget, ihtiyaç duyulana kadar görünmez olmalı ve ihtiyaç duyulduğunda son derece basit olmalıdır.

Teknolojik Yığın

• Backend: Laravel 12 (PHP 8.4)
• Frontend dashboard: Vue 3 + Inertia.js v2 + Tailwind CSS v4
• Widget: Tamamen bağımsız Vite yapısı, ana uygulamaya sıfır bağımlılık
• Ödemeler: Stripe
• Test: Pest 4 + Playwright ile tarayıcı testleri
• Hosting: Laravel Forge

Sırada Ne Var?

Oturum tekrar kaydı yeni yayınlandı — her geri bildirim öğesi artık, sadece bir ekran görüntüsü değil, müşterinin ne yaptığını içeren bir kaydı da içeriyor. Sırada, dağıtıma yönelik geri bildirim, gönderimlerin belirli staging dağıtımlarına etiketlenmesi, genel API ve zaten entegrasyonu sağlanan Slack, GitHub & Linear ile daha birçok entegrasyon var.

Deneyin

Eğer müşteriler için web siteleri geliştiriyorsanız ve geri bildirim süreci sizi deli ediyorsa, Lairo.io’yu deneyin. Ücretsiz bir plan var — kredi kartı gerektirmiyor, zaman sınırlaması yok.

Ben bu projeyi gündelik işimin yanı sıra tek başıma geliştirdiğim için diğer yazılımcılardan geri bildirim almakla gerçekten ilgileniyorum. Ne işe yarıyor, ne işe yaramıyor, ne eksik.

https://lairo.io