Why add feedback to React apps?
Add it once to index.html and every route of your Vite or CRA app gets the launcher — surviving client-side navigation without any router integration.
Step 1: Create a TellTide app and copy your App ID
Sign in to TellTide, open Apps, and create an app for your site. Set the App link to your public URL — in production, the widget only accepts submissions from pages on that hostname. Copy the App ID; every snippet below uses it.
Step 2: Load the script once in index.html
Add the tag at the end of the body in your app shell:
<!-- index.html -->
<body>
<div id="root"></div>
<script
src="https://telltide.com/src/widgets/widget.js"
data-app-id="YOUR_APP_ID"
></script>
</body>Step 3: Or load it on specific routes with useEffect
If the launcher should only appear in part of the app (say, the logged-in area), inject the script from an effect and clean it up on unmount:
useEffect(() => {
if (document.querySelector('script[data-app-id="YOUR_APP_ID"]')) return;
const script = document.createElement('script');
script.src = 'https://telltide.com/src/widgets/widget.js';
script.setAttribute('data-app-id', 'YOUR_APP_ID');
document.body.appendChild(script);
return () => {
script.remove();
};
}, []);Step 4: Verify the feedback loop end to end
Open your site, click the TellTide launcher (bottom corner by default), and submit a test bug report. It should appear in your TellTide inbox within seconds. From there you can reply-triage privately, and later publish your first feature request to the public roadmap.
Good to know
- The widget persists across React Router / TanStack Router navigation — it lives outside the React tree.
- localhost is always allowed, so the widget works in npm run dev before you configure anything.
- Set the App link to the deployed app’s URL (for example https://app.example.com).
Common questions
Is there an npm package or React component?
No package needed — the script tag mounts the widget itself. That keeps it out of your bundle, off your dependency list, and immune to React version upgrades.
Will the widget slow down my React site?
No — the snippet loads a single small script at the end of the body, after your content renders. It does not block paint or affect your Core Web Vitals.
Is the feedback users send public?
No. Unlike board-first tools, everything arrives in a private inbox. Bug reports and reviews stay internal; you publish only chosen feature requests to a roadmap users can vote on.
How much does TellTide cost?
The free plan includes the widget, private inbox, API, and public roadmap for one app. Paid plans add unlimited apps and advanced features — pricing never scales with how many users you have.