How to add free live chat to Angular

To add free live chat to Angular, open the src/index.html file and paste your script tag immediately before the closing </body> tag. After saving, restart your ng serve command. Avoid adding the script to the angular.json file: that method bundles the code and often strips the data attributes required for the chat widget to load correctly.

Where does the live chat script go in an Angular project?

In an Angular application, the entry point for the browser is the src/index.html file. While Angular is a complex framework that manages components and routing, the chat widget is a global script. It needs to live outside the main application component logic to ensure it stays visible as the user navigates through different pages.

I have seen many developers try to get fancy by creating a specific ChatComponent or trying to inject the script through a service. This usually leads to errors or the widget disappearing when the route changes. The simplest way is the best way. Open your project folder and locate src/index.html. Scroll to the bottom of the file.

Paste this code snippet right before the closing body tag:

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

You will need to replace YOUR_AGENT_ID with the actual ID from your LastWorker dashboard. Once you save the file, go to your terminal and restart your development server. The widget should appear in the bottom corner of your site immediately.

Why should you avoid using angular.json for this script?

There is a common mistake I see when teams add third party tools to Angular. The angular.json file has a scripts array that looks like the right place to put external files. It seems cleaner to keep all your dependencies in one configuration file.

In this case: clean code will break your widget. When you add a script to that array, the Angular CLI takes the code and bundles it into a single file. During that process: the data attributes like data-agent-id are often stripped away. The LastWorker widget requires that attribute to know which account it belongs to. If it is missing, the widget will not load.

I learned this the hard way while setting up a portal for the dental practice I worked with. We spent three hours debugging why the chat box wouldn't show up. We had eleven front desks waiting to use the system. It turned out the build process was just deleting the ID the script needed to run. Use the index.html file and save yourself the headache.

How do you verify the installation is correct?

Once you have saved the file and restarted ng serve: open your browser to your local development address. Look at the bottom right of the screen. You should see the chat icon. If it is not there: right-click the page and select Inspect. Go to the Console tab.

If you see an error about a missing agent ID: you likely have a typo in the data-agent-id attribute. If you see no error but no widget: check your Elements tab to make sure the script tag is actually present in the HTML.

In the shops I worked with: we always tested the chat from a mobile device too. Since Angular applications are often used for mobile-friendly dashboards: you want to make sure the widget does not block important buttons on your mobile view.

Why do most free chat tools limit your team size?

I have spent eighteen years running customer operations. I know that the cost of software can sneak up on you as you grow. I looked at the 12 most popular support tools on the market to see how they handle free plans.

Out of those 12 tools: 4 do not offer any free tier at all. For the 8 that do: most of them put a tight leash on how many people can use it. For example: Crisp, Chatwoot, Freshdesk, and HubSpot all limit their free plans to just 2 agents. Help Scout is slightly better at 5 agents: but that is still a low ceiling for a growing business.

The regional dental practice I managed had eleven front desks. If I used a tool like Zendesk: which starts at $19 per agent: I would be paying $209 every month just for the right to have my staff answer questions.

LastWorker is different because live chat and email support are free forever with unlimited teammates. You can have 5 agents or 50 agents: and the bill remains $0. We also do not cap the number of conversations you can have. Tidio: for instance: limits you to 50 conversations a month on their free plan. Once you hit 51: the widget stops working until the next month. That is a dangerous way to run a business.

How does LastWorker provide a free service without a subscription?

I understand the skepticism around free software. Usually: a free plan is just a trap to get you onto a $50 per month subscription later. I have written enough phone scripts at 2am to know that unexpected bills are the last thing a business owner needs.

The model here is different. We do not charge for seats or for the software itself. The shared inbox: contacts: tickets: knowledge base: and the public help center are all free. We make money only when you use optional: high-value features.

AI is one of those features. Most companies force AI on you or use it to justify a high monthly fee. At LastWorker: AI is off by default. Everything stays manual and human-driven until you decide otherwise. If you want the AI to reply to a chat or email: it costs $0.04 only when it actually generates a reply.

If you want an AI to answer your phone calls: it is $0.10 per minute. We also provide phone numbers for $1 per month. Inbound SMS is free: and outbound is $0.03 per segment. This means if you have a slow month: you pay almost nothing. If you have a busy month: you only pay for the work that was actually done.

What happens after the script is installed?

Once the widget is live on your Angular site: you can start inviting your team. Since there is no per-seat fee: you should invite everyone who touches customer service. In the restaurant group I worked with: we invited the catering managers and the floor managers at both locations.

You can set up your knowledge base and saved replies immediately. These are free and help your team answer questions faster. If you find yourself typing the same three paragraphs about your pricing or your hours: you can save those as replies.

I have watched good leads die in a voicemail box because nobody was available to pick up the phone. A live chat widget on your site prevents that. Even if you are busy: a customer can leave their email address in the chat: and it will create a ticket in your shared inbox. You can follow up when you have a spare minute.

I concede that some businesses prefer a traditional subscription because they like a predictable bill. I respect that. But for the service businesses I have run: paying for software that sits idle half the time makes no sense. You should only pay when the tool is actually helping you make money or save time.

How to handle AI features in your Angular app

Many people ask if they need to write extra code to use AI with their Angular site. You do not. Once the script is installed: all the AI settings are managed in your LastWorker dashboard.

You can train the AI on your help center articles or your previous chat history. Again: this is off by default. You have to go in and turn it on for specific channels. I like this because it gives you control. You can keep your chat human but let the AI handle your after-hours phone calls.

I have spent years hiring receptionists and training them to follow scripts. It is hard work. Being able to toggle an AI receptionist on for $0.10 a minute during a holiday weekend is a tool I wish I had ten years ago. It is much cheaper than paying holiday overtime or missing the calls entirely.

Final steps for your installation

Check your Angular build one last time. Run your production build to ensure the index.html script tag persists. Some build pipelines might try to minify the HTML: so ensure that your data-agent-id stays intact.

You now have a professional grade support system running on your site. You have unlimited seats: a shared inbox: and a ticketing system ready to go. You have done this without a credit card and without a monthly subscription.

The goal of any service business is to be available when the customer is ready to buy. By putting this widget in your Angular app: you have made it easier for people to reach you. Now: you just have to make sure someone is there to answer. If you can't be there: you know the AI is available if you choose to use it.