App Router
Add the script to your root layout, after {children}:
// app/layout.tsx
import Script from "next/script";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Script
src="https://sendshot.dev/widget.js"
data-key="YOUR_PROJECT_KEY"
strategy="lazyOnload"
/>
</body>
</html>
);
}
Replace YOUR_PROJECT_KEY with the key from Project → Settings → Installation in your Sendshot dashboard.
strategy="lazyOnload" loads the widget after the page is interactive. This works in the default Server Component layout. Don't add onError or other event handlers there, and don't add "use client" to your root layout just for this.
Pages Router
Put the same <Script> in pages/_app.tsx, next to <Component {...pageProps} />.
Check it works
Open your site. The feedback button appears in the bottom-right corner after the page has loaded. Press Cmd/Ctrl + Shift + F to open it from the keyboard, send a test report, and it shows up in your dashboard.
No button? Make sure the domain you're on is listed in the project's allowed domains.