Add Live Chat to Remix

To add live chat to a Remix application, open the app/root.tsx file and place the script tag inside the body tag, immediately following the Scripts component. This ensures the widget loads after the initial hydration of the page. You must then restart your development server to apply the changes and see the chat widget on your site.

Where does the chat script go in Remix?

I have spent eighteen years managing customer operations, and I have seen how a single missed message can ruin a lead. When I worked with a regional dental practice that had eleven front desks, we struggled to keep up with the volume. We needed tools that just worked. In a Remix application, the place where things just work is the app/root.tsx file. This is the entry point for your entire application layout.

You need to locate the Document function or the main layout component in that file. Look for the HTML body tag. Inside that tag, you will see several Remix components like ScrollRestoration, Scripts, and LiveReload. You want to find the Scripts component.

The script for the chat widget should be placed directly below that Scripts component. I have watched developers put it in the head tag or at the very top of the body, and they always run into issues. Remix is specific about how it handles the transition from the server-rendered HTML to the interactive client-side application. Placing the script after the Scripts component is the safest way to ensure your site stays stable while the chat widget loads.

What are the steps to install the widget?

When I was writing phone scripts at 2am for a two-location restaurant group, I did not have time for complex installations. I needed things to be done in minutes. Installing this widget follows that same logic. You can get it live in three steps.

First, open your app/root.tsx file in your code editor. This is the heart of your Remix app. If you are using a standard Remix template, this file will contain your html, head, and body tags.

Second, add the script tag inside the body, below the Scripts component. It should look like this:

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

Third, save the file and restart your development server. I have seen many people skip the restart and wonder why the widget has not appeared. Remix usually picks up changes quickly, but a fresh start ensures the new script tag is being served correctly to your browser. Once the page reloads, the chat bubble should appear in the bottom corner of your screen.

Why must the script go below the Scripts component?

I want to be honest about the technical side of this because I have seen good leads die in a voicemail box simply because a website widget failed to load. The gotcha with Remix is hydration. This is the process where React takes the static HTML sent by the server and makes it interactive.

If you place the chat script above the Scripts component, it can execute before Remix has finished hydrating the page. When this happens, the script might try to read its data attributes, like your agent ID, before the DOM is fully ready or stable. In some cases, the hydration process might even overwrite or interfere with the elements the script is trying to create.

By placing it after the Scripts component, you are telling the browser to handle the main application logic first. The widget will then load as a secondary priority. This prevents the "flash of unhydrated content" and ensures the data attributes stay intact. I have learned the hard way that following the specific order of operations in a framework like Remix saves hours of debugging later.

How much does live chat cost for a Remix site?

I am not a brochure, and I hate hidden fees. When I ran operations for service businesses, I was always looking for the catch in a "free" plan. In the market today, eight of the twelve major tools we track offer some version of a free tier. But those tiers usually come with strings attached that make them hard to use as you grow.

For example, Crisp and HubSpot Service Hub both limit their free versions to just two seats. If you have a front desk person, a manager, and an owner who all need to see messages, you are already forced to pay. Zoho Desk is free for three users, but it only allows email ticketing, no live chat at all. Tidio offers a free tier, but it cuts you off after fifty conversations in a month. I have worked in shops where we would hit fifty conversations by Tuesday.

At LastWorker, live chat and email support are free forever. We do not limit your conversations or your teammates. You do not even have to put a credit card on file to start. We provide the shared inbox, contacts, tickets, and a public help center for free. If you want to add a phone number, it is one dollar a month. Outbound text messages are three cents per segment, and inbound ones are free.

How does this handle AI and automation?

The dental practice I worked with was always wary of AI. They did not want a robot hallucinating medical advice to a patient. That is why our AI is off by default. When you add a new channel like live chat to your Remix site, it is strictly manual. A human has to answer every message. Nothing is generated automatically, and nothing is charged until you choose to turn it on.

If you decide you want the AI to handle some of the workload, the pricing is flat and clear. An AI reply on chat, email, or SMS costs four cents. You only pay when it actually generates a response. If the AI answers a phone call, it costs ten cents per minute, which includes the carrier cost.

I have watched people get burned by "per-seat" pricing where they pay twenty-five dollars a month for a user who only logs in once. We do not have subscriptions or per-seat fees. You pay for what you use. If your Remix site gets zero chats one month, you pay zero dollars for the chat tool.

What happens after the installation?

Once the script is in your app/root.tsx and your server is restarted, you are ready to receive messages. I suggest opening your site in an incognito window to test it. Send a test message and see how it appears in your LastWorker inbox.

I remember the relief of finally having a system that caught every lead. In the businesses I managed, the difference between a good year and a bad year was often just the speed of our response. Having a chat widget that works correctly with your Remix hydration means you are never the reason a customer walks away.

You can set up saved replies and a knowledge base without paying a cent. This helps you answer common questions faster. If you ever feel like you are drowning in messages, that is when you can look at the AI options. But for now, you have a professional, reliable way for customers to reach you, installed in the time it takes to brew a pot of coffee.

Is it worth using a free tool?

I have seen the other side of this. Tools like Zendesk, Front, and Intercom do not offer a free tier at all. Their entry prices start anywhere from nineteen to twenty-nine dollars per seat every month. For a small business or a solo developer building on Remix, that is a heavy commitment before you have even made your first sale.

Tawk.to is the only other major tool in our list of twelve that offers a truly unlimited free tier, but they put a "powered by" badge on your site unless you pay them to remove it. We believe you should have the tools you need to grow without being taxed for every new hire you make.

I spent years writing those scripts at 2am because I cared about the customer experience. I wanted the people who called our dental practice or our restaurants to feel heard. A chat widget on a Remix site is just a modern version of that same commitment. It is about being available when the customer is ready to talk. With the script placed correctly in your root file, you can focus on the conversation instead of the technology.