Add a Feedback Widget to a React App

Pintelly adds a visual feedback button, analytics and optional session replay to a React single-page app with one script tag. You don't need an npm package or a component: the script runs alongside React, and route changes made with React Router or any other router are tracked automatically through history.pushState and popstate.

Before you start, add the site as a project in Pintelly and copy its installation snippet from Project Settings. It looks like this:

<script
  type="module"
  src="https://pintelly.com/cdn/feedback-module.es.js"
  data-backend="https://pintelly.com"
  crossorigin="anonymous"
></script>

Vite

Paste the snippet into index.html at the project root, inside <head>. Vite copies it into the built page unchanged.

Create React App

Paste the snippet into public/index.html, inside <head>.

Loading it from code instead

If the HTML file is not yours to edit (for example, a micro-frontend), add the script once when the app starts:

const s = document.createElement("script");
s.type = "module";
s.src = "https://pintelly.com/cdn/feedback-module.es.js";
s.dataset.backend = "https://pintelly.com";
s.crossOrigin = "anonymous";
document.head.appendChild(s);

Run it once, outside components, so React's re-renders and Strict Mode don't add the script twice.

Identify signed-in users

To see sessions and feedback under your own user IDs, follow User Identification after the script is installed.

Check that it works

1. Open the live site in a private window, so no cache or signed-in state hides the change.
2. The feedback button should appear in the corner of the page. Click it, pin a comment on any element and send it.
3. Open the project in Pintelly. The feedback item should be there with its screenshot, and the visit should show up under Analytics within a minute.

If the button doesn't appear, open the browser console. A Content Security Policy error means your site must allow https://pintelly.com in script-src and connect-src. If there is no error, a caching or script-optimization layer may still be serving the old page: clear it and reload.

Next: choose widget visibility, appearance and consent handling in Project Settings. See Consent if you use a cookie banner.