Platform
APIs & SDKs
Resources

...

Angular Adapter

This library allows to render and interact with the LiveChat Chat Widget inside an Angular application.

Installation

Using npm

ANGULAR ADAPTER USING NPM
Copied!
npm install @livechat/widget-angular

Using a script tag

ANGULAR ADAPTER USING SCRIPT TAG
Copied!
<script src="http://unpkg.com/@livechat/widget-core@1.0.1"></script>
<script src="https://unpkg.com/@livechat/widget-angular@1.0.1"></script>

Usage

Render

RENDER
Copied!
// app.module.ts

import { NgModule } from "@angular/core";
import { LiveChatWidgetModule } from "@livechat/widget-angular";

@NgModule({
  /* ... */
  imports: [LiveChatWidgetModule],
})
export class AppModule {}
RENDER
Copied!
// 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
Copied!
<!-- 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.

PropType
licensestring (required)
groupstring
customerNamestring
customerEmailstring
chatBetweenGroupsboolean
sessionVariablesRecord<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.

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 component is rendered in the tree.

WidgetStateService

Access the current chat widget availability or visibility state if the chat widget is loaded.

WIDGET STATE SERVICE
Copied!
// 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 SERVICE
Copied!
<!-- 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 SERVICE
Copied!
// 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 SERVICE
Copied!
<!-- 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 SERVICE
Copied!
// 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 SERVICE
Copied!
<!-- 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 SERVICE
Copied!
// 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 SERVICE
Copied!
<!-- 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 SERVICE
Copied!
// 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 SERVICE
Copied!
<!-- 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>

...

Join the community
Get in direct contact with us through Discord.
Follow us
Follow our insightful tweets and interact with our content.
Contribute
See something that's wrong or unclear? Submit a pull request.
Contact us
Want to share feedback? Reach us at: developers@text.com