Angular Inbox SDK (ngx-suprsend-inbox)

This package has been deprecated. Please use @suprsend/web-inbox

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/[email protected] @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 {}

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

<suprsend-inbox></suprsend-inbox>

3. Add SuprSend inbox styles in the global styles file.

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

4. 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');
  }
}

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");

The inbox component is highly customizable. For most parts in Inbox, we also support custom components using render props. This is how the default inbox looks like with its components marked in order.

Customizing Bell icon

The Bell icon is an SVG image. You can create a custom bell using the code below. Pass ssBell in your bell element.

<suprsend-inbox>
  
  <!-- your custom design -->
  <p ssBell>Hello</p>

  
</suprsend-inbox>

You can also customize the color, height and width of the existing bell icon image. Here's an example code for customizing the bell icon. You can customize CSS of the specific element by overriding existing styles on the class like below code snippet.

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

.ss-bell {
  color: red;
  height: 24px;
  width: 24px;
}

Customizing Badge (counter)

This element shows the number of unseen notifications for the current user. You use your custom badge component like below

Here's an example code for customizing the badge content

<suprsend-inbox>
  
  <ng-template #ssBadge let-count>
    
    <!-- your custom design -->
    <p style="color: red; margin: 0px">{{ count }}</p>
    <!-- your custom design -->
    
  </ng-template>
  
</suprsend-inbox>

or you can customize CSS of the specific element to change the background color, text color, and text margin of the existing badge.

Here's an example code for customizing the badge theme.

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

.ss-badge {
  font-size: 10px;
  display: inline-block;
  position: absolute;
  right: -3px;
  top: -7px;
  padding: 3px 6px;
  background-color: red;
  color: white;
  text-align: center;
  border-radius: 50%;
}

Customizing Header

This is the heading of the Notifications Inbox. You can customize the background color, text color, and text size among other properties

Here's an example code for customizing the heading

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

.ss-notification-header-text {
  font-size: 16px;
  margin: 10px 0px;
  white-space: pre-line;
}

Customizing Notification Card

The style of notification depends on its state. It can be read or unread. Read state is the default state. The unread state just has an additional unseen dot on the card. You can customize the existing theme of the container, body text, header text, and unread dot. These are all the components of a notification card

Here's an example code for customizing the notification container

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

.ss-notification-container {
  padding: 7px 14px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
}

Background (container)

Header text

Here's an example code for customizing the heading

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

.ss-notification-header-text {
  font-size: 16px;
  margin: 10px 0px;
  white-space: pre-line;
}

Body text

Here's an example code for customizing the body text

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

.ss-notification-body-text {
  margin: 10px 0px;
  white-space: pre-line;
}

Unread dot

Here's an example code for customizing the unread dot

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

.ss-notification-unseendot {
  background: #358adf;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  margin-top: 18px;
}

Buttons

There are two types of buttons on a notification card - Primary (solid background) and Secondary button (outlined button)

Primary Button

Here's an example code for customizing the primary button

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

.ss-action-primary {
  width: 150px;
  background: #358adf;
  border-radius: 5px;
  text-decoration: none;
}

.ss-action-primary-text {
  color: white;
  padding: 5px 0px;
  text-align: center;
  word-break: break-all;
}

Primary button background

Primary button text

Secondary Button

Here's an example code for customizing the secondary button

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

.ss-action-outline {
  width: 150px;
  background: #358adf;
  border-radius: 5px;
  text-decoration: none;
  border-color: #358adf;
  border-style: solid;
  border-width: 1px;
}

.ss-action-outline-text {
  color: #358adf;
  padding: 5px 0px;
  text-align: center;
  word-break: break-all;
}

Secondary button background

Secondary button text

Design custom notification card component

You can either customize the CSS properties of default notification card as mentioned above or create your own notification card. You can override the data that you want to show on the card as well as the look and feel of the card

<suprsend-inbox>
  
  <ng-template #ssNotification let-notification>
    <!-- your custom design -->
    <div>
      <p>{{ notification.message.header }}</p>
      <p>{{ notification.message.text }}</p>
    </div>
    <!-- your custom code -->
  </ng-template>
  
</suprsend-inbox>

Set a custom click handler

On click of the notification card, SDK will internally mark it as seen and redirects to the action URL you provided in the template. You can also override redirection and provide a custom function as notificationClickHandler which will be called after marking seen. In the custom handler, notification payload data will be passed as a parameter.

<suprsend-inbox [notificationClickHandler]="customFunction"></suprsend-inbox>

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

// ...
export class MyComponent {
  constructor(private ssinbox: SuprSendInboxService) {}

  customFunction(notifications: IRemoteNotification) {
    console.log('called notification', notifications);
  }
}

Customizing Toast

A toast appears when a new inbox notification is received when the user is active on the platform. By default, the toast message is shown on the new message arrival showing the header and body text of the notification. You can customize the content shown on the toast and its styling or hide the toast altogether as per your requirement. These is the default toast with its components marked

Styling toast theme

You can style the background color and text of the notification toast

background

Here's an example code for customizing the toast background

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

.toast-success {
  background-color: white;
  background-image: none;
}

.toast-container .ngx-toastr {
  padding-left: 15px;
  max-width: 450px;
  min-width: 300px;
  width: auto;
}

header text

Here's an example code for customizing the toast header text

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

.toast-title {
  font-size: 16px;
  font-weight: 400;
  margin: 0px;
  color: #000;
  margin-top: 0px;
  margin-bottom: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

@media (max-width: 425px) {
  .toast-title {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-top: 0px;
  }
}

body text

Here's an example code for customizing the toast header text

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

.toast-message {
  font-size: 14px;
  font-weight: 400;
  margin: 0px;
  color: #000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  word-wrap: break-word;
  margin-top: 0px;
}

@media (max-width: 425px) {
  .toast-message {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-top: 0px;
  }
}

t

Customizing Empty Inbox screen

The notification inbox shows a text when the user has no notifications. You can change the content and styling of the blank screen.

Changing Empty screen content

The default empty screen looks like this

Here's an example code for customizing the toast header text

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

.ss-no-notifications-text {
  text-align: center;
  font-style: italic;
  margin: 20px 0px;
  background-color: transparent;
  color: #707070;
}

Customizing styles using HTML template file

Below is list of classnames of html elements. you can also refer sdks internal CSS file and HTML template file