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.

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 type and action:

1
2
3
4
5
GetSocialUi
    .createNotificationCenterView()
    .setFilterByTypes(Notification.NotificationType.SDK) // Optional
    .setFilterByActions(ActionTypes.OPEN_URL) // Optional
    .show();
1
2
3
4
5
GetSocialUi
    .createNotificationCenterView()
    .setFilterByTypes(Notification.NotificationType.SDK) // Optional
    .setFilterByActions(ActionTypes.OPEN_URL) // Optional
    .show()
1
2
3
4
GetSocialUINotificationCenterView *ncView = [GetSocialUI createNotificationCenterView];
[ncView setFilterTypes:@[GetSocialNotificationTypeSDK]]; // Optional
[ncView setFilterActions:@[GetSocialActionOpenUrl]]; // Optional
[ncView show];
1
2
3
4
let ncView = GetSocialUI.createNotificationCenterView()
ncView.filterTypes = [GetSocialNotificationType.SDK.rawValue] // Optional
ncView.filterActions = [GetSocialActionType.openProfile.rawValue] // Optional
ncView.show()
1
2
3
4
GetSocialUi.CreateNotificationCenterView()
    .SetFilterByTypes(new []{ Notification.NotificationTypes.Sdk }) // Optional
    .SetFilterByActions(new []{ GetSocialActionType.OpenUrl }) // Optional
    .Show();
1
2
3
4
GetSocialUI.createNotificationCenterView()
    .setFilterByTypes([Notification.Types.SDK]) // Optional
    .setFilterByActions([Action.Types.OPEN_URL]) // Optional
    .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:

1
2
3
4
5
6
7
8
9
GetSocialUi.createNotificationCenterView()
    .setNotificationClickListener(new NotificationCenterViewBuilder.NotificationClickListener() {
        @Override
        public boolean onNotificationClicked(Notification notification) {
            // return true if you handled the action, otherwise return false
            return false;
        }
    })
    .show();
1
2
3
4
5
6
GetSocialUi.createNotificationCenterView()
    .setNotificationClickListener { notification ->
        // return true if you handled the action, otherwise return false
        false
    }
    .show()
1
2
3
4
5
6
GetSocialUINotificationCenterView *ncView = [GetSocialUI createNotificationCenterView];
[ncView setClickHandler:^BOOL(GetSocialNotification *notification) {
    // return true if you handled the action, otherwise return false
    return NO;
}];
[ncView show];
1
2
3
4
5
6
let ncView = GetSocialUI.createNotificationCenterView()
ncView.clickHandler = { (notification: GetSocialNotification?) -> Bool in
    // return true if you handled the action, otherwise return false
    return false
}
ncView.show()
1
2
3
4
5
6
7
GetSocialUi.CreateNotificationCenterView()
    .SetNotificationClickListener((notification) =>
    {
        // return true if you handled the action, otherwise return false
        return false;
    })
    .Show();
1
2
3
4
5
GetSocialUI.createNotificationCenterView()
    .setNotificationClickListener((notification) => {
        // handle the action here
    })
    .show();

Handle Action Buttons clicks:

1
2
3
4
5
6
7
8
9
GetSocialUi.createNotificationCenterView()
    .setActionButtonClickListener(new NotificationCenterViewBuilder.ActionButtonClickListener() {
        @Override
        public boolean onActionButtonClicked(Notification notification, ActionButton actionButton) {
            // return true if you handled the action, otherwise return false
            return false;
        }
    })
    .show();
1
2
3
4
5
6
GetSocialUi.createNotificationCenterView()
    .setActionButtonClickListener { notification, actionButton ->
        // return true if you handled the action, otherwise return false
        false
    }
    .show()
1
2
3
4
5
6
GetSocialUINotificationCenterView *ncView = [GetSocialUI createNotificationCenterView];
[ncView setActionButtonHandler:^BOOL(GetSocialNotification *notification, GetSocialActionButton *actionButton) {
    // return true if you handled the action, otherwise return false
    return NO;
}];
[ncView show];
1
2
3
4
5
6
let ncView = GetSocialUI.createNotificationCenterView()
ncView.actionButtonHandler = { (notification: GetSocialNotification?, actionButton: GetSocialActionButton?) -> Bool in
    // return true if you handled the action, otherwise return false
    return false
}
ncView.show()
1
2
3
4
5
6
7
GetSocialUi.CreateNotificationCenterView()
    .SetActionButtonClickListener((notification, actionButton) =>
    {
        // return true if you handled the action, otherwise return false
        return false;
    })
    .Show();
1
2
3
4
5
GetSocialUI.createNotificationCenterView()
    .setActionButtonClickListener((actionButton, notification) => {
        // handle the action button 
    })
    .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?

😀 🙁