ng7-zendesk-webwidget

    0.1.11 • Public • Published

    Dependency Status Maintainability Build Status contributions welcome Join the chat at https://gitter.im/ng7-zendesk-webwidget/Lobby

    ng7-zendesk-webwidget

    Zendesk-Webwidget for Angular 2+

    Zendesk-Webwidget for Angular 1.x see here

    Installation

    Via npm:

    $ npm install ng7-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 'ng7-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 'ng7-zendesk-webwidget';
     
    import { AppComponent } from './app';
     
    export class ZendeskConfig extends ngxZendeskWebwidgetConfig {
      accountUrl = 'yourdomain.zendesk.com';
      beforePageLoad(zE) {
        zE.setLocale('en');
        zE.hide();
      }
    }
     
    @NgModule({
      imports: [BrowserModule, HttpClientModule, ngxZendeskWebwidgetModule.forRoot(ZendeskConfig)],
      bootstrap: [AppComponent]
    })
    export class AppModule {}

    2. Init the ngxZendeskWebwidgetService for your application:

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

    3. Example to usage:

      constructor(private _ngxZendeskWebwidgetServicengxZendeskWebwidgetService) {
        _ngxZendeskWebwidgetService.identify({
         name: 'Alison Vilela',
         email: 'alison.vilela@live.nl'
        })
        _ngxZendeskWebwidgetService.show()
      }
     
      logout(){
        _ngxZendeskWebwidgetService.hide()
      }
    }

    API

    ngxZendeskWebwidgetService

    Methods:

    • setLocale(locale): Set locale 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

    ngxZendeskWebwidgetConfig:

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

    Issues

    Please report bugs and issues here.

    License

    MIT © Alison Vilela

    Change log

    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

    Keywords

    Install

    npm i ng7-zendesk-webwidget

    DownloadsWeekly Downloads

    1

    Version

    0.1.11

    License

    MIT

    Unpacked Size

    45.2 kB

    Total Files

    20

    Last publish

    Collaborators

    • niteshpurohitit