Add a Feedback Widget to Next.js

Pintelly adds a visual feedback button, analytics and optional session replay to a Next.js app with one script tag. Client-side navigation is tracked automatically: the script follows history.pushState and popstate, so every route change counts as a page view without extra code.

Before you start, add the site as a project in Pintelly and copy its installation snippet from Project Settings. It looks like this:

<script
  type="module"
  src="https://pintelly.com/cdn/feedback-module.es.js"
  data-backend="https://pintelly.com"
  crossorigin="anonymous"
></script>

App Router

Load the script once in the root layout with next/script:

// app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          type="module"
          src="https://pintelly.com/cdn/feedback-module.es.js"
          data-backend="https://pintelly.com"
          crossOrigin="anonymous"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Pages Router

Put the same <Script> element in pages/_app.tsx, next to <Component {...pageProps} />.

Content Security Policy

If your app sets a CSP header (in next.config.js headers or middleware), add https://pintelly.com to script-src and connect-src. If you use a nonce-based CSP, pass the nonce to <Script nonce={nonce} />.

Only in production

To keep local development out of your data, render the <Script> only when process.env.NODE_ENV === "production", or add a separate Pintelly project for your staging domain.

Check that it works

1. Open the live site in a private window, so no cache or signed-in state hides the change.
2. The feedback button should appear in the corner of the page. Click it, pin a comment on any element and send it.
3. Open the project in Pintelly. The feedback item should be there with its screenshot, and the visit should show up under Analytics within a minute.

If the button doesn't appear, open the browser console. A Content Security Policy error means your site must allow https://pintelly.com in script-src and connect-src. If there is no error, a caching or script-optimization layer may still be serving the old page: clear it and reload.

Next: choose widget visibility, appearance and consent handling in Project Settings. See Consent if you use a cookie banner.