Next.js Live Chat Integration

Add MyLiveChat to your Next.js app

Next.js renders on the server and hydrates in the browser, so third-party scripts need to load after hydration rather than during it. The framework ships a component for exactly this: next/script with strategy="afterInteractive". Add it once to your root layout and the launcher appears on every route.

Use this guide to add MyLiveChat to Next.js. The free plan includes one agent, unlimited chats, and unlimited websites — no credit card required.

If you do not have a MyLiveChat account yet, create a free MyLiveChat account.

Start free

Sign in to the MyLiveChat web console and click Deployment menu on the left. Choose Embedded Chat tab and copy the MyLiveChat code.

1. Open app/layout.tsx (App Router) or pages/_app.tsx (Pages Router).
2. Import the script component with import Script from 'next/script'.
3. Render a <Script> element inside the body, pointing its src at the MyLiveChat URL from Step 1, with strategy="afterInteractive".
4. Save, restart the dev server, then run a production build and deploy.

If your MyLiveChat code is an inline snippet rather than a plain src, wrap it in <Script id="mylivechat" strategy="afterInteractive"> with the snippet as the child — the id is required for inline scripts, and Next.js will not render one without it.

Do not assume the install worked because you saw no error. Open your site in a private browsing window and walk through this once:

1. Look for the chat launcher on the page. If it is missing, view the page source and search for mylivechat to confirm the code is really being served.
2. Start a chat as a visitor and send a test message.
3. Sign in to the web console and confirm the message arrives and that you can reply.
4. Close the chat and check the transcript is saved, so you know follow-up will work.

Check a production build. next dev and next build && next start load scripts differently, and a widget that appears in development can still be absent from the deployed site.

• A raw script tag was used in a Server Component. Plain <script> markup in a Server Component body is not reliably executed after hydration. Use next/script, which is built for this.
• An inline script has no id. Next.js requires an id on inline <Script> elements. Without one it is silently skipped.
• beforeInteractive was used outside the root layout. That strategy is only honoured in the root layout or _document. Elsewhere Next.js falls back or warns, and the script may not load at all.
• Only the dev server was checked. Run next build and next start, or test the deployed site, before deciding it works.

After setup, sign in to the web console to answer visitors from your browser. You can also use the desktop app from the download page if your team prefers it.

Want the AI to answer first? Point the AI assistant at your site content and it handles routine questions 24/7, then hands off to a human with the full transcript when one is needed.

Next.js is the default choice for marketing sites and product front-ends that need to rank, which means the visitors arriving are often strangers with a specific question. Chat answers it while they are still reading.

Loading through next/script keeps the widget out of the critical rendering path, so the Core Web Vitals you chose Next.js for are not spent on a support tool.

Which next/script strategy should I use?

Use afterInteractive. It loads the widget once the page is interactive, so it does not compete with hydration or delay your content.

Does this work with both the App Router and the Pages Router?

Yes. Put the Script element in app/layout.tsx for the App Router, or pages/_app.tsx for the Pages Router.

My inline script does not run. Why?

Inline Script elements in Next.js require an id attribute. Without one the script is skipped and no error is shown.

Will it hurt my Core Web Vitals?

Loaded with afterInteractive the widget is fetched after the page is interactive, so it does not block rendering or delay hydration.

Is it really free?

Yes. One agent, unlimited chats, and unlimited websites are free forever, with no credit card required.

Colours, position, language, the pre-chat form and your offline message are all set in your MyLiveChat dashboard rather than in your Next.js code, so you can change them without editing your project again. See customization options for what can be changed, and visitor monitoring if you want to see which page a visitor is on before you reply.

New to live chat? Start with how to add live chat to your website and the live chat launch checklist, then live chat best practices once you are answering real conversations. Also useful: Loading your live chat script without slowing your page and Live chat on a single-page app. If you are worried about page speed, see does live chat slow down your website.

If anything is unclear, contact our support team from the chat button on this page or visit the Support page. We can help you choose the right setup path.