By platform
Live chat for React
One script tag, then every message arrives in your Telegram. Including the three ways this specifically goes wrong on React, which is the part the install docs leave out.
Last checked 1 September 2026
Live chat by platform/React
The short answer
How do you add live chat to React?
In index.html before the closing body tag, or appended once from a top level effect.
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 React is, briefly
A JavaScript library for building user interfaces, usually as a single page application served from Vite, Create React App or similar.
The install, step by step
- 1The simplest correct answer is to paste the script into public/index.html before the closing body tag and stop there.
- 2If you need it mounted conditionally, append the script element once from an effect in your top level component.
- 3Guard the append with a check for an existing element by id, so a re render or a route change cannot load it twice.
- 4Return a cleanup function only if you genuinely need to unmount the widget, because removing and re adding it loses the open conversation.
The full walkthrough with screenshots is in the install guide.
The three ways this goes wrong on React
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.
StrictMode double invokes effects in development
React 18 and later deliberately run effects twice in development to surface exactly this class of bug. If you append the script from an effect without an idempotency check, you will get two widgets locally and one in production, which is a confusing way to spend an afternoon.
Client side routing does not reload the page
In a single page app the widget mounts once and then survives every route change, which is what you want. It also means anything you keyed to a page load happens once, so do not expect a fresh widget state per route.
Appending on every render is the classic mistake
An effect with a missing dependency array appends a new script on every render. The symptom is a page that gets slower the longer you stay on it. Check for the element by id before appending.
What React gives you instead
There is nothing native here. Every chat option in a React app is a third party script or an npm package that wraps one. We publish a React package as well as the script tag, and for most apps the script tag in index.html is the simpler of the two.
What a chat widget costs a React page
React apps already ship a framework, a router and a state library before any of your own code. A chat widget that adds a third of a megabyte to that is competing directly with your own bundle for parse time on the main thread.
| Widget | Transfer size | Versus ours |
|---|---|---|
| Tawk.to | 749KB | 19x heavier |
| Zendesk Chat | 533KB | 14x heavier |
| Drift | 464KB | 12x heavier |
| LiveChat | 385KB | 10x heavier |
| Intercom | 301KB | 8x heavier |
| Crisp | 155KB | 4x heavier |
| LiveAgent | 79KB | 2x heavier |
| TGLiveChat | ~39KB | 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 React 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 React 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 React site?
Is there a free live chat for React?
Will a chat widget slow down my React site?
Do my visitors need Telegram?
Why does the widget not show up on my React site?
What is the native React 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.