Docs

Next.js

Add the TellTide feedback widget to a Next.js site in a few lines.

Use this guide when your product is a Next.js app and you want the TellTide launcher on every page (or on specific layouts).

Before you start

  1. Create an app in Apps and note your App ID.
  2. Set App link to your Next.js site URL (e.g. https://shop.example.com).
  3. Customize the widget in Manage Widget and click Save.

Add the TellTide script once in your root layout 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>
  );
}

Replace YOUR_APP_ID with your App ID from the dashboard.

Using next/script (optional)

Next.js can load third-party scripts with its Script component:

import Script from 'next/script';

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"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

lazyOnload defers loading until after the page is interactive — good for performance. The widget still appears on every route.

Only on certain pages

If you do not want the widget on every page, add the script in a nested layout instead of the root layout:

// app/(marketing)/layout.tsx — example: only marketing pages
export default function MarketingLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      {children}
      <script
        src="https://telltide.com/src/widgets/widget.js"
        data-app-id="YOUR_APP_ID"
        async
      />
    </>
  );
}
EnvironmentWhat to do
ProductionApp link hostname must match your live site (e.g. shop.example.com)
localhostWorks for local testing without changing App link
Vercel preview URLsCreate a separate TellTide app per preview hostname, or test on localhost

Verify

  1. Run your Next.js app and open it in the browser.
  2. Click the TellTide launcher (bottom corner by default).
  3. Submit test feedback.
  4. Open Feedbacks in TellTide — the submission should appear.