nzw

ngx-zendesk-webwidget

ngx-zendesk-webwidget based on angular-zendesk-widget

Showing:

Popularity

Downloads/wk

1.3K

GitHub Stars

35

Maintenance

Last Commit

2yrs ago

Contributors

4

Package

Dependencies

0

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

ngx-zendesk-webwidget

Maintainability Build Status contributions welcome

Zendesk-Webwidget for Angular 2+

Zendesk-Webwidget for Angular 1.x see here

Installation

Via npm:

npm install ngx-zendesk-webwidget --save

Usage

1. Import the NgxZendeskWebwidgetModule

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

@NgModule({
    exports: [
      CommonModule,
      NgxZendeskWebwidgetModule
    ]
})
export class SharedModule { }
Configuration
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');
  }
}

@NgModule({
    imports: [
        BrowserModule,
        HttpClientModule,
        NgxZendeskWebwidgetModule.forRoot(ZendeskConfig)
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Configuration with Lazyload
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 {
  lazyLoad = true;
  accountUrl = 'yourdomain.zendesk.com';
  callback(zE) {
    // You can call every command you want in here
    zE('webWidget', 'hide');
  }
}

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

2. Init the NgxZendeskWebwidgetService

For your application
import { NgxZendeskWebwidgetService } from 'ngx-zendesk-webwidget';

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

  constructor(private _NgxZendeskWebwidgetService: NgxZendeskWebwidgetService) { }

}
With Lazyload
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

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

Methods

  • zE('webWidget:<action>', '<event|property>', <parameters>): All commands follow the same basic syntax. Please see Zendesk Documentation 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.

License

MIT © Alison Vilela

Change log

v2.1.1

  • Fix injectionTag in NgxZendeskWebwidgetConfig based on issue 30 by mps2209

v2.1.0

  • Include injectionTag in NgxZendeskWebwidgetConfig based on issue 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
  • 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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial