ngx-zendesk-webwidget-8

Zendesk-Webwidget for Angular 2+

Zendesk-Webwidget for Angular 1.x see here

Installation

Via npm:

``bash
$ npm install ngx-zendesk-webwidget-8 --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 "ngx-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 "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:

`ts
import { ngxZendeskWebwidgetService } from "ngx-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 8

$3

- Support Angular 6

$3

- Support Angular 5

$3

- Added custom settings

$3

- Change documentation

$3

- Added documentation
- Initial version