Feedback Bubble
Guides

Published 4 August 2026 · By Jonathan Jones

How to Add a Feedback Widget to React

A practical guide to installing a feedback widget in a React project, covering Vite, Create React App, and Next.js, with tips on capturing useful feedback from real users.

Adding a feedback widget to a React app takes a few minutes. You paste a script into your project's root HTML file or, for Next.js, use the built-in Script component inside your layout. The tricky part is choosing a widget that gives you useful context without slowing your app down or requiring a complex integration.

This guide walks through the installation steps for Vite, Create React App, and Next.js, and explains how to make the most of the feedback you receive once it starts coming in.

Why a feedback widget belongs in your React app

When you build a SaaS product as a solo developer or small team, you often have no formal support channel and no structured way to hear from users. Feedback arrives as a stray email, a message through a contact form, or nothing at all. That silence is not a sign that everything is fine. It usually means users found the friction to report a problem too high and gave up quietly.

A feedback widget lowers that friction. It sits on the page the user is already looking at, so they can describe a bug or suggest an improvement without switching context. You get the message while they still remember the details, and you get it alongside the page they were on and the device they used.

For an indie founder managing a React app, that combination of low effort for the user and richer context for you is hard to replicate with a plain contact form.

Choosing the right widget for a React project

Before installing anything, it helps to be clear about what you need. Some tools are built around public voting boards, visual annotation, live chat, or session recording. Those are all valid products, but they solve different problems. If you want a lightweight way to collect bug reports, feature ideas, and questions from users without adding a large dependency or a public-facing roadmap, a focused feedback widget fits better.

For most React projects, a script-based widget that loads independently is easier to manage than an npm package that needs updating alongside your app dependencies. It also means customisation changes, such as updating your accent colour or adjusting the form copy, take effect without touching your codebase.

How to install a feedback widget in a React app

The steps below use Feedback Bubble as the example. It has a floating widget that visitors use to send an Issue, Idea, or Question without leaving the page. Installation follows the same pattern for most script-based feedback tools.

Step 1: Create your bubble and get the script

After creating an account and activating a subscription, go to Dashboard > Bubbles > New bubble. Give the bubble an internal name, enter your app's full origin as the allowed website (for example, https://www.yourapp.com), choose your colours and launcher position, and save. Then select Install on the bubble card and open the React tab to get your generated script snippet. The snippet contains your unique site key.

Vite or Create React App

For a standard React project created with Vite or Create React App, open the root index.html file at the top of your project, not the one inside public/ if Vite has already moved it. Paste the generated script immediately before the closing </body> tag.

That is the entire installation for most projects. When your app loads, the script requests the current widget configuration, checks that your domain matches the approved origin, and adds the floating launcher to the page.

Next.js (App Router)

Next.js has its own Script component that handles loading strategy and avoids blocking the page render. Open your root app/layout.tsx file, import Script from next/script, and add the generated Script component inside <body> after your main page content.

Because the widget is loaded through the layout file, it appears on every page in your app automatically. You do not need to add it to individual route files.

Confirming the installation

Load your app in a browser and look for the floating launcher in the bottom corner you selected during setup. Open it, choose a feedback type, type a test message, and submit. The submission should appear in Dashboard > Inbox > Needs review within a few seconds.

If the launcher does not appear, check that the allowed website in your bubble settings exactly matches your app's origin, including the protocol and any subdomain. A mismatch between https://yourapp.com and https://www.yourapp.com is the most common cause.

What the widget captures alongside each message

Each submission includes the page title, page path, and full URL at the time the feedback was sent. Where available, it also records browser name and version, operating system, device type, viewport dimensions, screen dimensions, device pixel ratio, orientation, touch support, colour preference, reduced-motion preference, browser language, and online status.

For a React single-page application, the page path captured reflects the current client-side route, which means you can tell whether a bug report came from your settings page, your onboarding flow, or your billing screen without asking the user to describe where they were.

This context reduces the number of follow-up questions you need to ask, but it does not replace a clear message from the user. A report that says the button does nothingcaptured on your payment confirmation route with a mobile viewport, is still more useful than a vague note captured with full technical detail.

Updating your widget without touching the code

One practical advantage of a script-based widget is that design and copy changes do not require a code change or a new deployment. When you update your accent colour, launcher icon, position, form heading, or feedback types in Dashboard > Bubbles > Customise, those changes load through the same site key your script already uses. Your index.html or layout.tsx stays the same.

