Where does the chat script go in the Next.js App Router?

In the App Router, the script should be placed in app/layout.tsx. You must use the next/script component with the afterInteractive strategy, rendering it inside the body tag after the children.

Why is my live chat widget not showing up in Next.js?

This usually happens because a raw script tag was used in the App Router. Next.js often strips raw script tags during the hydration process. Using the next/script component prevents this issue.

Does LastWorker charge per seat for chat agents?

No. LastWorker does not have per-seat fees or subscriptions. Live chat and email support are free for unlimited teammates and unlimited conversations.

Install LastWorker Free Live Chat in Next.js

To install LastWorker live chat in Next.js using the App Router, import Script from next/script in app/layout.tsx and render the Script tag inside the body tag with the afterInteractive strategy. For the Pages Router, paste the script tag into pages/_document.tsx before the closing body tag. This ensures the chat widget loads correctly without failing during the hydration process.

How do I add the chat widget to the Next.js App Router?

I have spent a lot of time in the back offices of service businesses. I have set up phone systems for dental practices and restaurants. One thing I have learned is that if a technical setup takes more than five minutes, it usually does not get done. When you are using a modern framework like Next.js, you expect things to work the same way they do on a basic HTML site. But the App Router handles scripts differently.

If you are using the App Router, you need to modify your root layout file. This is usually found at app/layout.tsx. You cannot just paste a script tag into the head of your document and hope for the best. You need to use the official script component provided by the framework.

Open your app/layout.tsx file.
Import the Script component by adding import Script from 'next/script' at the top of the file.
Locate the <body> tag in your layout.
Render the Script tag inside the <body>, typically right after the {children}.
Set the strategy to afterInteractive.

The code for your App Router layout should look like this:

import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script 
          src="https://lastworker.com/widget.js" 
          data-agent-id="YOUR_AGENT_ID" 
          strategy="afterInteractive" 
        />
      </body>
    </html>
  )
}

What is the common mistake that prevents the widget from loading?

I have watched developers get frustrated because they followed a standard installation guide for a different tool and the widget simply never appeared. There is a specific gotcha with Next.js that you need to watch for. If you put a raw <script> tag inside an App Router layout, Next.js will often strip it out during hydration.

Hydration is the process where the browser takes the static HTML sent by the server and turns it into a functional React application. During this process, the framework reconciles what it expected to see with what is actually there. A raw script tag is often seen as an intruder. It might work for a split second and then vanish. This is why using next/script is a requirement. It tells the framework that this script is supposed to be there and gives you control over when it loads.

By using afterInteractive, you tell the browser to load the chat widget after the page is already usable. This is better for your site speed. I have seen websites where the chat widget blocks the entire page from loading. That is a quick way to lose a customer who just wanted to see your menu or book a cleaning.

How do I add the widget to the Pages Router?

If you are still using the Pages Router, the process is closer to a traditional web setup, but you still want to put it in the right place. You should use the pages/_document.tsx file. This file allows you to customize the initial document markup.

Open pages/_document.tsx.
If you do not have this file, you can create it.
Paste the plain script tag before the closing </body> tag.

The implementation in the Pages Router looks like this:

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
        <script src="https://lastworker.com/widget.js" data-agent-id="YOUR_AGENT_ID" async></script>
      </body>
    </Html>
  )
}

Why should you use LastWorker instead of other tools?

I have looked at many different support tools over the last eighteen years. I have worked with regional dental practices that have eleven front desks. In those environments, the cost of software can get out of control quickly.

When I look at the market, I see a pattern. Out of twelve major tools I checked, four of them do not even offer a free tier. If you want to use LiveChat, Front, Zendesk, or Intercom, you have to pay from day one. Zendesk starts at $19 per agent. If I have eleven people answering phones and chats at my dental practice, that is over $200 a month just to have the software.

Even the companies that offer a free tier usually try to corner you. Crisp and Chatwoot both limit you to 2 seats on their free plans. Freshdesk and HubSpot also stop at 2 users. If you have a third person join your team, you are forced onto a paid plan. HubSpot starts at $20 per seat. Zoho Desk gives you 3 users but no live chat on the free version. Tidio gives you more seats but stops the widget after 50 conversations in a month.

LastWorker is different because live chat and email support are free forever. There are no limits on conversations or teammates. I do not have to worry about which employee has a login and which one does not. Everyone can help the customers. We do not charge a subscription or a per-seat fee. We even give you the shared inbox, ticketing, and a public help center for free.

How does the pricing work if everything is free?

I believe in being honest about how companies make money. We do not want your credit card for the basic tools. We charge for specific actions that use resources. If you want to use AI to answer your chats, emails, or SMS messages, it costs $0.04 per generated reply. If you do not turn the AI on, you do not pay.

If you want a phone number, it is $1 a month. If the AI answers a phone call for you, it is $0.01 per minute. Outbound SMS is $0.03 per segment, and inbound SMS is free. This is a pay-as-you-go model. I have managed shops where we paid hundreds of dollars for an answering service that missed half the calls anyway. Paying ten cents a minute for a reliable AI receptionist is a much better deal for a small business.

Is the AI turned on by default?

No. I have seen what happens when AI is forced on people. It can be a mess. At LastWorker, the AI is off by default. All your new channels are manual. A human answers every chat and every email unless you decide to toggle the AI on.

This gives you control. You can write your own scripts and handle your own customers. If you find that you are getting the same five questions every day, you can choose to let the AI handle those. But we will never generate a response or charge you for one unless you have specifically enabled that feature.

I have spent my career hiring receptionists and writing phone scripts at 2 am. I know that sometimes you need a human and sometimes you need automation. Most tools make that choice for you and charge you for it. We let you decide when it is worth the four cents.

What features are included in the free tier?

When I say the live chat is free, I mean it. You get unlimited chat history. You do not have to pay to see what a customer said last week. You also get the shared inbox, contacts, and tickets. You can build a knowledge base and use saved replies to speed up your work. There is even a public help center you can set up to help customers help themselves.

I worked with a two-location restaurant group where we struggled to keep track of customer complaints. They would come in through email, Facebook, and the website. Having one shared inbox where everything lands for free would have saved us hours of work every week.

Most tools like Help Scout or Tawk.to offer some of these things, but there is always a catch. Tawk.to is very generous, but they put a "powered by" badge on your site unless you pay them to remove it. We do not do that. We want your website to look like your website.

Setting this up on Next.js is a five-minute job if you use the Script component I described. It gives you a professional way to talk to your customers without the "seat tax" that most software companies want to charge you. You can grow your team from two people to twenty without your software bill changing at all. That is how I think business software should work.