Site-wide feedback widget

The PinAppAI widget is a one-line <script> tag that loads on whichever page you embed it on. Reviewers see a small floating button at the bottom-right and can leave structured feedback without writing a Slack message.

Install

Grab the snippet from your project page in app.pinappai.com and paste it once into a shared layout — base layout, root template, footer partial — so it loads on every public page automatically.

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

The admin UI also has a Copy install prompt for AI button — paste the prompt into Claude Code, Cursor, or any AI coding agent and it’ll find the right place to embed the tag for your framework (Astro, Next.js, SvelteKit, Eleventy, Hugo, WordPress, plain HTML, …).

What reviewers see

Three floating action buttons render bottom-right:

• 🎯 Inspect — pick a specific element on the page and comment on it. The widget records a precise CSS selector so the next AI iteration can find the exact element without grepping.
• 💬 Comment — drop a free-form pin anywhere on the page. Useful for layout-level feedback that doesn’t map to a single element.
• 📷 Screenshot — drag-select a region of the page and attach the captured image to the comment. Useful for visual issues that text can’t describe.

Each pin survives reload (stored on the PinAppAI server, scoped to the project) and shows up in your admin dashboard with the page URL, selector, screenshot, and reviewer name.

Voice dictation

Every comment input has a 🎙️ microphone button. Click and hold to dictate (uses the browser’s built-in speech recognition — no extra API). The recognized text streams in live; release to stop. Language defaults to the browser’s, but you can pin it via:

<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 sets the default; data-langs overrides the picker’s options. The same can be done at runtime from your own JS:

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

Permissions

The widget asks each reviewer to verify their email via a one-time 4-digit code before they can submit. That gates spam and ties every comment to a real address.

Two modes for the project:

• Allowlist (default) — only invited reviewers + workspace members can submit.
• Open access — anyone who can reach the page can verify and submit. Useful for public beta testing; recommended off for production.

Both flip from the project’s edit panel in the admin UI. See Reviewer access for the full breakdown.

What’s NOT in the widget

The widget does not send analytics, track non-reviewer visitors, or alter your site’s layout/styles. It mounts an isolated stack of elements with pp-*-prefixed class names and a high z-index, so host CSS doesn’t conflict.