Angular Live Chat Integration

Add MyLiveChat to your Angular app

Angular strips <script> tags out of component templates as a security measure, so the chat code cannot go in a component. It belongs in src/index.html, the single page the Angular CLI builds around, where it loads once and stays for the life of the session.

Use this guide to add MyLiveChat to Angular. The free plan includes one agent, unlimited chats, and unlimited websites — no credit card required.

If you do not have a MyLiveChat account yet, create a free MyLiveChat account.

Start free

Sign in to the MyLiveChat web console and click Deployment menu on the left. Choose Embedded Chat tab and copy the MyLiveChat code.

1. Open src/index.html in your Angular project.
2. Paste the MyLiveChat code from Step 1 just before the closing </body> tag, after the <app-root></app-root> element.
3. Save the file. The CLI dev server reloads automatically.
4. Run ng build and deploy the contents of your output folder.

If you need to load it conditionally, inject Renderer2 in AppComponent and create the script element in ngOnInit, appending it to document.body. Do not attempt it from a routed component — it will run again on every navigation back to that route.

Do not assume the install worked because you saw no error. Open your site in a private browsing window and walk through this once:

1. Look for the chat launcher on the page. If it is missing, view the page source and search for mylivechat to confirm the code is really being served.
2. Start a chat as a visitor and send a test message.
3. Sign in to the web console and confirm the message arrives and that you can reply.
4. Close the chat and check the transcript is saved, so you know follow-up will work.

Check the built output rather than only ng serve. The CLI rewrites index.html during the build, and a deployment step that overwrites it is a common way for this install to disappear.

• The snippet went into a component template. Angular sanitises templates and removes <script> tags. Nothing runs and nothing is logged. Use src/index.html.
• A build step overwrote index.html. Some deployment pipelines generate their own index.html. Confirm the deployed file still contains the code.
• It was added inside app-root. Angular replaces the contents of <app-root> when it bootstraps. Put the code after that element, not inside it.
• Only ng serve was tested. Build for production and serve the output before deciding the install works.

After setup, sign in to the web console to answer visitors from your browser. You can also use the desktop app from the download page if your team prefers it.

Want the AI to answer first? Point the AI assistant at your site content and it handles routine questions 24/7, then hands off to a human with the full transcript when one is needed.

Angular is most often chosen for large, long-lived business applications, where a stuck user costs more than a bounced visitor. Chat puts a person one click away from wherever they are in the app.

Installing in src/index.html keeps the widget outside your module graph entirely — no imports, no providers, no change-detection cost.

Why does the script not run inside my component?

Angular sanitises component templates and removes script tags. Put the code in src/index.html instead.

Where in index.html should it go?

Just before the closing body tag, after the app-root element rather than inside it.

Does it survive Angular Router navigation?

Yes. The widget attaches to the document, so client-side routing does not unload it.

Can I load it from TypeScript instead?

Yes. Inject Renderer2 in AppComponent and create the script element in ngOnInit, appending it to document.body.

Is it really free?

Yes. One agent, unlimited chats, and unlimited websites are free forever, with no credit card required.

Colours, position, language, the pre-chat form and your offline message are all set in your MyLiveChat dashboard rather than in your Angular code, so you can change them without editing your project again. See customization options for what can be changed, and visitor monitoring if you want to see which page a visitor is on before you reply.

New to live chat? Start with how to add live chat to your website and the live chat launch checklist, then live chat best practices once you are answering real conversations. Also useful: Live chat on a single-page app and Why your chat widget is blocked for some visitors. If you are worried about page speed, see does live chat slow down your website.

If anything is unclear, contact our support team from the chat button on this page or visit the Support page. We can help you choose the right setup path.