Install Free Live Chat on a Vue Site

To install free live chat on a Vue site, you must place the LastWorker script tag inside your index.html file at the root of your project. Paste the code immediately before the closing body tag. This location ensures the widget loads properly alongside your application. Restart your dev server after saving to see the chat widget on your site.

Where do I put the live chat script in Vue?

You need to find the index.html file. In a standard Vue project, this is located at the root of your directory. It is the entry point for your entire application. Many developers look for a way to import a chat widget as a component or a library. I have watched teams spend hours trying to force a chat tool into their component tree.

The shops I worked with always fared better when they kept it simple. You do not need to wrap this in a Vue component. You do not need to manage it with a state manager. You just need the browser to load it.

Open that index.html file. Scroll to the very bottom. You will see a tag that looks like </body>. This is where you will place the snippet.

What are the exact steps to install the widget?

First: Open index.html at the project root. This file contains the basic structure of your site.

Second: Paste the script immediately before the closing body tag. Use this exact code block:

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

Third: Restart your dev server. If you are running your site locally, stop the process and start it again. This ensures the change to the HTML file is picked up by your local environment.

I have hired receptionists and managed dental offices where we tried to use complicated software. It always broke. When you stick to a plain script tag, you reduce the chance of a version update in your project breaking your customer communication.

Why does the script go outside the Vue mount point?

This is the part every other guide leaves out. In a Vue application, your code usually mounts into a specific element. Usually, this is a div with the id of app. It looks like <div id="app"></div>.

Vue takes control of everything inside that div. If you put your chat script inside that div, Vue might remove it when it renders your components. It might try to manage the widget as part of the virtual DOM.

By placing the script after that div but before the closing body tag, you keep the widget independent. It stays on the page even as your users click through different routes in your application. I have seen many developers get frustrated when their chat bubble disappears after a page transition. This simple placement prevents that problem.

How much does this live chat service cost?

I have spent years looking at pricing tables for service businesses. It is often a mess of per-seat fees and hidden limits. I looked at twelve different tools in this space. Only eight of them offer any kind of free tier.

Out of those eight, most have strict limits. Crisp only gives you two seats. Tidio stops your widget once you hit 50 conversations in a month. If you have a busy week, your customers are suddenly left with no way to reach you.

LastWorker is different. Live chat and email support are free forever. You get unlimited conversations and you can add as many teammates as you want. There is no credit card required to start.

The shared inbox, contacts, tickets, and knowledge base are also free. You can even set up a public help center without paying a monthly fee. If you need a phone number, it is $1 per month. Outbound SMS is $0.03 per segment, but inbound SMS is free. There are no subscriptions and no per-seat fees.

How do I handle AI features in the chat?

I am cautious about AI. I have written phone scripts at 2am because I did not trust a machine to talk to my customers. At LastWorker, AI is off by default.

New channels are manual. Nothing is generated by a computer unless you choose to turn it on. A human answers the messages. If you decide you want the AI to help, it costs $0.04 only when it actually generates a reply on chat, email, or SMS.

If you want the AI to answer a phone call, it is $0.10 per minute. This includes the carrier cost. You are never charged a flat monthly fee for features you might not use. I appreciate this because I have managed budgets for eleven front desks at once. Paying for "potential" usage is a waste of money.

Why not use a Vue plugin instead?

I concede that some developers prefer using NPM packages. They like to see every dependency listed in their package file. It feels more organized to them.

However, a chat widget is a third-party service. It is not a core part of your application logic. When you use a plugin, you add more weight to your build process. You also create a dependency on the person who wrote the plugin. If they stop updating it, your chat might stop working when you upgrade Vue.

A script tag is the most stable way to handle this. It does not care what version of Vue you are using. It does not care if you use Vite or Webpack. It just works.

What happens after the script is installed?

Once the script is live, your widget will appear. You can start receiving messages in your shared inbox immediately. This is where the work happens.

In my experience running restaurants, the biggest problem is not the technology. It is the response time. I have watched good leads die in a voicemail box because nobody was there to answer.

With the widget installed on your Vue site, you can see those messages in one place. You do not have to jump between different tools. Because there are no per-seat fees, you can give access to everyone on your team. You do not have to decide who is "important" enough to have a login.

If you have multiple locations, you can manage them all from the same shared inbox. I used to manage a two-location restaurant group where we struggled to keep our communications straight. Having a free, unlimited tool for every staff member would have changed how we handled our nightly rushes.

Are there any other hidden costs?

I do not like "synergies" or "platforms" that hide their pricing until you get a bill. I prefer concrete numbers.

With LastWorker, you pay for what you use. If you never use the AI, you never pay for it. If you do not need a phone number, you do not pay the $1.

Most tools like Help Scout or Front charge you per user. Help Scout starts at $25 per user. Front is also $25 per user. If you have a team of ten people, you are paying $250 a month before you even send your first message.

Zoho Desk has a free edition, but it only covers three users and has no live chat at all. You have to pay $7 per user to get basic features.

LastWorker gives you the chat, the ticketing, and the knowledge base for free for everyone on your team. This allows you to scale your service business without your software bill growing every time you hire a new person. I have lived through the stress of trying to keep costs down while trying to improve service. Removing the per-seat fee is a significant help for any small business owner.