Free Way to Add Notification Center in Your Mobile/ Web Application

Here is a tutorial for implementing a robust in-app notification service for your Angular application using SuprSend's In-App Inbox using the ngx-suprsend-inbox SDK. They also support React (headless) and Flutter SDK's, which you can find in the github repo.

Check out this video first to understand how will this notification infrastructure platform work?

Want to see inapp inbox in action first? Head here

1. Installation - Using ngx-suprsend-inbox
   • Step 1: Install SuprSend SDK and Dependencies

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

1. Integrating Inbox:
   • Step 2: Import SuprSendInboxModule in Your Angular App Module

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

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

• Step 3: Identify Users for Personalized Notifications

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

export class MyComponent implements OnInit {
  constructor(private ssinbox: SuprSendInboxService) {}

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

1. Integrating Toast:
   • Step 4: Seamlessly Integrate Toast Notifications

<!-- Integrate toast notifications -->
<suprsend-inbox></suprsend-inbox>

1. Customization Options:
   • Customizing the Bell Icon:

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

• Customizing the Badge (Counter):

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

• Customizing Header:

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

• Customizing Notification Card:

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

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

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

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

• Customizing Buttons:

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

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

What is SuprSend's Angular App Inbox?

SuprSend's Angular App Inbox is a dynamic and user-centric feature seamlessly integrated into mobile applications. Specifically designed for Angular, it efficiently manages and presents messages, alerts, and updates within the application interface. This inbox serves as a centralized hub, empowering users to conveniently access, review, and interact with messages tailored to their preferences.

Key Characteristics:

1. Real-Time Updates:

   • Experience instant access to updates directly within the app, eliminating the need for external channels.

2. User-Centric Interaction:

   • Foster a seamless user experience by allowing engagement with notifications directly within the Angular application.

3. Personalization:

   • Leverage tailored communication capabilities to deliver personalized messages based on individual user behavior.

4. Message Persistence:

   • Ensure that important information remains accessible as messages persist until acknowledged or dismissed.

5. Multi-Channel Integration:

   • Aggregate messages from various channels, creating a unified platform within the Angular app for managing notifications.

6. Enhanced User Engagement:

   • Boost user engagement and retention by facilitating direct communication through the Angular App Inbox.

7. Actionable Content:

   • Enable users to take specific actions directly from notifications by incorporating actionable elements.

8. Analytics and Insights:

   • Gather valuable insights into user behavior and engagement patterns through robust analytics associated with SuprSend's Angular App Inbox. This feature enhances data-driven decision-making for future communication strategies.

Conclusion:

This step-by-step guide equips developers to seamlessly integrate SuprSend's Inbox and toast notification functionality into Angular applications. By combining theoretical understanding with practical implementation, developers can enhance user engagement effortlessly, leveraging SuprSend's powerful features.

Link to Github repo: Here
Link to documentation: Here