Framework guides

Next.js guide.

In Next.js, load Minyut once from your root layout or app shell so client-side navigation does not inject duplicate widgets.

App Router

Add next/script in your root layout, near the end of the body. Keep the token in an environment variable if you do not want it hard-coded in the component.

tsx

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://minyut.com/widget.js"
          data-token="YOUR_EMBED_TOKEN"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Load on selected pages

If you only want the widget on marketing or support pages, render the script from that route group or page layout instead of the root layout.

Using an env variable

Public widget tokens are still visible in the browser after render, but environment variables keep your source code cleaner.

env

NEXT_PUBLIC_NESTLED_TOKEN=your_embed_token

tsx

<Script
  src="https://minyut.com/widget.js"
  data-token={process.env.NEXT_PUBLIC_NESTLED_TOKEN}
  strategy="afterInteractive"
/>

Troubleshooting

Only render the script once per page.
Use afterInteractive for normal installs.
Check the chatbot is ready in the dashboard before testing.
For a plain React app, use the React guide.