React Live Chat Integration

Add MyLiveChat to your React app

A React app serves one HTML shell and swaps the page contents in the browser, so the chat code belongs in that shell — public/index.html for Create React App, index.html at the project root for Vite. Paste it once and the launcher survives every route change, because it never unmounts with your components.

Use this guide to add MyLiveChat to React. 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 public/index.html (Create React App) or index.html in the project root (Vite).
2. Paste the MyLiveChat code from Step 1 immediately before the closing </body> tag, after the <div id="root"></div> element.
3. Save the file and restart your dev server so the shell is re-read.
4. Run your production build and deploy — the launcher appears on every route.

If your host injects the shell for you and you cannot edit it, load the script from a useEffect in your top-level component instead: create a <script> element, set its src, and append it to document.body. Guard it with a check for an existing element so React 18 Strict Mode, which runs effects twice in development, does not create two launchers.

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.

Test the built output, not just the dev server. A production build is served from a different HTML file than the one some dev servers generate on the fly, so an install that works under npm start can still be missing after deploy.

• The snippet was pasted into JSX. React does not execute a <script> tag rendered from JSX or from dangerouslySetInnerHTML. The browser parses it but never runs it, so nothing appears and no error is logged.
• Strict Mode created two widgets. In development React 18 mounts, unmounts and remounts effects. A useEffect that appends a script without checking for one already present will add it twice.
• The code was added to a component that unmounts. Put it in the HTML shell or in your root component. A route-level component takes the launcher with it when the user navigates away.
• Only the dev server was checked. Build and serve the production bundle before deciding the install 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.

React apps are usually products rather than brochures, and the question a visitor wants answered is rarely on the page they are looking at. Chat gives them a way to ask it without leaving the app or hunting for a contact form.

Because the script lives in the HTML shell rather than in a component, it is unaffected by refactors, route changes and re-renders. You install it once and it keeps working as the app grows.

Where exactly do I put the code in a React project?

In the HTML shell — public/index.html for Create React App, or index.html at the project root for Vite — just before the closing body tag.

Why does nothing happen when I put the script in a component?

React does not execute script tags rendered from JSX or dangerouslySetInnerHTML. Use the HTML shell, or append a script element to document.body from an effect.

Does the widget survive client-side navigation?

Yes. It is attached to the document rather than to a component, so React Router navigation does not unmount or reload it.

Why do I see two chat buttons in development?

React 18 Strict Mode runs effects twice. Check whether the script element already exists before appending it.

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 React 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: Live chat on a single-page app and Loading your live chat script without slowing your page. 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.