Angular

Angular SDK to integrate Inbox, toast notification functionality for Angular websites

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

  1. 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 {}

  1. Add a Component in the template where you want to show the inbox on UI.
<suprsend-inbox></suprsend-inbox>
  1. Add SuprSend inbox styles in the global styles file.
@import url("@suprsend/ngx-inbox/assets/styles.css");
  1. 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');
  }
}

FieldDescriptionFormat
workspaceKeyWORKSPACE KEY available on Suprsend dashboard left navigation panelstring
workspaceSecretWORKSPACE SECRET available on Suprsend dashboard left navigation panelstring
subscriberIdUnique 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
distinctIdunique identifier for your subscriber or userint, 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


Whatโ€™s Next

You'll be able to integrate our standard inbox view by following this documentation, check out our next section for customizing the inbox