https://github.com/yociduo/ngx-pendo
A simple wrapper to load Pendo by angular way
https://github.com/yociduo/ngx-pendo
angular pendo typescript
Last synced: 2 months ago
JSON representation
A simple wrapper to load Pendo by angular way
- Host: GitHub
- URL: https://github.com/yociduo/ngx-pendo
- Owner: yociduo
- License: mit
- Created: 2019-08-07T03:32:09.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2024-12-18T06:14:14.000Z (6 months ago)
- Last Synced: 2025-03-23T07:20:02.704Z (3 months ago)
- Topics: angular, pendo, typescript
- Language: TypeScript
- Homepage:
- Size: 3.67 MB
- Stars: 16
- Watchers: 2
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - ngx-pendo - A simple wrapper to load Pendo in Angular. (Table of contents / Angular)
- awesome-angular - ngx-pendo - A simple wrapper to load Pendo in Angular. (Table of contents / Angular)
README
# Ngx Pendo
An easy implementation pendo on angular6+ apps.
[](https://www.npmjs.com/package/ngx-pendo)
[](https://www.npmjs.com/package/ngx-pendo)
[](https://github.com/yociduo/ngx-pendo/actions/workflows/ci.yml)
[](https://github.com/yociduo/ngx-pendo/blob/main/LICENSE)
## Install
### compatibility
| Angular | ngx-pendo |
| ---------- | --------- |
| 17+ | 2.0.x |
| 16 | 1.14.x |
| 15 | 1.11.x |
| 14 | 1.10.x |
| 13 | 1.9.x |
| 9/10/11/12 | 1.8.x |
| 6/7/8 | 1.2.x |
### npm
If you use npm:
```
npm install ngx-pendo
```
### yarn
If you use yarn:
```
yarn add ngx-pendo
```
### schematics
Use the Angular CLI's install [schematics](https://angular.io/guide/schematics) to set up [ngx-pendo](https://www.npmjs.com/package/ngx-pendo) by running the following command:
```
ng add ngx-pendo
```
The `ng add` command will install [ngx-pendo](https://www.npmjs.com/package/ngx-pendo) and ask you the following question:
1. Please enter Pendo Api Key:
You must enter Pendo Api Key
The `ng add` command will additionally perform the following configurations:
- Add `ngx-pendo` to _package.json_
- Auto import `NgxPendoModule` with _pendoApiKey_ into `AppModule`
> This feature need angular 9+.
## Feedbacks
https://github.com/yociduo/ngx-pendo/issues
## Simple Configuration
#### Module-based apps
```ts
import { NgxPendoModule } from 'ngx-pendo';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
NgxPendoModule.forRoot({
pendoApiKey: 'pendo-api-key',
pendoIdFormatter: (pendoId: string) => pendoId.toLowerCase()
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
```
#### Using the Standalone API
```ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideNgxPendo } from 'ngx-pendo';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, {
providers: [
provideNgxPendo({
pendoApiKey: 'pendo-api-key',
pendoIdFormatter: (pendoId: string) => pendoId.toLowerCase()
})
]
});
```
## Call Initialization
#### Using Service
```ts
import { Component, OnInit } from '@angular/core';
import { NgxPendoService } from 'ngx-pendo';
@Component( ... )
export class AppComponent implements OnInit {
constructor(private ngxPendoService: NgxPendoService) {
}
ngOnInit() {
this.ngxPendoService.initialize({
id: 'PUT_VISITOR_ID_HERE',
name: 'Neo',
email: '[email protected]',
role: 'godlike'
}, {
id: 'PUT_ACCOUNT_ID_HERE',
name: 'CorpSchmorp'
});
}
}
```
#### Using Context
```ts
import { Component, OnInit } from '@angular/core';
import { NGX_PENDO_CONTEXT, IPendo } from 'ngx-pendo';
@Component( ... )
export class AppComponent implements OnInit {
constructor(@Inject(NGX_PENDO_CONTEXT) private pendo: IPendo) {
}
ngOnInit() {
this.pendo.initialize({
visitor: {
id: "PUT_VISITOR_ID_HERE",
name: "John Doe",
email: "[email protected]",
role: "Viewer"
},
account: {
id: "PUT_ACCOUNT_ID_HERE",
name: "Acme Co"
},
apiKey: 'PUT_API_KEY_HERE'
});
}
}
```
#### Using Pendo
```ts
import { Component, OnInit } from '@angular/core';
import { IPendo } from 'ngx-pendo';
declare var pendo: IPendo;
@Component( ... )
export class AppComponent implements OnInit {
ngOnInit() {
pendo.initialize({
visitor: {
id: "PUT_VISITOR_ID_HERE",
name: "John Doe",
email: "[email protected]",
role: "Viewer"
},
account: {
id: "PUT_ACCOUNT_ID_HERE",
name: "Acme Co"
},
apiKey: 'PUT_API_KEY_HERE'
});
}
}
```
## Pendo Directives
You can use angular directives to add pendo id.
### Simple directive use
```html
Click Test
```