# @nitsanzo/ngx-zendesk-webwidget

> [![Maintainability](https://api.codeclimate.com/v1/badges/75bc5877b3bf6939fe44/maintainability)](https://codeclimate.com/github/AlisonVilela/ngx-zendesk-webwidget/maintainability) [![Build Status](https://travis-ci.org/AlisonVilela/ngx-zendesk-webwidget.s

Latest version **21.0.0** (published 2025-12-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install @nitsanzo/ngx-zendesk-webwidget
pnpm add @nitsanzo/ngx-zendesk-webwidget
yarn add @nitsanzo/ngx-zendesk-webwidget
bun add @nitsanzo/ngx-zendesk-webwidget
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 21.0.0 |
| Published | 2025-12-28 |
| First published | 2022-11-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 21.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Alison Vilela |
| Maintainers | nitsanzo |
| Keywords | angular |

## Links

- npm: https://www.npmjs.com/package/@nitsanzo/ngx-zendesk-webwidget
- Repository: https://github.com/nitsan/ngx-zendesk-webwidget
- Homepage: https://github.com/nitsan/ngx-zendesk-webwidget#readme
- Issues: https://github.com/nitsan/ngx-zendesk-webwidget/issues
- npm.io page: https://npm.io/package/@nitsanzo/ngx-zendesk-webwidget

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Recent versions

- 21.0.0 (latest) — 2025-12-28
- 20.0.0 — 2025-12-28
- 19.0.0 — 2024-12-10
- 18.0.0 — 2024-12-10
- 17.0.1 — 2024-06-26
- 16.0.0 — 2023-05-11
- 15.0.0 — 2023-05-11
- 4.0.0 — 2022-11-22

## README

# ngx-zendesk-webwidget

[![Maintainability](https://api.codeclimate.com/v1/badges/75bc5877b3bf6939fe44/maintainability)](https://codeclimate.com/github/AlisonVilela/ngx-zendesk-webwidget/maintainability)
[![Build Status](https://travis-ci.org/AlisonVilela/ngx-zendesk-webwidget.svg?branch=master)](https://travis-ci.org/AlisonVilela/ngx-zendesk-webwidget)
[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/AlisonVilela/ngx-zendesk-webwidget/issues)

Zendesk-Webwidget for Angular 2+

Zendesk-Webwidget for Angular 1.x see [here](https://github.com/CrossLead/angular-zendesk-widget)

## Installation

Via [npm](https://www.npmjs.com/package/ngx-zendesk-webwidget):

```bash
npm install @nitsanzo/ngx-zendesk-webwidget
```

## Usage

Add to your `tsconfig.json` file, to `paths` `ngx-zendesk-webwidget`:
```json
"compilerOptions": {
    "paths": {
      "ngx-zendesk-webwidget": ["node_modules/@nitsanzo/ngx-zendesk-webwidget"]
    }
```


The examples were made using the classic web widget

### 1. Import the `NgxZendeskWebwidgetModule`

```ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { NgxZendeskWebwidgetModule } from 'ngx-zendesk-webwidget';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxZendeskWebwidgetModule.forRoot()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

#### SharedModule

```ts
@NgModule({
    exports: [
      CommonModule,
      NgxZendeskWebwidgetModule
    ]
})
export class SharedModule { }
```

##### Configuration

```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { NgxZendeskWebwidgetModule, NgxZendeskWebwidgetConfig } from 'ngx-zendesk-webwidget';

import { AppComponent } from './app';

export class ZendeskConfig extends NgxZendeskWebwidgetConfig {
  accountUrl = 'yourdomain.zendesk.com';
  callback(zE) {
    // You can call every command you want in here
    // zE('webWidget', 'hide');
    // zE('webWidget', 'show');
  }
}

@NgModule({
    imports: [
        BrowserModule,
        HttpClientModule,
        NgxZendeskWebwidgetModule.forRoot(ZendeskConfig)
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }
```

##### Configuration with Lazyload

```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { NgxZendeskWebwidgetModule, NgxZendeskWebwidgetConfig } from 'ngx-zendesk-webwidget';

import { AppComponent } from './app';

export class ZendeskConfig extends NgxZendeskWebwidgetConfig {
  override lazyLoad = true;
  accountUrl = 'yourdomain.zendesk.com';
  callback(zE) {
    // You can call every command you want in here
    // zE('webWidget', 'hide');
    // zE('webWidget', 'show');
  }
}

@NgModule({
    imports: [
      BrowserModule,
      HttpClientModule,
      NgxZendeskWebwidgetModule.forRoot(ZendeskConfig)
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule { }
```

#### 2. Init the `NgxZendeskWebwidgetService`

##### For your application

```ts
import { NgxZendeskWebwidgetService } from 'ngx-zendesk-webwidget';

@Component({
  selector: 'app',
  templateUrl: './app.html'
})
export class app {

  constructor(private _NgxZendeskWebwidgetService: NgxZendeskWebwidgetService) { }

}
```

##### With Lazyload

```ts
import { NgxZendeskWebwidgetService } from 'ngx-zendesk-webwidget';

@Component({
  selector: 'app',
  templateUrl: './app.html'
})
export class app {

  constructor(private _NgxZendeskWebwidgetService: NgxZendeskWebwidgetService) {
    this._NgxZendeskWebwidgetService_.initZendesk();
  }

}
```

#### 3. Example to usage

```ts
  constructor(private _NgxZendeskWebwidgetService: NgxZendeskWebwidgetService) {
    this._NgxZendeskWebwidgetService.zE('webWidget', 'identify', {
      name: 'Fulano de Tal',
      email: 'your_user_email@email.com'
    });
  
    this._NgxZendeskWebwidgetService.zE('webWidget', 'prefill', {
        name: {
        value: 'Fulano de Tal',
        readOnly: true
      },
      email: {
        value: 'your_user_email@email.com',
        readOnly: true
      }
    });
  
    this._NgxZendeskWebwidgetService.zE('webWidget', 'show');
  }
  
  logout() {
    this._NgxZendeskWebwidgetService.zE('webWidget', 'hide');
  }
```

## API

### NgxZendeskWebwidgetService

### Web Widget (Messenger)

- The new web widget is not as supported as the classic one, you can check the documentation [here](https://developer.zendesk.com/documentation/zendesk-web-widget-sdks/sdks/web/sdk_api_reference/).

### Web widget (Classic)

- `zE('webWidget:<action>', '<event|property>', <parameters>)`: All commands follow the same basic syntax. Please see [Zendesk Documentation](https://developer.zendesk.com/embeddables/docs/widget/introduction) for more information.

#### NgxZendeskWebwidgetConfig

- `lazyLoad`: Boolean for activate Lazyload initialization of Zendesk Web Widget
- `timeOut`: Timeout in milliseconds of the timer before opening the widget, zendesk unfortunately needs to load more files after the initial promise has been resolved, such as translation files. (default: 30 seconds)
- `injectionTag`: You can identify which tag will be used as a reference for widget injection('head', 'body', 'script'). (Default: 'head')
- `accountUrl`: Url of your domain (example.zendesk.com)
- `callback`: Callback, executed after Zendesk loaded

## Issues

Please report bugs and issues [here](https://github.com/AlisonVilela/ngx-zendesk-webwidget/issues).

## To do

- Tests with jest
- Error handler

## License

MIT © [Alison Vilela](https://github.com/AlisonVilela)

## Change log

### v3.0.1

- Fix documentation

### v3.0.0

- Support Angular 13
- Changed the library core
- Fix initZendesk parameters based on [issue 47](https://github.com/AlisonVilela/ngx-zendesk-webwidget/issues/47) and [issue 43](https://github.com/AlisonVilela/ngx-zendesk-webwidget/issues/43)

### v2.1.1

- Fix injectionTag in NgxZendeskWebwidgetConfig based on [issue 30](https://github.com/AlisonVilela/ngx-zendesk-webwidget/issues/30) by [mps2209](https://github.com/mps2209)

### v2.1.0

- Include injectionTag in NgxZendeskWebwidgetConfig based on [issue 30](https://github.com/AlisonVilela/ngx-zendesk-webwidget/issues/30)

### V2.0.0

- API services that used legacy zE methods (setLocale, identify, hide, show, activate, setHelpCenterSuggestions, setSettings) have been removed, you now need to use the new command syntax for greater flexibility (breaking changes)
- beforePageLoad(zE) changed to callback(zE) (breaking changes)

### V1.0.1

- Fix bugs

### v1.0.0

- Update Packages
- Change Class name to pascal case (breaking changes)
- Lazyload Implemented, based on [Pull 23](https://github.com/AlisonVilela/ngx-zendesk-webwidget/pull/23)
- Configure Timeout on Webwidget initialization

### v0.1.5

- Support Angular 8

### v0.1.4

- Support Angular 6

### v0.1.3

- Support Angular 5

### v0.1.2

- Added custom settings

### v0.1.1

- Change documentation

### v0.1.0

- Added documentation
- Initial version

---
_Source: https://npm.io/package/@nitsanzo/ngx-zendesk-webwidget · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._