Narcoleptic Programmers' Medicine

    ngx-zendesk-webwidget-8
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.5 • Public • Published

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

    ngx-zendesk-webwidget-8

    Zendesk-Webwidget for Angular 2+

    Zendesk-Webwidget for Angular 1.x see here

    Installation

    Via npm:

    $ npm install ngx-zendesk-webwidget-8 --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";
      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 "ngx-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.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

    Keywords

    Install

    npm i ngx-zendesk-webwidget-8

    DownloadsWeekly Downloads

    5

    Version

    0.1.5

    License

    MIT

    Unpacked Size

    23 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar