By platform

Live chat for Next.js

One script tag, then every message arrives in your Telegram. Including the three ways this specifically goes wrong on Next.js, which is the part the install docs leave out.

Last checked 1 September 2026

Live chat by platform/Next.js

The short answer

How do you add live chat to Next.js?

In the root layout, using the next/script component with a lazy loading strategy.

With TGLiveChat that is one tag and about five minutes. The widget is roughly 39KB across 3 requests, replies arrive in Telegram rather than in another dashboard, and your visitors need no Telegram account of their own.

What Next.js is, briefly

The React framework for production sites, running the App Router or Pages Router, usually deployed to Vercel or a Node host.

The install, step by step

  1. 1Import Script from next/script in your root layout.
  2. 2Render it with strategy set to lazyOnload, so the widget waits until the browser is idle rather than competing with hydration.
  3. 3Put it in app/layout.tsx once, not in individual pages, so client side navigation does not remount it.
  4. 4Build and run the production build locally before deploying, because script strategies behave differently in development.

The full walkthrough with screenshots is in the install guide. The React guide covers the general approach. The Next.js specific part, which is the loading strategy, is below.

The three ways this goes wrong on Next.js

Every one of these is a real failure that looks like a broken widget and is not. They are the reason this page exists rather than just a link to the docs.

beforeInteractive only works in the root layout

next/script throws if you use the beforeInteractive strategy anywhere other than the root layout or _document. It is also the wrong strategy for a chat widget, which has no business running before your page is interactive. Use lazyOnload.

afterInteractive competes with hydration

It is the default and it is fine for analytics. For a chat widget it means the script downloads while React is still hydrating your page, on the same main thread. lazyOnload waits for idle and costs you nothing you can perceive.

Adding it per page remounts it on navigation

App Router navigation is client side, so a script in a page component can unmount and remount as people move around, taking any open conversation with it. Root layout, once.

What Next.js gives you instead

Nothing native. This site runs on Next.js and uses the approach described above, which is a small but real advantage: the install instructions were written by someone who had to make them work here first.

What a chat widget costs a Next.js page

Next.js gives you a lot of control over what ships and when, and a heavy third party widget quietly undoes it. If you have spent time on route level code splitting, a 749KB chat script on every route is the largest thing you are not code splitting.

Measured widget weights, heaviest first
WidgetTransfer sizeVersus ours
Tawk.to749KB19x heavier
Zendesk Chat533KB14x heavier
Drift464KB12x heavier
LiveChat385KB10x heavier
Intercom301KB8x heavier
Crisp155KB4x heavier
LiveAgent79KB2x heavier
TGLiveChat~39KBBaseline

Competitor figures are DebugBear's measurements, published 14 July 2019 and updated 10 November 2025. Ours is measured by gzipping the files we serve, and the command is on our methodology page.

Why the replies land in Telegram

The reason most small sites end up with a dead chat widget is not the widget. It is that answering means opening a dashboard that nobody keeps open, so messages sit unread for six hours and visitors stop bothering. Telegram is already open on your phone, so a message from your website arrives the same way a message from a friend does.

Your visitors see none of that. They get a normal chat window on your Next.js site, they need no account, and they never learn which app you answered from. The AI agent handles the questions that have obvious answers while you are asleep, and hands anything else to you.

The bottom line

Adding chat to Next.js is one tag in the right place. Getting it to keep working is about the platform specific traps above, and about whether you will actually answer the messages once they arrive.

The free plan covers 100 conversations a month and does not ask for a card, which is a faster way to find out than reading any more of this.

Frequently asked questions

How do I add live chat to a Next.js site?
In the root layout, using the next/script component with a lazy loading strategy. With TGLiveChat that is one script tag: connect Telegram, pick a theme, paste the tag, and messages start arriving on your phone. There is no plan requirement on the platform side.
Is there a free live chat for Next.js?
Yes. Our free plan covers 100 conversations a month with our badge on the widget and no card required. Tawk.to is the other genuinely free option in this category, unlimited but with a heavier widget. Most other free tiers in this market are trials with a countdown on them.
Will a chat widget slow down my Next.js site?
Next.js gives you a lot of control over what ships and when, and a heavy third party widget quietly undoes it. If you have spent time on route level code splitting, a 749KB chat script on every route is the largest thing you are not code splitting. Ours is about 39KB across 3 requests. The heaviest widget DebugBear measured, Tawk.to, is 749KB. Both are third party scripts, so the honest answer is that any widget costs something and the size of the something varies by a factor of nearly thirty.
Do my visitors need Telegram?
No. They type into a normal chat window on your Next.js site and never see Telegram at all. Telegram is where you read and answer from, on the phone already in your pocket. The confusion comes from widgets that are really deep link buttons to t.me, which is a different thing entirely.
Why does the widget not show up on my Next.js site?
beforeInteractive only works in the root layout. next/script throws if you use the beforeInteractive strategy anywhere other than the root layout or _document. It is also the wrong strategy for a chat widget, which has no business running before your page is interactive. Use lazyOnload.
What is the native Next.js option?
Nothing native. This site runs on Next.js and uses the approach described above, which is a small but real advantage: the install instructions were written by someone who had to make them work here first.
Can I remove the branding?
Yes, on any paid plan. Pro is $19 a month and includes white label and the AI agent, with no per seat charge. There is also a one time Founder licence at $299. Several competitors bill branding removal as a separate line, which is the item people forget when they compare entry prices.
How long does the install actually take?
A few minutes if nothing surprises you. Connect Telegram, pick one of 33 themes, paste the tag where this page says to paste it, then send yourself a test message from a phone on mobile data rather than from the desk you built it on.

Sources and references

Related guides

Live chat on every platformThe same guide for eight platforms, each with its own traps.Next.js install guideThe step by step version, in the docs.Widget sizes measuredFrom 79KB to 749KB, and what it costs your page.Alternatives comparedTwelve vendors, each with a reason to stay put.Live chat for WordPressBefore the closing body tag, added by our plugin or by a header and footer snippet plugin.Live chat for ShopifyIn theme.liquid, immediately before the closing body tag.Live chat for WebflowProject Settings, Custom Code, Footer Code.Live chat for SquarespaceSettings, Advanced, Code Injection, Footer.