Angular Adapter

This library lets you easily add chat widget functionality to your Angular application.

Installation

Using npm

npm install @livechat/widget-angular

Using a script tag

<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

Use the text-widget component and provide your organizationId:

// app.module.ts

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

@NgModule({
  /* ... */
  imports: [LiveChatWidgetModule],
})
export class AppModule {}

// 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)
  }
}

<!-- 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.

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.

// 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>

Overview

Core concepts

Framework adapters

Installation

Using npm

Using a script tag

Usage

Assignable properties

Config data

Event handlers

Services

WidgetStateService

WidgetIsReadyService

WidgetChatDataService

WidgetGreetingService

WidgetCustomerDataService

​Installation

​Using npm

​Using a script tag

​Usage

​Assignable properties

​Config data

​Event handlers

​Services

​WidgetStateService

​WidgetIsReadyService

​WidgetChatDataService

​WidgetGreetingService

​WidgetCustomerDataService

Installation

Using npm

Using a script tag

Usage

Assignable properties

Config data

Event handlers

Services

WidgetStateService

WidgetIsReadyService

WidgetChatDataService

WidgetGreetingService

WidgetCustomerDataService