How to add a feedback widget to a React Router and Remix app

Where the Bopmigo line goes in a React Router and Remix app (app/root.tsx), with code you can copy, and how to test it locally.

Short answer: add a <script> tag to app/root.tsx, inside <body> after <Scripts />. Build and deploy.

Add it to React Router and Remix

1. 1

   Create your Bopmigo project

   Sign up at bopmigo.com, choose Website, and add your React Router and Remix address. Copy your line from Install snippet:

   HTMLCopy

   <script src="https://bopmigo.com/widget.js"
     data-project="YOUR-PROJECT-ID" defer></script>

2. 2

   Open it

   Open app/root.tsx.

3. 3

   Add your line

   Add the script inside <body>, after <Scripts />.

   ReactCopy

   // app/root.tsx
   import type { ReactNode } from 'react';
   import { Links, Meta, Scripts, ScrollRestoration } from 'react-router';
   
   export function Layout({ children }: { children: ReactNode }) {
     return (
       <html lang="en">
         <head>
           <Meta />
           <Links />
         </head>
         <body>
           {children}
           <ScrollRestoration />
           <Scripts />
           <script src="https://bopmigo.com/widget.js"
             data-project="YOUR-PROJECT-ID" defer />
         </body>
       </html>
     );
   }

4. 4

   Go live

   Build and deploy.

5. 5

   Send yourself a test

   Open the live page, choose Feedback and send a short report. It arrives in your Bopmigo inbox (and by email, if you turned that on). Reply, then open Feedback again to see your answer.

React Router and Remix tips

• The root layout renders once, so the script loads once for the whole app.
• This example uses React Router framework mode. In a Remix app, keep the existing document components imported from @remix-run/react.
• Navigation between routes is picked up automatically.

Single-page apps and client-side routing

Load the script once in the root layout, not per page. Bopmigo notes the page people are on when they report, including after client-side navigation, so there’s nothing to re-run on route changes.

Testing locally

Add your local address (for example http://localhost:3000) to the project in Bopmigo, alongside your production address. Reports are only accepted from addresses you list.

What React Router and Remix users tend to report

• Loaders that fail and leave a blank route.
• Back button behaviour people don’t expect.
• Errors that only happen with a slow connection.

Your first week

1. 1

   Day 1: test locally and in production

   Send a report from localhost and from your live site, and check both arrive in the same inbox.

2. 2

   Days 2 to 5: identify signed-in users

   Pass the user ID and any useful context, such as plan or account, so each report says who it came from.

3. 3

   Days 6 and 7: route reports to your tracker

   Copy reports that need code changes into your issue tracker, and reply when the fix ships.

Questions

More: all install guides · website options · install with a coding agent