[ Install guide ]
Feedback widget for React apps
A React app has an index.html, and that is where the widget goes. No component, no package, no provider.
Updated
Before you start
- Sign in with GitHub and install the feedback2code GitHub App. Choose the repository that holds the code of the site.
- Open the repository in the dashboard, go to Configure and add the domains the widget may run on.
- Copy the snippet from Embed Widget. It contains your widget ID.
Add the widget
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
<script src="https://www.feedback2code.dev/widget/YOUR_WIDGET_ID" async></script>
</body>Replace YOUR_WIDGET_ID with the ID from your dashboard. The example shows the index.html of a Vite project. Put the script tag right before the closing body tag. It loads asynchronously and does not block React from starting.
What the agent can change
The agent works on the repository of the app: components, styles, routes and tests. It can install packages from the npm registry and run your build to check its change.
Every change arrives as a pull request. Nothing is merged or deployed until you do it, so your usual review and deployment stay as they are.
Good to know
- Do not load the widget from inside a component with useEffect. The script tag in index.html is simpler and loads once.
- Add localhost to the authorized domains to see the widget on your dev server.
- With a Content-Security-Policy, allow https://www.feedback2code.dev in script-src and frame-src.
- The widget records the address of the page it was loaded on. Client-side route changes do not update it.
Test it
- Deploy the change and open the site on an authorized domain.
- Click the button at the bottom right and send one small, concrete request.
- Open your dashboard. The submission starts as coding and turns to awaiting review once the pull request is open.
What a submission contains and how the plans differ is described on the page about the website feedback widget.
Other setups
- Feedback widget for Next.js
- Feedback widget for Vue and Nuxt
- Feedback widget for Astro
- Feedback widget for static HTML sites
- Feedback widget for WordPress themes
- Feedback widget for Shopify themes
Questions and answers
Do I need a React component for the widget?
No. The widget is independent of React. It mounts itself in an iframe at the bottom right of the page.
Does it work with Create React App or other setups?
Yes. Any setup with an HTML entry file works: add the script tag to public/index.html or the equivalent file.
Can I show the widget only to some users?
The widget appears wherever the script is loaded. To limit it, render the script tag conditionally on the server, or load it only in the environments you want, for example staging.