@presencelearning/zendesk-web-widget

A modern, signals-based Angular wrapper for the Zendesk Messenger Web Widget. Provides a type-safe, reactive API for integrating Zendesk support chat into Angular applications.

Features

• Angular 18–21 compatible
• Signals-based reactive API — leverages Angular signals for reactive state management
• Full TypeScript support — complete type definitions included
• APP_INITIALIZER integration — automatic widget initialization
• JWT authentication support — secure user authentication
• Customizable initial state — control widget visibility and open state
• Conversation fields — attach custom data to support conversations

Installation

npm install @presencelearning/zendesk-web-widget

Peer dependencies

• @angular/common: >=18.0.0
• @angular/core: >=18.0.0

Basic usage

1. Configure providers

import { ApplicationConfig } from '@angular/core';
import {
  provideZendeskWebWidget,
  withZendeskWebWidgetScript,
} from '@presencelearning/zendesk-web-widget';

export const appConfig: ApplicationConfig = {
  providers: [provideZendeskWebWidget(withZendeskWebWidgetScript('YOUR_ZENDESK_KEY'))],
};

2. Use in components

Inject and use the ZendeskWebWidget service in your components:

import { Component, inject } from '@angular/core';
import { ZendeskWebWidget } from '@presencelearning/zendesk-web-widget';

@Component({
  selector: 'app-support',
  template: `
    <button (click)="openSupport()">Contact Support</button>
    <p>Widget is {{ widget.isOpen() ? 'open' : 'closed' }}</p>
  `,
})
export class SupportComponent {
  protected readonly widget = inject(ZendeskWebWidget);

  openSupport() {
    this.widget.showAndOpen();
  }
}

For advanced configuration (initial state, JWT auth) and the full API reference, see the linked pages.

TypeScript types

The package includes TypeScript type definitions from @types/zendesk-web-widget. The global zE function is available once the widget script is loaded.

Browser support

This package supports the same browsers as the Zendesk Messenger Web Widget. For the most up-to-date browser compatibility information, refer to the Zendesk documentation.

---

Source: packages/zendesk-web-widget