Install the Pogpin widget
Add Pogpin to any website with one script tag — no SDK, no build step, no framework lock-in. It registers a self-contained <pogpin-widget> element.
On this page
Pogpin runs on top of your existing site through a small embed script. There’s nothing to compile and no framework to adopt — paste one tag and your team can start pinning feedback on the live page. Under the hood the script registers a self-contained <pogpin-widget> custom element, so its styles never leak into (or inherit from) your page.
Add the snippet
Copy your project’s snippet from Project settings → Access and drop it just before the closing </body> tag:
<script
src="https://api.pogpin.com/widget.js"
data-project-slug="YOUR_PROJECT_SLUG"
data-project-key="YOUR_PROJECT_KEY"
data-api-origin="https://api.pogpin.com"
></script>All three data-* attributes come pre-filled in the dashboard — data-project-slug and data-project-key identify the project, data-api-origin tells the widget where to load and save pins. The script boots on DOMContentLoaded and guards against double-injection, so it’s safe even if your site renders it twice.
Framework notes
- Next.js / React — render the tag through
<Script strategy="afterInteractive">in your root layout. - Astro — drop the raw
<script>intoLayout.astro; it’s static HTML, so it just works. - WordPress / Webflow — paste it into the global “before
</body>” custom-code field.
Verify it loaded
Open your site and look for the Pogpin launcher in the corner. If it’s missing:
- Confirm
data-project-sluganddata-project-keymatch the values in Settings → Access. - Check the console for a blocked request (a strict CSP can stop the script or its API calls).
- Make sure the tag sits inside
<body>, not<head>.
Tighten your Content Security Policy
If you run a CSP, allow the Pogpin origin explicitly rather than loosening the whole policy:
script-src 'self' https://api.pogpin.com;
connect-src 'self' https://api.pogpin.com;No access to the code?
You don’t always need the snippet. The Chrome extension lets reviewers pin on any page they can open, and proxy review mode serves your site through Pogpin with the widget already injected — no code changes at all. Both are covered in collect client feedback on staging sites.
Next, drop your first pin to see context capture in action.