How to add live chat to React

To add live chat to your React application, paste the LastWorker script tag into your index.html file (for Vite) or public/index.html (for Create React App) immediately before the closing body tag. This method ensures the widget loads reliably without interfering with the React component lifecycle or triggering double-renders during development in Strict Mode.

Where does the script go in a React project?

The location of your entry HTML file depends on which tool you used to build your React site. If you are using Vite, you will find index.html sitting right in your project root folder. If you are using the older Create React App, you need to look inside the public folder to find index.html.

I have spent years managing operations for businesses like a regional dental practice with eleven front desks. In those environments, we did not have time for overly complex software deployments. We needed things to work the first time. The simplest way to get this live is to open that HTML file and scroll all the way to the bottom.

You are looking for the tag that says </body>. This is the closing tag for the body of your website. You want to paste the following script tag right above it:

<script src="https://lastworker.com/widget.js" data-agent-id="YOUR_AGENT_ID" async></script>

Once you have saved the file, restart your development server. The chat widget should appear in the bottom corner of your site immediately.

Why use the HTML file instead of a React component?

Modern developers often want to turn everything into a component or an NPM package. I understand the desire to keep everything inside the React ecosystem. However, I have watched good leads die in a voicemail box because a website update broke a fragile chat integration.

There is a specific technical gotcha when you try to load a third-party script inside a React component using a useEffect hook. React 18 uses a feature called Strict Mode in development. This feature intentionally mounts, unmounts, and remounts your components to help you find bugs. If your chat script is inside a component, React might try to load it twice. You end up with two chat bubbles or a broken widget that refuses to open.

By putting the script in the index.html file, you move the chat widget outside of the React rendering cycle. It stays stable. It does not care if your components are re-rendering or if you are navigating between routes. For a business owner, stability is more important than following a specific coding pattern. I have written phone scripts at 2am for tired receptionists: the last thing they need is a tool that disappears because a React hook failed.

How does the pricing compare to other chat tools?

I have looked at the market carefully because I hate being nickeled and dimed. When I ran a two-location restaurant group, every "per-seat" fee felt like a tax on growth. If I wanted five people to be able to answer customers, I had to pay five times the price.

LastWorker is different. Live chat and email support are free forever. There are no limits on conversations and no limits on teammates. You do not even need a credit card to start. If you look at the landscape of the twelve major tools in this space, this is a rare offer.

Four of the twelve tools do not offer any free tier at all. LiveChat, Front, Zendesk, and Intercom all require payment from day one. Intercom starts at about $29 per seat per month. If you have a team of ten, you are looking at nearly $300 a month just to talk to your customers.

The tools that do offer free tiers often have strict limits that make them hard to use as you grow. For example, Crisp has a free tier, but it limits you to 2 seats and keeps your chat history locked. Zoho Desk has a free edition for 3 users, but it only covers email ticketing: there is no live chat included. Tidio gives you a free tier, but the widget stops working once you hit 50 conversations in a month.

When you use LastWorker, you get a shared inbox, contacts, tickets, and a public help center for free. We only charge for specific AI features or phone services if you choose to use them.

How much do the optional features cost?

I like that AI is off by default here. I have seen enough "innovative" tools to know that an unmonitored bot can cause more problems than it solves if it is forced on you. In the shops I worked with, we wanted a human answering the phone or the chat first.

If you decide to use the AI to reply to a chat, email, or SMS, it costs $0.04 per generated reply. You only pay when it actually does work. If you want an AI to answer your phone calls, that costs $0.01 per minute, which includes the carrier costs.

For businesses that need a phone presence, a phone number is $1 per month. Outbound SMS messages are $0.03 per segment, and inbound SMS messages are free. There is no subscription and no per-seat fee. This allows you to scale up during busy seasons and scale down when things are quiet without being stuck with a massive monthly bill.

What is the process for setting this up?

If you have your React project open right now, follow these steps. First, open your index.html file. As I mentioned, it is in the root for Vite or in the public folder for Create React App.

Second, go to your LastWorker dashboard to get your unique agent ID. You will replace "YOUR_AGENT_ID" in the script tag with that specific code.

Third, paste the script tag right before the </body> tag.

Fourth, restart your dev server.

If you want to handle the chat yourself, you can do that from the shared inbox immediately. There is no need to configure complex routing rules or AI settings if you just want a human-to-human connection. I have hired many receptionists, and the best ones just want a simple interface where they can see who is waiting and help them quickly.

Are there any other technical considerations?

One thing to keep in mind is the "async" attribute in the script tag. This tells the browser to download the chat script without blocking the rest of your website from loading. This is important for your site performance. You want your React components to render and your images to show up as fast as possible. The chat widget should load quietly in the background.

I have worked with tools where the chat widget was so heavy it slowed down the entire site. That is a quick way to lose a customer before they even have a chance to ask a question. Using a single, lightweight script tag is a clean way to avoid that bloat.

If you are using a more complex setup like Next.js, the process is slightly different because of how Next handles the document head, but for standard React apps built with Vite or CRA, the index.html method is the gold standard for reliability.

Can I customize the widget later?

Yes, but those changes happen in your LastWorker dashboard, not in your React code. This is another reason why I prefer this setup. You can change the colors, the welcome message, or the availability hours without having to redeploy your entire website.

When I was managing the dental practice, we would frequently need to update our holiday hours or change our greeting. If those details are hard-coded into the website, you have to call a developer every time you want to make a change. By keeping the widget configuration in the dashboard, the manager can make those updates in seconds.

The free tier includes the knowledge base and the public help center too. You can write your own articles to answer common questions. This reduces the number of times your team has to answer the same question about parking or insurance. It is a practical way to keep your staff from burning out.

Why does LastWorker offer so much for free?

It sounds like a brochure claim, but I have seen how the industry works from the inside. Most companies lure you in with a free tier that is designed to be outgrown in three months. They know that once your team is trained and your history is saved, it is very hard to switch. They wait for you to hit 51 conversations or hire a third employee, and then they hit you with a $50 per month bill.

LastWorker takes a different approach. We believe that basic communication tools like chat and email should be a standard utility, not a luxury. By making the core tools free for unlimited users, we build a relationship with businesses. We only make money when we provide additional value through AI or phone connectivity.

If you are a solo entrepreneur just starting out, you should not be paying $30 a month just to have a chat box on your site. You should be spending that money on growing your business. I have worked with enough small shops to know that every dollar matters.

Final steps for your React site

Check your terminal and make sure your build is still running correctly. Open your site in a browser and look for the chat icon. If it is there, try sending a test message. You should see it pop up in your LastWorker shared inbox immediately.

If you don't see it, double check that your agent ID is correct and that the script is placed inside the body tags. I have seen people accidentally put it inside the head tags or after the closing html tag. It needs to be inside the body to function correctly.

This setup takes less than five minutes, and it gives you a professional way to capture leads that would otherwise disappear. Don't let your good leads die in a voicemail box. Get the chat live, keep it simple, and focus on serving your customers.