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 26KB 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
- 1Import Script from next/script in your root layout.
- 2Render it with strategy set to lazyOnload, so the widget waits until the browser is idle rather than competing with hydration.
- 3Put it in app/layout.tsx once, not in individual pages, so client side navigation does not remount it.
- 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.
| Widget | Transfer size | Versus ours |
|---|---|---|
| Tawk.to | 749KB | 29x heavier |
| Zendesk Chat | 533KB | 21x heavier |
| Drift | 464KB | 18x heavier |
| LiveChat | 385KB | 15x heavier |
| Intercom | 301KB | 12x heavier |
| Crisp | 155KB | 6x heavier |
| LiveAgent | 79KB | 3x heavier |
| TGLiveChat | ~26KB | Baseline |
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?
Is there a free live chat for Next.js?
Will a chat widget slow down my Next.js site?
Do my visitors need Telegram?
Why does the widget not show up on my Next.js site?
What is the native Next.js option?
Can I remove the branding?
How long does the install actually take?
Sources and references
- DebugBear: How Do Different Chat Widgets Impact Site Performance? Published 14 July 2019, updated 10 November 2025. Source of every competitor weight figure above.
- web.dev: Largest Contentful Paint The Core Web Vital that third party scripts move most on a content page.
- How we measure our own widget The command, the numbers, and the four figures we published wrong and corrected.