Beginner · 1 min read

Install the Pogpin widget

Add Pogpin to any website in under a minute with a single snippet — no SDK, no build step, no framework lock-in.

Updated Jun 10, 2026

On this page

Add the snippet
Framework notes
Verify it loaded
Tighten your Content Security Policy

Pogpin runs on top of your existing site through a small embed snippet. There’s nothing to compile and no framework to adopt — paste one line and your team can start pinning feedback on the live page.

Add the snippet

Copy your project snippet from Settings → Install and drop it just before the closing </body> tag:

<script
  src="https://cdn.pogpin.com/widget.js"
  data-project="YOUR_PROJECT_KEY"
  defer
></script>

The defer attribute keeps the widget off your critical render path, so it never blocks first paint. The script weighs in under 18 KB gzipped and loads lazily — your Lighthouse score won’t move.

Framework notes

Next.js / React — render the snippet through the <Script strategy="afterInteractive"> component in your root layout.
Astro — drop the raw <script> into Layout.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, then look for the Pogpin launcher in the bottom-right corner. If it’s missing:

Confirm data-project matches the key in your dashboard.
Check the browser console for a blocked request (a strict CSP can stop the CDN).
Make sure the snippet sits inside <body>, not <head>.

Tighten your Content Security Policy

If you run a CSP, allow the widget origins explicitly rather than loosening the whole policy:

script-src 'self' https://cdn.pogpin.com;
connect-src 'self' https://api.pogpin.com;

That’s everything for a standard install. Next, drop your first pin to see context capture in action.

Add the snippet

Framework notes

Verify it loaded

Tighten your Content Security Policy

Where feedback finally finds its place.