ng7-zendesk-webwidget

[![Dependency Status](https://dependencyci.com/github/niteshpurohit/ng7-zendesk-webwidget/badge)](https://dependencyci.com/github/niteshpurohit/ng7-zendesk-webwidget) [![Maintainability](https://api.codeclimate.com/v1/badges/75bc5877b3bf6939fe44/maintaina

Usage no npm install needed!

<script type="module">
  import ng7ZendeskWebwidget from 'https://cdn.skypack.dev/ng7-zendesk-webwidget';
</script>

README

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 _ngxZendeskWebwidgetService: ngxZendeskWebwidgetService) {
    _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