Library to integrate Livechat with Angular

Demo

StackBlitz live example.

Installation

npm install --save @alekremi/ngx-livechat

Usage

Import NgxLivechatModule in Angular AppModule.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxLivechatModule } from 'ngx-livechat';

import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, NgxLivechatModule.forRoot({ license: 11082047 })],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

The NgxLivechatService also provides methods for LiveChat APIs, such as:

• open_chat_window
• minimize_chat_window and etc.

For example, how to programmatically open a LiveChat window:

constructor(private livechatService: NgxLivechatService) {}

openChatWindow(): void {
    this.livechatService.openChatWindow();
}

Advanced usage

Using external configuration

For example your external configuration looks like:

interface ExternalConfig {
  liveChatLicense: number;
  //...any other params
}

First, we have to set manual initialization flag and specify any license number (for example, 0, this license number will be overwritten when the API service returns the external configuration).

NgxLivechatModule.forRoot({ license: 0, initManually: true });

app.module.ts example:

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { tap } from 'rxjs/operators';
import { NgxLivechatModule, NgxLivechatConfig, NGX_LIVECHAT_CONFIG } from '@alekremi/ngx-livechat';

import { AppComponent } from './app.component';

export function liveChatConfigFactory(httpClient: HttpClient, config: NgxLivechatConfig) {
  return (): Promise<ExternalConfig> =>
    httpClient.get <
    ExternalConfig >
    'YOUR_API_URL'.pipe(tap((externalConfig) => (config.license = externalConfig.liveChatLicense))).toPromise();
}

@NgModule({
  imports: [BrowserModule, HttpClientModule, NgxLivechatModule.forRoot({ license: 0, initManually: true })],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: liveChatConfigFactory,
      deps: [HttpClient, NGX_LIVECHAT_CONFIG],
      multi: true
    }
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Then initialize LiveChat mannualy for example in app.component.ts:

import { Component, OnInit } from '@angular/core';
import { NgxLivechatService } from '@alekremi/ngx-livechat';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private livechatService: NgxLivechatService) {}

  ngOnInit(): void {
    this.livechatService.initLiveChat();
  }
}

Configuration

Parameter	Optional	Description
license	No	LiveChat license number.
group	Yes	Chat window group (defaults to "0"). You can divide LiveChat agents into different departments, such as "Billing" or "Support". For example, if this parameter will point to group "Billing", all visitors entering the chat will talk with agents from this group and not the "Support" group. groups
chatBetweenGroups	Yes	By default, visitor's browsing history is remembered across different groups. If you don't want to display visitor's browsing history across different groups, use the following code. Using this parameter is not recommended when using target field in the pre-chat survey.
params	Yes	Custom variables sent to LiveChat applications. These can be your visitor's account ID, login or any other information that is important for LiveChat agent during the chat. "name" can be max 500 characters long. "value" can be max 3500 characters long.
visitor	Yes	Visitor's data. If your visitor is already logged in to your system, you can pass his name and e-mail to LiveChat apps. Agents will see the information on the "Visitors" list and in the Archives.
gaVersion	Yes	By default, our tracking code strores LiveChat related data in the Google Analytics gaq - traditional asynchronous code for Google Analytics. If you are using a different type of Google Analytics, you can decide which one LiveChat should track. The available options are: ga – Universal Analytics; gtm – Google Tag Manager; gtag – Global Site Tag (gtag.js); gaq – traditional asynchronous code for Google Analytics.
initManually	Yes	The parameter determines whether LiveChat will be manually initialized. By default, it is initialized when the application starts.