Why add feedback to Next.js apps?
TellTide needs no special SSR handling: the script mounts on the client after hydration and stays out of your server bundle entirely.
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: Add the script to your root layout
In the App Router, place the tag in app/layout.tsx so it loads on all pages:
// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<script
src="https://telltide.com/src/widgets/widget.js"
data-app-id="YOUR_APP_ID"
async
/>
</body>
</html>
);
}Step 3: Or defer it with next/script
To load the widget only after the page is interactive, use the Script component with the lazyOnload strategy:
import Script from 'next/script';
<Script
src="https://telltide.com/src/widgets/widget.js"
data-app-id="YOUR_APP_ID"
strategy="lazyOnload"
/>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
- Scope the launcher to a route group (say, only marketing pages) by moving the script into that group’s nested layout.
- Vercel preview deployments have per-deploy hostnames; test on localhost or create a separate TellTide app for previews.
- Works with both the App Router and the Pages Router (_document.tsx before </body>).
Common questions
Does the script affect my Lighthouse score?
With strategy="lazyOnload" the widget loads after everything else, so LCP and TBT are untouched. Even the plain async tag at the end of body does not block rendering.
Will the widget slow down my Next.js 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.