If you need to pause the widget temporarily, for example during a private beta or a major redesign, you can select Pause bubble from the bubble card without removing the script from your project. Activating it again is equally quick.

Managing feedback from your React app in the dashboard

Once feedback starts arriving, you have a few options for organising it. New submissions land in Needs review. You can move useful messages to Saved if you want to keep them accessible without committing to any product work yet, or to Archive if they do not need further attention.

When several users report the same issue or request a similar improvement, you can group those messages under a planned change. Go to Needs review or Saved, select the relevant messages, choose Plan change, and attach them to a release. Give the planned change an outcome-focused name rather than copying a single user's wording, for example "Fix mobile menu on iOS Safari" rather than "the hamburger thing is broken."

This approach keeps the original messages intact and shows you how much evidence sits behind each planned change, which is helpful when you are deciding what to work on next.

Closing the loop with users who asked for a reply

If you enabled the reply-request option in your bubble settings, some users will have left an email address. Once you mark a planned change as Shipped, you can open the change and use Close the loop to send a follow-up message to those users. You review and edit the message before it goes out, and each recipient only receives the announcement once.

For an indie SaaS, telling a user that their reported bug is fixed is a small action with a noticeable effect on trust.

Common mistakes when adding a feedback widget to React

  1. Mismatched origin in the allowed website field. The widget will not load if the domain in your bubble settings does not exactly match the origin your app serves from. Check the protocol, subdomain, and whether you are testing on localhost versus your production domain.

  2. Adding the script to a single route component. If you paste the script inside a React component file rather than the root HTML or layout file, it may load multiple times or fail to load on other routes. Keep it in index.html or app/layout.tsx.

  3. Not testing on mobile. The widget is designed to work across screen sizes, but it is worth checking that it does not overlap important controls in your app on smaller viewports. Adjust the launcher position in the bubble editor if needed.

  4. Treating every feature request as something to build. A feedback widget gives you evidence, not a backlog. Several users requesting the same thing is a signal worth investigating, but it is still your judgement that decides whether and when to act on it.

  5. Installing on a staging domain but pointing the bubble at production. Feedback Bubble checks the origin of every request, so a bubble configured for your production domain will not serve on a staging subdomain. If you want to test on staging, create a separate bubble with the staging origin.

Trade-offs to consider

A floating widget is one feedback channel, not a complete picture of your product. It captures what users choose to share, which tends to be bugs and clear requests. Silent frustration, confused navigation, or the moment someone decides to cancel are not things a feedback widget can surface on its own. Pairing it with usage analytics or occasional user interviews gives you a more complete picture at the relevant stage of your product.

It is also worth setting realistic expectations about volume. Early-stage SaaS products often receive very little unsolicited feedback, and that is normal. The widget being available is still valuable because it lowers the barrier for the users who would otherwise say nothing.

Getting started

If you want to try this in your own React project, you can find full installation instructions at getfeedbackbubble.com/installation, including step-by-step guidance for HTML, React, Next.js, and WordPress.

The setup takes a few minutes, and once it is in place, the script does not need to be touched again when you adjust your widget's appearance or wording.

Frequently asked questions

Can I use Feedback Bubble with the Next.js Pages Router?

The official installation guide covers the App Router using app/layout.tsx. If you are still on the Pages Router, you can add the script to a custom _document.tsx or use the Next.js Script component inside _app.tsx to achieve the same result. The generated snippet itself does not change.

Does the widget interfere with React's rendering cycle?

The widget runs as an isolated script outside the React component tree. It does not interact with your state management or trigger re-renders. Placing it before </body> means it loads after your app's critical content.

Can I run feedback bubbles on more than one React app?

Yes. One Feedback Bubble account supports up to five bubbles, each with its own allowed website, appearance settings, and site key. Feedback from all of them is managed in the same inbox, which you can filter by individual bubble or view together.

What happens if I change the widget's appearance after installation?

Design and wording changes made in the bubble editor take effect without updating your script. The widget loads its configuration using the site key already in your index.html or layout.tsx, so there is no need to redeploy your app for routine customisation.

Can visitors submit feedback without providing an email address?

Yes. An email address is only requested if you have enabled the reply-request option, and even then it is optional for the visitor. A standard feedback submission requires only a feedback type and a message.