> ## Documentation Index
> Fetch the complete documentation index at: https://feedbackfun.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Next.js
> Add feedbackfun to a Next.js application (App Router or Pages Router).
## Install
```bash theme={null}
npm install @feedbackfun/js
```
## App Router
Create a Client Component for the widget and add it to your root layout:
```tsx theme={null}
// app/components/FeedbackWidget.tsx
'use client';
import { useEffect } from 'react';
import FeedbackfunWidget from '@feedbackfun/js';
import '@feedbackfun/js/dist/feedbackfun-widget.min.css';
export function FeedbackWidget() {
useEffect(() => {
new FeedbackfunWidget('YOUR_API_KEY');
}, []);
return null;
}
```
```tsx theme={null}
// app/layout.tsx
import { FeedbackWidget } from './components/FeedbackWidget';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
## App Router with NextAuth
If you use [NextAuth.js](https://next-auth.js.org/), pass the session user to the widget:
```tsx theme={null}
// app/components/FeedbackWidget.tsx
'use client';
import { useEffect } from 'react';
import { useSession } from 'next-auth/react';
import FeedbackfunWidget from '@feedbackfun/js';
import '@feedbackfun/js/dist/feedbackfun-widget.min.css';
export function FeedbackWidget() {
const { data: session } = useSession();
useEffect(() => {
new FeedbackfunWidget('YOUR_API_KEY');
}, []);
useEffect(() => {
if (session?.user) {
window.feedbackfun?.setUserInfo({
id: (session.user as any).id,
email: session.user.email ?? undefined,
name: session.user.name ?? undefined,
});
} else {
window.feedbackfun?.clearUserInfo();
}
}, [session]);
return null;
}
```
Mark the component `'use client'` — the widget uses browser APIs and cannot run on the server.
## Pages Router
Add the widget in `_app.tsx`:
```tsx theme={null}
// pages/_app.tsx
import type { AppProps } from 'next/app';
import { useEffect } from 'react';
import { useSession } from 'next-auth/react';
import FeedbackfunWidget from '@feedbackfun/js';
import '@feedbackfun/js/dist/feedbackfun-widget.min.css';
export default function App({ Component, pageProps }: AppProps) {
const { data: session } = useSession();
useEffect(() => {
new FeedbackfunWidget('YOUR_API_KEY');
}, []);
useEffect(() => {
if (session?.user) {
window.feedbackfun?.setUserInfo({
id: (session.user as any).id,
email: session.user.email ?? undefined,
name: session.user.name ?? undefined,
});
} else {
window.feedbackfun?.clearUserInfo();
}
}, [session]);
return ;
}
```
## Using the CDN (no npm)
Alternatively, add the script tag to `app/layout.tsx` via Next.js's built-in `