Angular

This document will cover the methods to integrate Suprsend SDK in your Angular applications. Adding this SDK to your app will introduce a bell icon where all the inbox notifications can be viewed. A typical inbox, toast message will look like this.

Stage 1. Bell icon count and toast message as soon as the notification is delivered

Stage 2. Inbox view after clicking on the bell icon

You can also customize your inbox based on some simple customization options available in our SDK

Installation

NOTE: Currently suprsend angular sdk suports angular version >=12.0.0

Angular Inbox depends on js-inbox which provides core logic like fetching notifications and modifying notifications. popperjs/core package provides a tooltip for showing inbox notifications.

npm install @suprsend/ngx-inbox @suprsend/js-inbox @popperjs/core

yarn add @suprsend/ngx-inbox @suprsend/js-inbox @popperjs/core

Integrating Inbox

Import SuprSendInboxModule in app.module.ts and add inside NgModule.

import { SuprSendInboxModule } from '@suprsend/ngx-inbox';

@NgModule({
  // ...
  imports: [
    // ...
    SuprSendInboxModule.forRoot({
      workspaceKey: "your workspaceKey",
      workspaceSecret: "your workspaceSecret",
    }),
  ],
  // ...
})
export class AppModule {}

Add a Component in the template where you want to show the inbox on UI.

<suprsend-inbox></suprsend-inbox>

Add SuprSend inbox styles in the global styles file.

@import url("@suprsend/ngx-inbox/assets/styles.css");

Identify the user by passing distinct_id and subscriber_id. Refer HMAC authentication section to understand how to generate subscriber_id

import { SuprSendInboxService } from '@suprsend/ngx-inbox';

export class MyComponent implements OnInit {

 constructor(private ssinbox: SuprSendInboxService) {}

 async ngOnInit() {
   this.ssinbox.identifyUser('distinct_id', 'subscriber_id');
  }
}

Field	Description	Format
`workspaceKey`	WORKSPACE KEY available on Suprsend dashboard left navigation panel	string
`workspaceSecret`	WORKSPACE SECRET available on Suprsend dashboard left navigation panel	string
`subscriberId`	Unique string used to prevent Man-in-the-browser attacks with predictable `distinct_id`. You can generate `subscriber_id` in your server-side code by following HMAC authentication steps	string
`distinctId`	unique identifier for your subscriber or user	int, bigint, string, UUID

Integrating Toast

SuprSend Inbox also supports showing toast notifications if a user is active in your application and receives any inbox notification. We internally use ngx-toastr. If you want toast notifications as well you have to integrate ngx-toastr in your application and pass toaster directive selector, with toastr service as a param value. Skip this step if you don't want to show toast on receiving new notifications.

<suprsend-inbox [toaster]="your toastr-service instance"></suprsend-inbox>

Also, add toastr styles in your global styles file like given in ngx-toastr documentation above suprsend styles importing as we are overriding default toastr styles internally in SDK

@import url("ngx-toastr/toastr");  /* or others provided in ngx-toastr docs */
@import url("@suprsend/ngx-inbox/assets/styles.css");

Example Implementation

You can refer example application to integrate the inbox and toast functionality: https://github.com/suprsend/angular-example