@wavecx/ngx

Angular wrapper for the WaveCX web SDK.

Installation

To install the package, use npm:

npm install @wavecx/ngx

Usage

Import the WaveCx module in your Angular application:

import {WaveCxModule} from '@wavecx/ngx';

@Component({
  selector: 'app-root',
  imports: [WaveCxModule],
  providers: [],
  templateUrl: './app.component.html',
})
export class AppComponent {
  // ...
}

Use the WaveCx service in your components:

import {WaveCxModule, WaveCxService} from '@wavecx/ngx';

@Component({
  selector: 'app-root',
  imports: [WaveCxModule],
  providers: [WaveCxService],
  templateUrl: './app.component.html',
})
export class AppComponent {
  constructor(private waveCx: WaveCxService) {
    // initialize WaveCx at startup
    waveCx.init({
      organizationCode: 'your-org-code',
    });
    
    // Optionally, listen for route changes.
    // route-match triggers will automatically
    // be refreshed when the route changes
    // if this method is called.
    // (listens for the standard angular router from @angular/router)
    waveCx.listenForRouteChanges();
  }
  
  onSignIn() {
    // identify your user upon authentication
    waveCx.setUser({
      userId: 'user-id',
      userIdVerification: 'user-id-hmac-sha256', // optional, required by API if enabled in organization
      userAttributes: { // optional user attributes for user segmentation
        email: 'user-email',
        firstName: 'user-first-name',
        lastName: 'user-last-name',
        custom1: 'custom-value-1',
        custom2: 'custom-value-2',
        custom3: 'custom-value-3',
      },
    });
  }
  
  onCustomEvent() {
    // track custom events
    waveCx.customEvent('sign-in');
  }
  
  onModalOpened() {
    // refresh WaveCx triggers when the DOM changes (e.g. a modal opens)
    waveCx.refreshTriggers();
  }
  
  async showButtonIfHasContent() {
    // check for content on a trigger
    // e.g. to show/hide a button based on content availability
    const hasContent = await waveCx.hasContentForTrigger({
      type: 'custom-event',
      eventCode: 'my-event',
    });
    if (hasContent) {
      // show button
    }
  }
}

Content Security Policy

The following domains must be allowed by your Content Security Policy:

• connect-src api.wavecx.com
• script-src embed.wavecx.com
• style-src embed.wavecx.com
• frame-src .wavecx.com