Install · React

Bug reports and feedback from your React site, in one script tag.

Add a React feedback widget and bug report button with one script tag in index.html. No npm package, no provider, nothing added to your bundle.
Start freeNo credit card required.

Where it goes

In public/index.html (Create React App) or index.html (Vite), just before the closing body tag — outside the div React mounts into.

Setup

Adding the widget to React

  1. 01

    Copy your widget key

    Open your project in UserWants, go to the Widget tab and copy the snippet. The key starts with uw_pk_ and is public by design: it lives in your HTML where anyone can read it, and the domain allowlist is what protects it, not secrecy.

  2. 02

    Paste the tag into your HTML shell

    Every React app has one real HTML file. Put the tag there rather than in a component, so it loads once for the life of the tab and does not care what your router is doing. Note that it sits after the root div, not inside it.

    html
    <!-- index.html -->
<body>
  <div id="root"></div>
  <script
    src="https://userwants.app/widget.js"
    data-userwants-key="uw_pk_..."
    defer
  ></script>
</body>
  3. 03

    Allow your domain

    In the Widget tab, add your production hostname under Allowed domains. The list fails closed: while it is empty the widget only runs on localhost, so nothing you forget to configure leaks a working button onto a domain you do not own.

  4. 04

    Identify signed-in users

    If your app knows who is logged in, hand over the id you already have and the widget stops asking for an email. Call it from an effect that depends on your user object so it re-runs on login and on logout.

    tsx
    useEffect(() => {
  if (!user) return;
  window.UserWants?.identify({
    identifier: user.id,
    name: user.name,
    email: user.email
  });
}, [user]);

Worth knowing

What bites on React

The things that are specific to a JavaScript library, rather than true of every install.

  • Do not render the tag from a component

    A script element returned from JSX is inert — React creates the node but the browser will not execute it. If you need it in a component, append it with document.createElement in an effect. Putting it in index.html avoids the whole problem.

  • It will not break your reconciler

    The widget renders inside a closed shadow root on an element it appends to the body itself, so React never sees those nodes and never tries to reconcile or remove them.

  • Calling identify before the script loads is a no-op

    window.UserWants does not exist until the deferred file runs. Use optional chaining, as above, and call identify again once your user object resolves — the widget keeps the last value it was given.

FAQ

Questions

Is there an npm package for the React feedback widget?
No, and that is deliberate. A package would enter your bundle, pin you to a version and need a release every time we change anything. One script tag from a CDN updates itself and adds nothing to your build.
Does it work with React Router or any client-side router?
Yes. The widget attaches to the document once and is untouched by route changes, because it never unmounts. Navigation is also recorded as a step, so a report shows which pages the person passed through.

The full reference — every field the widget collects, the domain allowlist rules and the JavaScript API — is in the widget docs.

Try it on your React site.

Paste the tag, add your domain, and the next report arrives with the screenshot and the JavaScript error already attached.

Start freeRead the docs