Angular Adapter
This library lets you easily add chat widget functionality to your Angular application, whether you have an account on livechat.com or text.com. This package supports both LiveChat and Text widgets.
Installation
Using npm
ANGULAR ADAPTER USING NPMCopied!
npm install @livechat/widget-angular
Using a script tag
ANGULAR ADAPTER USING SCRIPT TAGCopied!
<script src="http://unpkg.com/@livechat/widget-core@1.4.0"></script>
<script src="https://unpkg.com/@livechat/widget-angular@1.4.0"></script>
Usage
1. LiveChat Widget (for organizations using LiveChat)
If you have an account on livechat.com, use the livechat-widget component and provide your license number:
RENDER LIVECHAT WIDGETCopied!
// app.module.ts
import { NgModule } from "@angular/core"
import { LiveChatWidgetModule } from "@livechat/widget-angular"
@NgModule({
/* ... */
imports: [LiveChatWidgetModule],
})
export class AppModule {}
RENDER LIVECHAT WIDGETCopied!
// app.component.ts
import { Component } from "@angular/core"
import { EventHandlerPayload } from "@livechat/widget-angular"
@Component({
/* ... */
templateUrl: './app.component.html',
})
export class AppComponent {
handleNewEvent(event: EventHandlerPayload<"onNewEvent">) {
console.log("LiveChatWidget.onNewEvent", event)
}
}
RENDER LIVECHAT WIDGETCopied!
<!-- app.component.html -->
<livechat-widget
license="12345678"
visibility="maximized"
(onNewEvent)="handleNewEvent($event)"
></livechat-widget>
2. Text Widget (for organizations using Text)
If you have an account on text.com, use the text-widget component and provide your organizationId:
RENDER TEXT WIDGETCopied!
// app.module.ts
import { NgModule } from "@angular/core"
import { LiveChatWidgetModule } from "@livechat/widget-angular"
@NgModule({
/* ... */
imports: [LiveChatWidgetModule],
})
export class AppModule {}
RENDER TEXT WIDGETCopied!
// app.component.ts
import { Component } from "@angular/core"
import { EventHandlerPayload } from "@livechat/widget-angular"
@Component({
/* ... */
templateUrl: './app.component.html',
})
export class AppComponent {
handleNewEvent(event: EventHandlerPayload<"onNewEvent">) {
console.log("TextWidget.onNewEvent", event)
}
}
RENDER TEXT WIDGETCopied!
<!-- app.component.html -->
<text-widget
organizationId="614fe72f-3319-43c6-9ae6-c410c65df230"
visibility="maximized"
(onNewEvent)="handleNewEvent($event)"
></text-widget>
Assignable properties
Config data
All properties described below are used for initialization on the first render and later updates of the chat widget with new values on change.
| Prop | Type |
|---|---|
| license | organizationId | string (required) |
| group | string |
| customerName | string |
| customerEmail | string |
| chatBetweenGroups | boolean |
| sessionVariables | Record<string, string> |
| visibility | 'maximized' | 'minimized' | 'hidden' |
Event handlers
All event handlers listed below are registered if provided for the first time. They unregister on the component cleanup or the property value change. Descriptions of all events are available after clicking on the associated links.
- onReady
- onAvailabilityChanged
- onVisibilityChanged
- onCustomerStatusChanged
- onNewEvent
- onFormSubmitted
- onRatingSubmitted
- onGreetingDisplayed
- onGreetingHidden
- onRichMessageButtonClicked
Services
The LiveChatWidgetModule, exported from this package, registers a set of injectable services. All of them expose a subscribable BehaviorSubject instance. It allows for consuming reactive data from the chat widget in any place of the application, as long as the LiveChatWidget or TextWidget component is rendered in the tree.
WidgetStateService
Access the current chat widget availability or visibility state if the chat widget is loaded.
WIDGET STATE SERVICECopied!
// app.component.ts
import { Component, OnInit } from "@angular/core";
import {
WidgetStateService,
WidgetStateSubject,
} from "@livechat/widget-angular";
@Component({
/* ... */
templateUrl: "./app.component.html",
})
export class AppComponent implements OnInit {
widgetState$: WidgetStateSubject;
constructor(widgetStateService: WidgetStateService) {
this.widgetState$ = widgetStateService.subject;
}
ngOnInit() {
this.widgetState$.subscribe((widgetState) => {
console.log("AppComponent.ngOnInit.widgetState", widgetState);
});
}
}
WIDGET STATE SERVICECopied!
<!-- app.component.html -->
<div *ngIf="widgetState$ | async as widgetState">
<div>{{ widgetState.availability }}</div>
<div>{{ widgetState.visibility }}</div>
</div>
WidgetIsReadyService
Check if the chat widget is ready using the boolean flag isWidgetReady.
WIDGET IS READY SERVICECopied!
// app.component.ts
import { Component, OnInit } from "@angular/core";
import {
WidgetIsReadyService,
WidgetIsReadySubject,
} from "@livechat/widget-angular";
@Component({
/* ... */
templateUrl: "./app.component.html",
})
export class AppComponent implements OnInit {
widgetIsReady$: WidgetIsReadySubject;
constructor(widgetIsReadyService: WidgetIsReadyService) {
this.widgetIsReady$ = widgetIsReadyService.subject;
}
ngOnInit() {
this.widgetIsReady$.subscribe((widgetIsReady) => {
console.log("AppComponent.ngOnInit.widgetIsReady", widgetIsReady);
});
}
}
WIDGET IS READY SERVICECopied!
<!-- app.component.html -->
<div>{{ widgetIsReady$ | async }}</div>
WidgetChatDataService
Access the chatId and threadId of the chat if there's one currently available.
WIDGET CHAT DATA SERVICECopied!
// app.component.ts
import { Component, OnInit } from "@angular/core";
import {
WidgetChatDataService,
WidgetChatDataSubject,
} from "@livechat/widget-angular";
@Component({
/* ... */
templateUrl: "./app.component.html",
})
export class AppComponent implements OnInit {
chatData$: WidgetChatDataSubject;
constructor(chatDataService: WidgetChatDataService) {
this.chatData$ = chatDataService.subject;
}
ngOnInit() {
this.chatData$.subscribe((chatData) => {
console.log("AppComponent.ngOnInit.chatData", chatData);
});
}
}
WIDGET CHAT DATA SERVICECopied!
<!-- app.component.html -->
<div *ngIf="chatData$ | async as chatData">
<div>{{ chatData.availability }}</div>
<div>{{ chatData.visibility }}</div>
</div>
WidgetGreetingService
Access the current greeting id and uniqueId if one is currently displayed (received and not hidden).
WIDGET GREETING SERVICECopied!
// app.component.ts
import { Component, OnInit } from "@angular/core";
import {
WidgetGreetingService,
WidgetGreetingSubject,
} from "@livechat/widget-angular";
@Component({
/* ... */
templateUrl: "./app.component.html",
})
export class AppComponent implements OnInit {
greeting$: WidgetGreetingSubject;
constructor(greetingService: WidgetGreetingService) {
this.greeting$ = greetingService.subject;
}
ngOnInit() {
this.greeting$.subscribe((greeting) => {
console.log("AppComponent.ngOnInit.greeting", greeting);
});
}
}
WIDGET GREETING SERVICECopied!
<!-- app.component.html -->
<div *ngIf="greeting$ | async as greeting">
<div>{{ greeting.availability }}</div>
<div>{{ greeting.visibility }}</div>
</div>
WidgetCustomerDataService
Access the id, isReturning, status, and sessionVariables of the current customer if the chat widget is loaded.
WIDGET CUSTOMER DATA SERVICECopied!
// app.component.ts
import { Component, OnInit } from "@angular/core";
import {
WidgetCustomerDataService,
WidgetCustomerDataSubject,
} from "@livechat/widget-angular";
@Component({
/* ... */
templateUrl: "./app.component.html",
})
export class AppComponent implements OnInit {
customerData$: WidgetCustomerDataSubject;
constructor(customerDataService: WidgetCustomerDataService) {
this.customerData$ = customerDataService.subject;
}
ngOnInit() {
this.customerData$.subscribe((customerData) => {
console.log("AppComponent.ngOnInit.customerData", customerData);
});
}
}
WIDGET CUSTOMER DATA SERVICECopied!
<!-- app.component.html -->
<div *ngIf="customerData$ | async as customerData">
<div>{{ customerData.id }}</div>
<div>{{ customerData.isReturning }}</div>
<div>{{ customerData.status }}</div>
<ul>
<li *ngFor="let variable of customerData.sessionVariables | keyvalue">
{{ variable.value }}
</li>
</ul>
</div>