Add In-App Inbox Notification Center in Your Angular App Using ngx-suprsend-inbox SDK

nikl

Nik L.

Posted on November 29, 2023

Add In-App Inbox Notification Center in Your Angular App Using ngx-suprsend-inbox SDK

Empower your Angular applications with SuprSend's In-App Inbox using the ngx-suprsend-inbox SDK. This guide walks you through the process of implementing a robust in-app notification service for your Angular application.

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


Enter fullscreen mode Exit fullscreen mode

Image description

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




Enter fullscreen mode Exit fullscreen mode
  • 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');
  }
}




Enter fullscreen mode Exit fullscreen mode
  1. Integrating Toast:
    • Step 4: Seamlessly Integrate Toast Notifications


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



Enter fullscreen mode Exit fullscreen mode
  1. Customization Options:
    • Customizing the Bell Icon:


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



Enter fullscreen mode Exit fullscreen mode
  • 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>



Enter fullscreen mode Exit fullscreen mode
  • Customizing Header:



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




Enter fullscreen mode Exit fullscreen mode
  • 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;
}




Enter fullscreen mode Exit fullscreen mode
  • 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;
}

Enter fullscreen mode Exit fullscreen mode




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

💖 💪 🙅 🚩
nikl
Nik L.

Posted on November 29, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related