Next.js - feedbackfun

Install

npm install @feedbackfun/js

App Router

Create a Client Component for the widget and add it to your root layout:

// 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;
}

// app/layout.tsx
import { FeedbackWidget } from './components/FeedbackWidget';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <FeedbackWidget />
      </body>
    </html>
  );
}

App Router with NextAuth

If you use NextAuth.js, pass the session user to the widget:

// 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:

// 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 <Component {...pageProps} />;
}

Using the CDN (no npm)

Alternatively, add the script tag to app/layout.tsx via Next.js’s built-in <Script> component:

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

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <link rel="stylesheet" href="https://cdn.feedbackfun.com/feedbackfun-widget.min.css" />
        <Script
          src="https://cdn.feedbackfun.com/feedbackfun-widget.min.js"
          data-feedbackfun-api-key="YOUR_API_KEY"
          data-feedbackfun-project-id="YOUR_PROJECT_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}