Skip to main content

Next.js Integration

Integrate Reflect feedback widget into your Next.js application. The widget is hosted on a CDN and works seamlessly with both App Router (Next.js 13+) and Pages Router.

App Router (Next.js 13+)​

For Next.js 13+ using the App Router, add the widget scripts to your root layout file.

Add to app/layout.tsx​

// app/layout.tsx
import { Inter } from 'next/font/google'
import Script from 'next/script'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Your Next.js App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        {children}

        {/* Reflect Widget Configuration */}
        <Script id="reflect-config" strategy="beforeInteractive">
          {`
            window.reflectConfig = {
              key: "widget_eee5d255e1bc48d8",
              position: "bottom_right"
            };
          `}
        </Script>

        {/* Reflect Widget Script */}
        <Script
          src="https://cdn.reflectfeedback.com/widgets/widget_eee5d255e1bc48d8/widget.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}
tip

Replace widget_eee5d255e1bc48d8 with your actual widget key from the Reflect dashboard.

That's it! The widget will now appear on all pages of your Next.js application.