llibdude / ngx-pendo

A simple wrapper to load Pendo by angular way

Ngx Pendo

An easy implementation pendo on angular6+ apps.

Install

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 to set up ngx-pendo by running the following command:

ng add ngx-pendo

The ng add command will install 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 11+.

Feedbacks

https://github.com/yociduo/ngx-pendo/issues

Simple Configuration

import { NgxPendoModule } from 'ngx-pendo';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxPendoModule.forRoot({
      pendoApiKey: 'pendo-api-key',
      pendoIdFormatter: (value: any) => value.toString().toLowerCase()
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Call Initialization

import { Component, OnInit } from '@angular/core';
import { NgxPendoService } from 'ngx-pendo';

@Component( ... )
export class AppComponent implements OnInit {

  constructor(protected 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'
    });
  }

}

Pendo Directives

You can use angular directives to add pendo id.

Simple directive use

<div ngx-pendo-section="section">
  <button ngx-pendo-id="click_test">Click Test</button>
</div>