Site genelinde geri bildirim widget’ı

PinAppAI widget’ı, hangi sayfaya yerleştirirsen orada yüklenen tek satırlık bir <script> etiketidir. Reviewer’lar sağ alt köşede küçük bir yüzen düğme görür ve Slack mesajı yazmadan yapısal geri bildirim bırakabilirler.

Kurulum

En hızlısı: Claude Code, Codex, Cursor, Continue veya MCP bilen herhangi bir ajanda embed-widget workflow’unu çalıştır (MCP kurulumu, nasıl çalıştırılır). Framework’üne göre (Astro, Next.js, SvelteKit, Eleventy, Hugo, WordPress, düz HTML, …) etiketi gömecek doğru yeri kendi bulur ve hiçbir şeyi commit etmeden önce sorar. Projeye sıfırdan mı başlıyorsun? setup-project workflow’u embed’i de kapsar.

Manuel alternatif: snippet’i app.pinappai.com içindeki proje sayfandan al ve paylaşılan bir layout’a (base layout, kök şablon, footer partial) bir kez yapıştır. Böylece tüm public sayfalarda otomatik olarak yüklenir.

<script src="https://api.pinappai.com/widget.js"
        data-project="pk_projeAnahtarın" defer></script>

MCP yok ama yerleştirmeyi yine AI mı yapsın? Admin arayüzündeki AI için embed prompt’unu kopyala düğmesine tıkla ve prompt’u repo erişimi olan herhangi bir AI kodlama ajanına yapıştır.

Reviewer’lar ne görür

Sağ alt köşede üç yüzen aksiyon düğmesi belirir:

• 🎯 Seçici: sayfada belirli bir öğeyi seç ve onun üstüne yorum bırak. Widget, kesin bir CSS seçici kaydeder; bir sonraki AI iterasyonu öğeyi grep’lemeden tam olarak bulabilir.
• 💬 Yorum: sayfanın istediğin yerine serbest formatlı bir pin bırak. Tek öğeye eşlenmeyen layout-seviyesindeki geri bildirim için kullanışlı.
• 📷 Ekran görüntüsü: sayfanın bir bölgesini sürükleyerek seç ve yakalanan görüntüyü yoruma ekle. Metnin anlatamayacağı görsel sorunlar için kullan.

Her pin sayfa yenilenmesini atlatır (PinAppAI sunucusunda projeye bağlı olarak saklanır) ve admin paneline sayfa URL’i, seçici, ekran görüntüsü ve reviewer ismiyle birlikte düşer.

Pinler işle birlikte değişir

Pin sadece kırmızı ya da yeşil değildir. Durumu sunucuda belirlenir, böylece reviewer hangi yüzeyi kullanırsa kullansın aynı değişiklik için aynı şeyi görür.

• Hala açık: pin kırmızı kalır.
• Bu build’de uygulanmış: dolu yeşil, sadece burada. Değişikliği henüz içermeyen bir build’e bakarken pin nötr kalır, sayfada olmayan bir düzeltmeyi vaat etmez.
• Başka yerde uygulanmış: içi boş yeşil, yani “bitti ama burada değil” bir bakışta okunur.
• Karar verilmiş: soluk, çünkü hakkında karar verilmiş bir değişikliğin dikkat çekmeye devam etmesi gerekmez.
• Bitmiş: yok. Bir change request kapanıp mevcut turun dışına düştüğünde pini artık çizilmez. Onuncu turundaki bir proje onuncu turun işini gösterir, tek sayfada üst üste binmiş on turluk işaret değil.

Açık bir pin ne kadar eski olursa olsun kendiliğinden kaybolmaz. Sadece biten iş emekli olur.

Sesle dikte

Her yorum input’unun yanında 🎙️ mikrofon düğmesi var. Tıkla ve basılı tut, dikte et (tarayıcının yerel speech recognition’ını kullanır, ek API yok). Tanınan metin canlı olarak akar; bırakınca durur. Dil varsayılan olarak tarayıcınınkidir; sabitlemek için:

<script src="https://api.pinappai.com/widget.js"
        data-project="pk_..."
        data-lang="tr-TR"
        data-langs="en-US,tr-TR,es-ES" defer></script>

data-lang varsayılanı belirler; data-langs picker’ın seçeneklerini ezer. Aynısı runtime’da kendi JS’inden de yapılabilir:

window.PinAppAI.setDictationLang('tr-TR');
window.PinAppAI.setDictationLangs(['en-US', 'tr-TR']);

İzinler

Widget, her reviewer’dan gönderim yapmadan önce e-postasını tek seferlik 6 haneli kodla doğrulamasını ister. Bu spam’i kapatır ve her yorumu gerçek bir adrese bağlar. Doğrulamadan sonra yüzen butonlara baş harfli bir rozet eklenir. Açınca kimin giriş yaptığını görürsün ve Sign out ile çıkarsın (oturum yalnızca o tarayıcı sekmesinde değil, gerçekten kapanır).

Proje için iki mod:

• Davet listesi (varsayılan): yalnızca davetli reviewer’lar + workspace üyeleri gönderebilir.
• Açık erişim: sayfaya ulaşan herkes e-postasını doğrulayıp gönderebilir. Public beta testlerinde işe yarar; production için kapalı tutman önerilir.

Her ikisi de projenin Settings’inden çevrilir (Projects → proje satırındaki Settings). Detaylı dökümü için Reviewer erişimi bölümüne bak.

Widget’ta OLMAYAN şeyler

Widget analytics göndermez, reviewer olmayan ziyaretçileri takip etmez ve sitenin layout/style’ına müdahale etmez. pp-* ön ekli class isimlerine sahip izole bir öğe yığını ve yüksek z-index’le mount olur. Host CSS ile çakışmaz.