Implement In-App Inbox Notification Center In Your Angular App With 7 Lines of Code

Modern business user demands seamless, personalized experiences, and the Angular In-App Inbox notification center emerges as a solution to meet these expectations. This guide aims to provide developers, from novices to seasoned experts, with a simple walkthrough of integrating and optimizing SuprSend's In-App Inbox within Angular applications.

Installation - Using ngx-suprsend-inbox

Step 1: Install SuprSend SDK and Dependencies

Begin by installing SuprSend's Angular SDK, js-inbox, and the Popper.js/core package. Ensure compatibility with Angular versions >=12.0.0 to leverage the latest features.

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

Integrating Inbox:

Step 2: Import SuprSendInboxModule in Your Angular App Module

Incorporate the SuprSend Inbox module into your Angular app module to unlock powerful in-app inbox features. Don't forget to provide your workspaceKey and workspaceSecret.

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

Utilize the SuprSendInboxService to identify users by passing distinct_id and subscriber_id, ensuring personalized and targeted in-app 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');
  }
}

Integrating Toast:

Step 4: Seamlessly Integrate Toast Notifications

Integrate toast notifications effortlessly by adding the following code snippet where you want to display the in-app inbox on your Angular UI.

<!-- Integrate toast notifications -->

<suprsend-inbox></suprsend-inbox>

Customization Options:

Unlock extensive customization options for a tailored in-app inbox experience. Let's explore key customization features:

Customizing the Bell Icon:

Enhance the bell icon by creating a custom design, bringing a personalized touch to your in-app notification experience.

<suprsend-inbox>

 <!-- Your custom bell design -->

 <p ssBell>Hello</p>

 <!-- Your custom bell design -->

</suprsend-inbox>

Customize the bell's color, height, and width using CSS for a visually appealing touch.

Customizing the Badge (Counter):

Tailor the badge content with a personalized touch, providing users with an informative and visually appealing alert.

<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:

Customize the heading of the Notifications Inbox:

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

Customize text color, margin, alignment, font size, and font family.

Customizing Notification Card:

Customize the notification container, header text, body text, and unread dot:

.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;
}

Customize background color, border, cursor, padding, text color, and more.

Customizing Buttons:

Customize primary and secondary action 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;
}

Customize button width, background color, border radius, text decoration, border color, border style, and border width.

What is Angular In-App Inbox?

Angular In-App Inbox notification center is a dynamic and user-centric notification center embedded within a mobile or web application, designed to manage and display messages, alerts, and updates. Unlike traditional notification systems that rely solely on push notifications or emails, an In-App Inbox operates directly within the application interface. It serves as a centralized hub where users can access, review, and interact with messages at their convenience.

Key Characteristics:

• Real-Time Updates: In-App Inbox notification feed provides users with instant access to updates, ensuring timely delivery of critical information without the need for external channels.

• User-Centric Interaction: Users can engage with notifications within the application, allowing for seamless interaction without disrupting the overall user experience.

• Personalization: In-App Inbox notification center enables tailored communication, allowing businesses to deliver personalized messages, promotions, or relevant content based on user behavior and preferences.

• Message Persistence: Unlike traditional notifications that may disappear after being dismissed, messages within Mobile Inbox persist until the user acknowledges or dismisses them. This ensures that important information is always accessible.

• Multi-Channel Integration: In-App Inbox notification feed can aggregate messages from various channels, providing a unified platform for managing notifications, whether they originate from in-app activities, marketing campaigns, or other sources.

• Enhanced User Engagement: By facilitating direct communication and interaction within the application, In-App Inboxes contribute to increased user engagement and retention.

• Actionable Content: Messages within an In-App Inbox feed can contain actionable elements, such as buttons or links, allowing users to take specific actions directly from the notification.

• Analytics and Insights: Businesses can gather valuable insights into user behavior and engagement patterns through analytics associated with the In-App Inbox, informing data-driven decisions for future communication strategies. This channel has a deliverability rate of 100% with SuprSend’s out-of-box inbox. 

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.