FeedbackJar works with both the Next.js App Router (13+) and Pages Router. Install once in your root layout and collect feedback across every page of your app.
# Sign up at app.feedbackjar.com
# Create a widget → copy your Widget ID→ Your Widget ID looks like: wgt_abc123xyz
// 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://cdn.feedbackjar.com/sdk.js" strategy="afterInteractive" />
<Script id="feedbackjar-init" strategy="afterInteractive">
{`window.fj.init('${process.env.NEXT_PUBLIC_FEEDBACKJAR_ID}');`}
</Script>
</body>
</html>
);
}# .env.local
NEXT_PUBLIC_FEEDBACKJAR_ID=your_widget_id→ Reload your dev server after adding the env variable.
// components/FeedbackJarIdentify.tsx
'use client';
import { useEffect } from 'react';
export function FeedbackJarIdentify({ user }: { user: { id: string; email: string } }) {
useEffect(() => {
if (window.fj && user) {
window.fj.identify({ id: user.id, email: user.email });
}
}, [user]);
return null;
}→ Attach user identity so feedback is linked to your user accounts.
Sign up free, grab your Widget ID, and have the feedback widget running in your Next.js app in 2 minutes.