Integrate button into Angular application

Angular applications are typically written in TypeScript. Below is a simple example of Angular 8 component that creates a button. Note that in your TypeScript component you need to declare a variable with exact name 'LiveAgent' (mind the capital L) to be able to use a global variable defined in track.js with the same name.

contact.component.html
...
<div id="chatButton"></div>
...
contact.component.ts
import { Component, OnInit } from '@angular/core';

declare var LiveAgent: any;

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css']
})
export class ContactComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    let scriptUrl = 'https://<youraccount>.ladesk.com/scripts/track.js';
    let node = document.createElement('script');
    node.src = scriptUrl;
    node.id = 'la_x2s6df8d';
    node.type = 'text/javascript';
    node.async = true;
    node.charset = 'utf-8';
    node.onload = function(e) {
      LiveAgent.createButton('BUTTON_ID', document.getElementById("chatButton"));
    };
    document.getElementsByTagName('head')[0].appendChild(node);
  }
}

Replace <youraccount> with your LiveAgent account name and BUTTON_ID with button ID. You can copy the button ID from button's integration code in LiveAgent (see image below):

Ready to try LiveAgent?

It's free for the first 14 days! No credit card required.

Get Started
We work well with others...
Magento Joomla Wordpress Mailchimp
Contact us

support@liveagent.com

+1-800-811-6590 (Toll Free in USA & Canada)

+421 2 33 456 826 (European Union & Worldwide)

Quality Unit, LLC 616 Corporate Way, Suite 2-3278 Valley Cottage, NY 10989

Stay in touch
Blog Google+
© 2004-2020 LiveAgent.com, All rights reserved