Next.js feedback widget

Add a feedback widget to Next.js with one Script component.

Create a bubble, approve the deployed origin and place the generated loader in your App Router root layout.

Screenshot placeholder

Next.js root layout code beside a live Feedback Bubble launcher on the deployed application

Why it works

Keep feedback close to the experience.

A short submission flow and useful automatic context make it easier for visitors to report something and for you to understand it.

App Router friendly

Load the external widget after the application becomes interactive using next/script.

Configuration stays remote

Change colours, wording and feedback types later without rebuilding the Next.js application.

SPA page context

The loader reads the current page when feedback is submitted, including after client-side navigation.

Setup

From a new bubble to a real message.

Each website keeps its own design and approved origin while every accepted message reaches the same private workspace.

1Create the bubbleUse the exact deployed website origin and finish the bubble design.
2Add next/scriptPlace the generated Script component after the application content in the root layout.
3Test the deploymentOpen the approved site, confirm the launcher appears and submit one message.

Code example

A small installation surface.

Replace the example key with the value generated for your bubble.

app/layout.tsx

import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://www.getfeedbackbubble.com/widget/v1.js"
          data-site="YOUR_SITE_KEY"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Common questions

Useful details before you install.

Does this work with the Next.js App Router?

Yes. Add the Next.js Script component to the root layout so the loader is available throughout the application.

Do widget copy changes require a redeploy?

No. The loader retrieves the active bubble configuration using its public site key.

What context is collected with a message?

Feedback includes the page URL, title and path plus bounded browser, operating-system, device and viewport details. Feedback Bubble does not scrape page content or form values.

Product feedback in Next.js React feedback widget All installation options

Start listening where the experience happens.

Create your first feedback bubble, match it to your website and install it with one script.

Create your bubble