Skip to content

GetSocial Notification Center UI

GetSocial Notification Center UI

Let your users receive and interact with GetSocial Notifications in minutes, not days with prebuilt Notification Center UI.

GetSocial Notification Center UI features:

  • Notification filtering by notification and action types: show only notifications sent from GetSocial Dashboard or only social notifications.
  • Notification statuses: mark notifications as read/unread or delete them.
  • Default click behaviors for notifications with predefined GetSocial Actions and all Activity Feed related notifications: clicking on the Activity Feed related notification takes a user directly to the post.
  • Custom click behaviors: handle notification and Action Button clicks for custom actions or override default behaviors.
  • Action Buttons support: display and handle as many action buttons as you need (first two buttons on the UI, the rest in the context menu).
  • Full theming support.

Media Attachments Support

At the moment Notification Center UI do not support rendering of the media attachments (Android, iOS, Unity, React Native). Drop us a line at support@getsocial.im if you are interested in this feature.

Not supported in Flutter and Web

Flutter SDK and Web SDK don’t provide a UI library. If you’re using one of these SDKs, you’ll need to implement your own Notification Center.

Prerequisite

Open UI and Filter Notifications

GetSocial Notification Center UI allows filtering notifications by:

  • Notification Type, e.g., to display only Activity Feed related notifications.
  • Attached Action Types, e.g. to show only connection requests. Filtering by Action Types is more flexible, as you can define your own Action Type (e.g., promotion) and show only promotion related notifications. Check reference for Android, iOS, Unity or React Native.

To display Notifications Center UI with notifications filtered by query:

var query = NotificationsQuery.withAllStatuses()
NotificationCenterViewBuilder.create(query).show()

var query = NotificationsQuery.withAllStatuses()
GetSocialUINotificationCenterView.init(for: query).show()

var query = NotificationsQuery.WithAllStatuses();
NotificationCenterViewBuilder.Create(query).Show();

const query = NotificationsQuery.withAllStatus();
const ncView = NotificationCenterView.create(query);
ncView.show();

Handle Notification and Button Clicks

The chart below explains the default behaviours for Notification Center UI and how you can customize it with listeners.

Notification Click Behaviour Flow Diagram

Default Behaviours

Below you can find the list of expected on click behaviours for each NotificationType (see reference for Android, iOS, Unity):

Social Notifications

Social notifications are generated during the user interaction with our Smart Invites or Activity Feed:

  • COMMENT, LIKE_ACTIVITY, LIKE_COMMENT, COMMENTED_IN_SAME_THREAD, MENTION_IN_COMMENT, MENTION_IN_ACTIVITY, REPLY_TO_COMMENT: click will mark notification as read and open Activity Feed UI at related post.
  • NEW_FRIENDSHIP, INVITE_ACCEPTED: click will mark notification as read without any further action.

User-to-user and Targeted Notifications

Notifications with the TARGETING and SDK types are sent from GetSocial Dashboard or directly from the client SDKs (see Android, iOS, Unity, React Native).

On user click Notification Center UI will mark notification as read. Additionally, for notifications with predefined GetSocial Actions Types we’ll execute execute action described in the guide.

For all custom Action Types, you have to customize click behavior.

Customizing Behaviours

You can set listeners for clicks on notifications and action buttons on the UI and customize behavior for your needs.

Handle notification item clicks:

var query = NotificationsQuery.withAllStatuses()
val ncView = NotificationCenterViewBuilder.create(query)
ncView.setNotificationClickListener { notification, context ->
    // handle click. if you want GetSocial to handle the action, call `GetSocial.handle()` method.
}
ncView.show()

let query = NotificationsQuery.withAllStatuses()
let ncView = GetSocialUINotificationCenterView.init(for: query)
ncView.clickHandler = { notification, context in
    // handle click. if you want GetSocial to handle the action, call `GetSocial.handle()` method.
}
ncView.show()

var query = NotificationsQuery.WithAllStatuses();
var ncView = NotificationCenterViewBuilder.Create(query);
notificationCenterView.SetNotificationClickListener((notification, context) =>
{
    // handle click. if you want GetSocial to handle the action, call `GetSocial.handle()` method.
});
ncView.Show();

const query = NotificationsQuery.withAllStatus();
const ncView = NotificationCenterView.create(query);
ncView.onNotificationClickListener = ((notification, context) => {
    // handle click. if you want GetSocial to handle the action, call `GetSocial.handle()` method.
});
ncView.show();

Handle Action Buttons clicks:

var query = NotificationsQuery.withAllStatuses()
val ncView = NotificationCenterViewBuilder.create(query)
ncView.setNotificationClickListener { notification, context ->
    // `context.action` contains the clicked button id.
    // handle click. if you want GetSocial to handle the action, call `GetSocial.handle()` method.
}
ncView.show()

let query = NotificationsQuery.withAllStatuses()
let ncView = GetSocialUINotificationCenterView.init(for: query)
ncView.clickHandler = { notification, context in
    // `context.action` contains the clicked button id.
    // handle click. if you want GetSocial to handle the action, call `GetSocial.handle()` method.
}
ncView.show()

var query = NotificationsQuery.WithAllStatuses();
var ncView = NotificationCenterViewBuilder.Create(query);
notificationCenterView.SetNotificationClickListener((notification, context) =>
{
    // `context.action` contains the clicked button id.
    // handle click. if you want GetSocial to handle the action, call `GetSocial.handle()` method.
});
ncView.Show();

const query = NotificationsQuery.withAllStatus();
const ncView = NotificationCenterView.create(query);
ncView.onNotificationClickListener = ((notification, context) => {
    // `context.action` contains the clicked button id.
    // handle click. if you want GetSocial to handle the action, call `GetSocial.handle()` method.
});
ncView.show();

Customizing UI

GetSocial UI library provides three themes to choose from and API customize look and feel to match your app style.

UI elements customization reference is below. To learn how to configure UI visit customization guide for Android, iOS, Unity or React Native.

UI Customization Reference

Next Steps

Give us your feedback! Was this article helpful?

😀 🙁