@desklync/angular

Angular SDK for the DeskLync chat widget.

Installation

npm install @desklync/angular
# or
yarn add @desklync/angular
# or
pnpm add @desklync/angular

Quick Start

Standalone (Angular 14+)

// app.config.ts
import { ApplicationConfig } from '@angular/core'
import { provideDeskLync } from '@desklync/angular'

export const appConfig: ApplicationConfig = {
  providers: [
    provideDeskLync({
      businessId: 'your-business-id'
    })
  ]
}

NgModule

// app.module.ts
import { NgModule } from '@angular/core'
import { DESKLYNC_CONFIG } from '@desklync/angular'

@NgModule({
  providers: [
    {
      provide: DESKLYNC_CONFIG,
      useValue: {
        businessId: 'your-business-id'
      }
    }
  ]
})
export class AppModule {}

Using the Service

import { Component } from '@angular/core'
import { DeskLyncService } from '@desklync/angular'

@Component({
  selector: 'app-chat-button',
  template: `
    <button (click)="openChat()" [disabled]="!(deskLync.isReady$ | async)">
      {{ (deskLync.isOpen$ | async) ? 'Close Chat' : 'Open Chat' }}
    </button>
  `
})
export class ChatButtonComponent {
  constructor(public deskLync: DeskLyncService) {}

  openChat() {
    this.deskLync.open()
  }
}

Configuration Options

provideDeskLync({
  businessId: 'your-business-id',
  position: 'bottom-right',
  primaryColor: '#6366f1',
  welcomeMessage: 'Hi there! 👋',
  welcomeSubtext: 'We usually reply within a few minutes.'
})

Service API

Properties (Observables)

// All state is exposed as observables
deskLync.isReady$: Observable<boolean>
deskLync.isOpen$: Observable<boolean>
deskLync.isIdentified$: Observable<boolean>
deskLync.messages$: Observable<{ content: string; sender: string }>

// Also available as sync getters
deskLync.isReady: boolean
deskLync.isOpen: boolean
deskLync.isIdentified: boolean

Methods

// Control visibility
deskLync.open(): void
deskLync.close(): void
deskLync.toggle(): void

// User management
deskLync.identify(user: DeskLyncUser): void
deskLync.clearUser(): void

User Identification

@Component({...})
export class AuthComponent {
  constructor(private deskLync: DeskLyncService) {}

  onLogin(user: User) {
    this.deskLync.identify({
      email: user.email,
      name: user.name,
      userHash: user.deskLyncHash, // From your server
    })
  }

  onLogout() {
    this.deskLync.clearUser()
  }
}

Listening for Messages

@Component({...})
export class NotificationComponent implements OnInit, OnDestroy {
  private subscription?: Subscription

  constructor(private deskLync: DeskLyncService) {}

  ngOnInit() {
    this.subscription = this.deskLync.messages$.subscribe(message => {
      console.log('New message:', message.content)
    })
  }

  ngOnDestroy() {
    this.subscription?.unsubscribe()
  }
}

License

MIT