README
@livechat/widget-angular
This library allows to render and interact with the LiveChat Chat Widget inside an Angular application.
Installation
Using npm:
npm install @livechat/widget-angular
or using yarn:
yarn add @livechat/widget-angular
Usage
Render
// 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)
}
}
<!-- app.component.html -->
<livechat-widget
license="12345678"
visibility="maximized"
(onNewEvent)="handleNewEvent($event)"
></livechat-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 | string (required) |
group | string |
visibility | 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 consuming reactive data from the chat widget in any place of the application, as long as the LiveChatWidget
component is rendered in the tree.
WidgetStateService
Access the current chat widget availability
or visibility
state if the chat widget is loaded.
// 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)
})
}
}
<!-- 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
.
// 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)
})
}
}
<!-- app.component.html -->
<div>{{ widgetIsReady$ | async }}</div>
WidgetChatDataService
Access the chatId
and threadId
of the chat if there's one currently available.
// 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)
})
}
}
<!-- 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).
// 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)
})
}
}
<!-- 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.
// 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)
})
}
}
<!-- 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>
Contributing
Pull requests are welcome. For major changes, please open an issue first, so we can discuss what you would like to change. Follow a Contributing guide for more details.
License
The code and documentation in this project are released under the MIT License.