ng7-zendesk-webwidget

Zendesk-Webwidget for Angular 2+

Zendesk-Webwidget for Angular 1.x see here

Installation

Via npm:

``bash
$ npm install ng7-zendesk-webwidget --save
`

Usage

#### 1. Import the ngxZendeskWebwidgetModule:

`ts
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

`ts
@NgModule({
exports: [CommonModule, ngxZendeskWebwidgetModule]
})
export class SharedModule {}
`

##### Configuration

`ts
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:

`ts
import { ngxZendeskWebwidgetService } from 'ng7-zendesk-webwidget';

@Component({
selector: 'app',
templateUrl: './app.html'
})
export class app {
constructor(private _ngxZendeskWebwidgetService: ngxZendeskWebwidgetService) {}
}
`

#### 3. Example to usage:

`ts
constructor(private _ngxZendeskWebwidgetService: ngxZendeskWebwidgetService) {
_ngxZendeskWebwidgetService.identify({
name: 'Alison Vilela',
email: 'alison.vilela@live.nl'
})
_ngxZendeskWebwidgetService.show()
}

logout(){
_ngxZendeskWebwidgetService.hide()
}
}
`

API

$3

#### 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

$3

- Support Angular 6

$3

- Support Angular 5

$3

- Added custom settings

$3

- Change documentation

$3

- Added documentation
- Initial version