Site genelinde geri bildirim widget’ı — Belgeler

Tek bir script etiketiyle yerleştir; eleştirmenler sitenin herhangi bir sayfasında öğeye iğne, yorum veya ekran görüntüsü bırakabilsin.

PinAppAI widget’ı, hangi sayfaya yerleştirirsen orada yüklenen tek satırlık bir <script> etiketidir. Eleştirmenler 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

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>

Admin arayüzünde ayrıca AI için install prompt’u kopyala düğmesi var — bu prompt’u Claude Code, Cursor veya herhangi bir AI kodlama ajanına yapıştırırsan framework’üne göre (Astro, Next.js, SvelteKit, Eleventy, Hugo, WordPress, düz HTML, …) doğru yeri kendi bulup yerleştirir.

Eleştirmenler 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 iğne 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 iğne 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 eleştirmen ismiyle birlikte düşer.

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 eleştirmenden gönderim yapmadan önce e-postasını tek seferlik 4 haneli kodla doğrulamasını ister. Bu spam’i kapatır ve her yorumu gerçek bir adrese bağlar.

Proje için iki mod:

Davet listesi (varsayılan) — yalnızca davetli eleştirmenler + 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 proje düzenleme panelinden çevrilir. Detaylı dökümü için Eleştirmen erişimi bölümüne bak.

Widget’ta OLMAYAN şeyler

Widget analytics göndermez, eleştirmen 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.