ng-zendesk-webwidget

Zendesk-Webwidget for Angular

Installation guide
Usage
API

Installation

$ npm install ng-zendesk-webwidget --save

$ yarn add ng-zendesk-webwidget

Usage

In app.module import `ZendeskWebwidgetModule`

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
 
import { ZendeskWebwidgetModule } from 'ng-zendesk-webwidget';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ZendeskWebwidgetModule.forRoot()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Using a SharedModule

@NgModule({
    exports: [
        CommonModule,
        ZendeskWebwidgetModule
    ]
})
export class SharedModule { }

Configuration

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
 
import {ZendeskWebwidgetModule, ZendeskWebwidgetConfig} from 'ng-zendesk-webwidget';
 
import {AppComponent} from './app';
 
export class ZendeskConfig extends ZendeskWebwidgetConfig {
  accountUrl = 'yourdomain.zendesk.com';
  beforePageLoad(zE) {
    zE.setLocale('en');
    zE.hide();
  }
}
 
@NgModule({
    imports: [
        BrowserModule,
        HttpClientModule,
        ZendeskWebwidgetModule.forRoot(ZendeskConfig)
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

2. Init the `ZendeskWebwidgetService` for your application:

import { ZendeskWebwidgetService } from 'ng-zendesk-webwidget';
 
@Component({
  selector: 'app',
  templateUrl: './app.html'
})
export class app {
 
  constructor(private _ZendeskWebwidgetService: ZendeskWebwidgetService) {
  }
}

3. Example to usage:

  constructor(private _ZendeskWebwidgetService: ZendeskWebwidgetService) {
    _ZendeskWebwidgetService.identify({
     name: 'John Doe',
     email: 'John@doe.net'
    })
    _ZendeskWebwidgetService.show()
  }
 
  logout(){
    _ZendeskWebwidgetService.hide()
  }
}

API

ZendeskWebwidgetService

Methods:

setLocale('en') Set to change language

identify(userObj) If your user is signed in, you can use this methods for to pass the details of that user to your Zendesk

hide(): The method completely hides all parts of the Widget from the page.

show(): The method displays the Widget on the host page in its starting 'button' state.

activate(options): The method activates and opens the Widget in its starting state.

setHelpCenterSuggestions(options): The method enhances the contextual help provided by the Web Widget.

setSettings(settings): The method sets window.zESettings.

For more info, see: ZendeskAPI

ZendeskWebwidgetConfig:

accountUrl: Url of your domain (example.zendesk.com)
beforePageLoad: Callback, executed after Zendesk loaded

Deploy

To deploy new versions use np

Issues

Please report bugs and issues here.