Menu
Sign inStart free

Add a website feedback widget to Next.js

Add next/script to your root layout. Works with the App Router and the Pages Router. Clients you invite then click anything on the site and leave a note, with a screenshot, the page and their browser attached. Everyone else sees nothing.

Updated

Before you start

<script src="https://pinnote.app/widget.js" data-project="pk_…" async></script>

Add it to Next.js

  1. In the App Router, open app/layout.tsx and add the script inside <body>. Next.js passes data-* attributes through to the tag, and the default strategy, afterInteractive, is the right one.
  2. In the Pages Router, add the same <Script> to pages/_app.tsx.
  3. Deploy.

app/layout.tsx

import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://pinnote.app/widget.js" data-project="pk_…" />
      </body>
    </html>
  );
}

Check it works

In Pinnote, open your site's settings and, under Install, click Try it on my site. It opens your site signed in as a reviewer; the Feedback button appears in the corner, and Install turns to "Installed". Then invite your client by email. They click the link and can comment straight away, with no account.

Preview deployments (Vercel, Netlify) each have their own address. Add the ones clients review on under Other addresses in your site's settings in Pinnote.

If it doesn't show up