Corvura | How to Add a Feedback Widget to Your React App

Adding a user feedback widget to your React app doesn't require a React-specific package or complex integration. Corvura works with a single script tag, which means it works with any React setup — Vite, Create React App, Remix, or a custom build.

Quick setup

1. Add the script tag

Add the Corvura script to your index.html file, right before the closing </body> tag:

<!-- public/index.html or index.html -->
<script
  src="https://widget.corvura.com/corvura.min.js"
  data-tracking-code="YOUR_TRACKING_CODE"
></script>

Replace YOUR_TRACKING_CODE with the code from your Corvura dashboard.

2. Add a feedback button

Drop a button with the data-corvura attribute anywhere in your component tree:

function App() {
  return (
    <div>
      <h1>My App</h1>
      <button data-corvura>
        Send Feedback
      </button>
    </div>
  );
}

That's it. The widget handles everything else.

Using with Vite

If you're using Vite (the most popular setup for new React projects), add the script to your index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
    <script
      src="https://widget.corvura.com/corvura.min.js"
      data-tracking-code="YOUR_TRACKING_CODE"
    ></script>
  </body>
</html>

Dynamic loading with useEffect

If you need more control over when the widget loads (for example, only on certain pages), you can load it dynamically:

import { useEffect } from 'react';

function FeedbackLoader({ trackingCode }) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://widget.corvura.com/corvura.min.js';
    script.setAttribute('data-tracking-code', trackingCode);
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, [trackingCode]);

  return null;
}

// Use it in your app
function App() {
  return (
    <>
      <FeedbackLoader trackingCode="YOUR_TRACKING_CODE" />
      <button data-corvura>Feedback</button>
    </>
  );
}

Style isolation

Corvura uses Shadow DOM to render the feedback modal. This means:

The widget's styles won't affect your app's styles
Your app's styles won't affect the widget
It works with any CSS framework (Tailwind, styled-components, CSS modules, etc.)

You don't need to worry about CSS conflicts.

What gets tracked

Once the script is loaded, Corvura automatically tracks page visits, referrers, device info, and session duration — all without cookies or personal data collection. This is especially useful for React SPAs where traditional analytics tools struggle with client-side routing.

Read more about how this works in our guide to privacy-friendly analytics.

Common questions

Does it work with React Router? Yes. The widget detects URL changes and tracks each page view automatically.

Does it work with SSR? Yes. The script only runs in the browser, so it's safe with server-side rendering frameworks like Remix or Next.js. For Next.js specifically, see our Next.js integration guide.

Will it slow down my app? No. The script loads asynchronously and doesn't block rendering. The widget only mounts a Shadow DOM element and a small React tree.

How to Add a Feedback Widget to Your React App