How to add free live chat to Gatsby

To install live chat on Gatsby, you must place the script in your gatsby-ssr.js file using the setPostBodyComponents function. This ensures the widget loads correctly on every page of your static site without being overwritten during framework updates. Open your project root, locate or create gatsby-ssr.js, and export the onRenderBody function to include your script.

How do I configure the gatsby-ssr.js file?

Gatsby is a static site generator, which means it builds your pages into HTML files before they ever reach a browser. Because of this, you cannot just drop a script tag into a template file and expect it to behave. You need to use the Server Side Rendering (SSR) API to tell Gatsby to include the chat widget in every page it generates.

First, look at your project root. This is the folder that contains your package.json file. If you do not see a file named gatsby-ssr.js, you must create one. This file is where you interact with the build process.

Second, you will need to export a function called onRenderBody. This function gives you access to a helper called setPostBodyComponents. This helper takes an array of React components and places them at the end of the body tag in your generated HTML.

Third, you will rebuild your site. Run your build command to make sure the script appears in the public folder output. The script tag for the widget looks like this:

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

You will wrap this in a React element inside the function. It is a few lines of code that save you from having to manually edit dozens of HTML files every time you want to make a change.

Why should I avoid editing the html.js file?

There is a common shortcut in the Gatsby community where people tell you to run a command to "eject" the html.js file. This creates a base HTML template that you can edit directly. It looks easier because it feels like a standard index.html file. Do not do this.

I have seen businesses lose their entire tracking and chat setups because of this shortcut. When Gatsby releases a major update, the structure of that base template might change. If you have a custom html.js file, Gatsby might ignore the updates or, more likely, your custom file will become a liability that breaks your build later.

Using gatsby-ssr.js is the stable path. It acts as a set of instructions rather than a static template. By using setPostBodyComponents, you are telling Gatsby to "add this script to whatever body tag you create." This keeps your site flexible. If you ever upgrade your site or change your theme, the chat widget stays right where it belongs.

Why does a free widget matter for a service business?

I spent eighteen years running customer operations. I worked with a regional dental practice that had eleven front desks. Each desk was a point of failure. If the receptionist was on the phone or checking in a patient, the other three lines would ring until they hit a voicemail box. I have watched good leads die in those boxes. People do not leave messages anymore. They just click the next link in the search results.

When I looked for a way to stop this, I checked the market. I looked at twelve different tools. Four of those twelve, including Intercom and Zendesk, do not even offer a free tier. They want twenty or thirty dollars per month just to let you talk to your own customers.

For a business with eleven desks, that cost adds up. If you have to pay per seat, you end up sharing logins. Sharing logins is a security nightmare and it makes it impossible to know who actually answered a customer. We built LastWorker to be free for chat and email because you should not have to pay a tax just to be available to your clients. There are no per-seat fees here. You can put all eleven of those receptionists on the system without a bill.

What are the limits of other free chat tools?

If you look at the eight tools that do offer a free tier, you will see they are rarely "free" in the way a small business needs. I looked at Tidio, which gives you a free plan, but they cap you at 50 conversations a month. In a busy dental practice or a restaurant group, you can hit 50 conversations by Tuesday. Once you hit that limit, the widget disappears.

Your customers do not know about your software limits. They just see that you used to have chat and now you do not. It makes the business look broken. Other tools like Zoho Desk give you a free tier for three users, but they do not include live chat at all. They only give you email ticketing.

Crisp gives you a free tier, but it limits you to two seats and 100 customer profiles. If you have a growing business, 100 profiles is nothing. You will fill that up in a month of running basic Google Ads.

LastWorker does not have these caps. The live chat and email support are free forever. There are no limits on the number of conversations you can have. There are no limits on the number of teammates you can invite. We do not even ask for a credit card to get started.

How does the pricing actually work?

We are not a brochure and I will not tell you that everything in life is free. We make money when you use our advanced features, but we do not charge a subscription for the basics. If you want to use the shared inbox, the ticket system, or the knowledge base, those are free.

The costs are specific and based on usage. If you want a phone number, it is one dollar a month. If you want to send an outbound SMS, it is three cents. Inbound SMS is free. This is the same way I used to buy supplies for the restaurants. I didn't pay a "kitchen subscription." I paid for the steaks we actually cooked.

The AI works the same way. AI is off by default. We do not generate text without you asking for it and we do not charge you a flat fee for "AI access." If you want the AI to reply to a chat or an email, it costs four cents. That only happens when it actually generates a response. If a human answers, the cost is zero.

If you want the AI to answer a phone call, it is ten cents per minute. This includes the carrier costs. When I was managing those eleven front desks, I would have gladly paid ten cents to ensure a patient could book an appointment at 2am instead of hanging up on a voicemail greeting.

Why is AI off by default?

A lot of software companies are trying to force AI into every corner of their product. They call it a game-changer. I call it a risk if it is not managed. In the shops I worked with, a bad answer from a bot is worse than no answer at all. If a bot tells a dental patient that an extraction is free, I have a massive problem on my hands the next morning.

That is why we keep it manual. You decide when the AI should step in. You write the knowledge base. You set the rules. Until you turn it on, a human is the only one who answers. This lets you get your Gatsby site live with a free chat widget today without worrying about a bot hallucinating a discount code for your customers.

How to manage the front desk burnout?

One of the reasons I advocate for adding chat to your Gatsby site is to protect your staff. Front desk burnout is real. When the phone is ringing and people are standing in line, the staff gets stressed. Stressed staff are rude to customers.

When you add a chat widget, you give your team a way to handle multiple people at once. A receptionist can handle three chat windows with less stress than one angry person on a phone line. Because the LastWorker widget is free for unlimited teammates, you can even have people in the back office help out during a rush.

You do not have to worry about the cost of adding another "seat" to the software. You just add the team member and they start helping. This is how you scale a service business without your overhead eating all your profit.

The installation on Gatsby takes five minutes. Once it is in your gatsby-ssr.js file, it is done. You can go back to running your business, knowing that you have a way to catch every lead that comes to your site. You will not be the person sitting in a booth at 2am writing phone scripts because you are afraid of missing a call. You will have a system that works while you sleep.---