Install guide

Live chat for Next.js

Put one Script tag in your root layout and the chat bubble is on every page. It loads after hydration, stays across route changes and needs no client component.

Start free trial See pricing

No credit card needed · Free for 21 days

app/layout.tsx

import Script from "next/script";

export default function RootLayout({ children }) {

return (

<body>

{children}

<Script

src="https://app.mewdesk.com/widget.js"

data-site-id="YOUR_SITE_ID"

strategy="afterInteractive"

</body>

</html>

);

}

Where it goes

Paste it once on Next.js

The snippet is the same on every platform: one script tag just before the closing body tag. These steps show where that is on Next.js.

1
Copy your snippet from the dashboard
Add your website under Websites, using the domain you are installing on, and copy the snippet from its Embed code page. It has your site ID filled in; the one shown here uses a placeholder.
2
App Router: add it to app/layout.tsx
Import Script from next/script and render it inside <body> after {children}, with the src and data-site-id from your snippet and strategy set to afterInteractive. The root layout is a server component and that is fine; next/script needs no "use client".
3
Pages Router: add it to pages/_app.tsx
Render the same Script tag once in your custom App component, next to <Component {...pageProps} />. It loads once and stays as pages change.
4
Run or deploy
The loader reads data-site-id from its own tag and works out the chat domain from src, exactly as it does with the plain HTML snippet.

Good to know

afterInteractive loads the widget after your page has hydrated, and the chat runs in its own iframe, so it adds nothing to your bundle.
Static exports (output set to export) work too: the widget needs nothing from your server.

What you get

The same Mewdesk, whatever your site runs on

The widget lives in its own iframe, so it looks and works the same on Next.js as everywhere else.

One script tag

That is the whole install. No npm package, no build step, no plugin to keep updated.

Replies in seconds

Visitors see your answer the moment you send it, without refreshing. Your team replies from one inbox.

Offline form

When nobody is online, visitors leave their email and a message, and the chat picks up where it left off.

No tracking cookies

No IP addresses, no fingerprinting, no third-party scripts. A name, an optional email and the conversation.

FAQ

Mewdesk on Next.js

Questions people ask before adding live chat to a Next.js site. For everything else, the general FAQ has the rest.

Should I use next/script or a plain script tag?

Use next/script with strategy afterInteractive in your root layout. It inserts a normal script tag once, after hydration, and keeps it as routes change. The data-site-id attribute passes through unchanged.

Does it work with the Pages Router?

Yes. Put the same Script tag in pages/_app.tsx, next to the page component, so it is rendered once for every page.

Does the widget affect my Next.js bundle or Core Web Vitals?

The widget is not part of your bundle: next/script loads it after hydration and the chat runs in its own iframe, so your page renders first and your styles never clash with it.

Also installing on

Add live chat to your Next.js site today

Paste the snippet, answer your first visitor. The first 21 days are on us, with no card needed.

Start your free trial See pricing