Skip to content

Use case: in-app notification center

Overview

The base use cases for GetSocial Notifications API is to build a Facebook like notification center.

Notification Center

Problem

According to the latest Localytics data, only 53% of the users have push notifications enabled. GetSocial Notifications provide a way to deliver notifications to 100% of the users. We send push notifications to users who have enabled them and provide an API to query notifications from the client SDK to build in-app notification center.

Implementation guide

Below you can find the implementation example based on the DevFest Ukraine conference application.

0. Prerequisite

  1. Integrate GetSocial SDK. Check the detailed guide on Android, iOS or Unity.

  2. Setup push notifications. Check the detailed setup guide on Android, iOS or Unity.

1. Show unread notifications count

  1. Add a UI element to show unread notifications count on the main application screen. It is important to keep the counter in a visible place, to grab the user’s attention.

    Notification Count

  2. Query GetSocial API to get the unread notifications count:

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    NotificationsCountQuery notificationsCountQuery = NotificationsCountQuery
            .withStatuses(NotificationStatus.READ, NotificationStatus.UNREAD);
    
    GetSocial.User.getNotificationsCount(
            notificationsCountQuery,
            new Callback<Integer>() {
                @Override
                public void onSuccess(Integer notificationsCount) {
                    // Display notificationsCount
                }
    
                @Override
                public void onFailure(GetSocialException exception) {
                    Log.e("GetSocial", "Failed to get notifications count, error: " + exception.getMessage());
                }
            });
    
    1
    2
    3
    4
    5
    6
    7
    8
    GetSocialNotificationsCountQuery *query = [GetSocialNotificationsCountQuery withStatuses:@[ GetSocialNotificationStatusRead, GetSocialNotificationStatusUnread ]];
    [GetSocialUser notificationsCountWithQuery:query
        success:^(int result) {
            // Display notifications count
        }
        failure:^(NSError *error) {
            NSLog(@"Failed to get notifications count, error: %@", error.description);
        }];
    
    1
    2
    3
    4
    5
    6
    let query = GetSocialNotificationsCountQuery.withStatuses([GetSocialNotificationStatus.read, GetSocialNotificationStatus.unread])!
    GetSocialUser.notificationsCount(with: query, success: { result in
        // Display notifications count
    }, failure: { error in
        print("Failed to get notifications count, error: \(error)")
    })
    
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    var notificationsCountQuery = NotificationsCountQuery
               .WithStatuses(NotificationStatus.Read, NotificationStatus.Unread);
    
    GetSocial.User.GetNotificationsCount(
       notificationsCountQuery,
       notificationsCount =>
       {
           // Display notificationsCount
       },
       error =>
       {
           Debug.LogError("Failed to get notifications count, error: " + error.Message);
       });
    

2. Implement notification center UI

GetSocial SDK provides a prebuild UI for notification center and data API so you can build your own notification center.

Using GetSocial UI

GetSocial Notification Center

GetSocial UI library provides a prebuild notification center UI that supports:

  • 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.

The example below shows how to open notifications center UI filtered to show only notifications sent from GetSocial Dashboard. For details check the Notification Center UI guide.

1
2
3
GetSocialUi.createNotificationCenterView()
    .setFilterByTypes(Notification.NotificationType.TARGETING)
    .show();
1
2
3
GetSocialUINotificationCenterView *ncView = [GetSocialUI createNotificationCenterView];
[ncView setFilterTypes:@[GetSocialNotificationTypeTARGETING]];
[ncView show];
1
2
3
let ncView = GetSocialUI.createNotificationCenterView()
ncView.filterTypes = [GetSocialNotificationType.TARGETING.rawValue]
ncView.show()
1
2
3
GetSocialUi.CreateNotificationCenterView()
    .SetFilterByTypes(new []{ Notification.NotificationTypes.Targeting })
    .Show();

Build your own UI with data API

Notification Center

Use GetSocial data API to create your own Notification Center UI. It may be useful when you want to build notification center different features from the ones provided in the GetSocial UI library or embed it into existing UI.

In our example, UI implements the following features:

  • Show notifications
  • Highlight unread notifications
  • Mark all notifications as READ after showing them
  • Trigger action attached to the notification on click
  • Remove all notifications

The step by step implementation guide:

  1. Show (query) notifications. Each notification can have one of the statuses: UNREAD, READ, CONSUMED or IGNORED.

    In our example, we will show UNREAD and READ notifications on the UI and use CONSUMED to mark notifications removed. IGNORED status won’t be used.

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    NotificationsQuery notificationsQuery = NotificationsQuery
            .withStatuses(NotificationStatus.READ, NotificationStatus.UNREAD);
    
    GetSocial.User.getNotifications(
            notificationsQuery,
            new Callback<List<Notification>>() {
                @Override
                public void onSuccess(List<Notification> notifications) {
                    // Display notifications on the UI
                    showNotifications(notifications);
                }
    
                @Override
                public void onFailure(GetSocialException exception) {
                    Log.e("GetSocial", "Failed to get notifications, error: " + exception.getMessage());
                }
            });
    
    1
    2
    3
    4
    5
    6
    7
    GetSocialNotificationsQuery *query = [GetSocialNotificationsQuery withStatuses:@[ GetSocialNotificationStatusRead, GetSocialNotificationStatusUnread ]];
    [GetSocialUser notificationsWithQuery:query success:^(NSArray<GetSocialNotification *> *notifications) {
        // Display notifications on the UI
        [self showNotifications:notifications];
    } failure:^(NSError *error) {
        NSLog(@"Failed to get notifications, error: %@", error);
    }];
    
    1
    2
    3
    4
    5
    6
    7
    let query = GetSocialNotificationsQuery.withStatuses( [GetSocialNotificationStatus.unread, GetSocialNotificationStatus.read] )!
    GetSocialUser.notifications(with: query, success: { (notifications:[GetSocialNotification]) in
        // Display notifications on the UI
        self.showNotifications(notifications)
    }) { (error : Error) in
        print("Failed to get notifications, error: \(error.localizedDescription)")
    }
    
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    var notificationsQuery = NotificationsQuery
            .WithStatuses(NotificationStatus.Read, NotificationStatus.Unread);
    
    GetSocial.User.GetNotifications(
        notificationsQuery,
        notifications =>
        {
            // Display notifications on the UI
            ShowNotifications(notifications);
        },
        error =>
        {
            Debug.LogError("Failed to get notifications, error: " + error.Message);
        });
    
  2. Highlight unread notifications. To check the notification status use:

    1
    2
    3
    if (NotificationStatus.UNREAD.equals(notification.getStatus())) {
        // Show notification as unread on the UI
    }
    
    1
    2
    3
    if ([notification.status isEqualToString:GetSocialNotificationStatusUnread]) {
        // Show notification as unread on the UI
    }
    
    1
    2
    3
    if notification.status == GetSocialNotificationStatus.unread {
        // Show notification as unread on the UI
    }
    
    1
    2
    3
    4
    if (notification.Status.Equals(NotificationStatus.Unread))
    {
        // Show notification as unread on the UI
    }
    
  3. In our example, we will mark all notifications as READ after showing them for the first time.

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    List<String> notificationsIds = new ArrayList<>();
    for (Notification notification : notifications) {
        notificationsIds.add(notification.getId());
    }
    
    GetSocial.User.setNotificationsStatus(
            notificationsIds,
            NotificationStatus.READ,
            new CompletionCallback() {
                @Override
                public void onSuccess() {
                    Log.i("GetSocial", "Marked all notifications as read");
                }
    
                @Override
                public void onFailure(GetSocialException exception) {
                    Log.e("GetSocial", "Failed to mark notifications as read, error: " + exception.getMessage());
                }
            }
    );
    
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    NSMutableArray *notificationIds = [NSMutableArray new];
    for (GetSocialNotification *notification in notifications)
    {
        [notificationIds addObject:notification.notificationId];
    }
    [GetSocialUser setNotificationsStatus:notificationsIds
        status:GetSocialNotificationStatusRead
        success:^{
            NSLog(@"Marked all notifications as read");
        }
        failure:^(NSError *error) {
            NSLog(@"Failed to mark notifications as read, error: %@", error);
        }];
    
    1
    2
    3
    4
    5
    6
    let notificationIds = notifications.map { $0.notificationId! }
    GetSocialUser.setNotificationsStatus(notificationIds, status: GetSocialNotificationStatus.read, success: {
        print("Marked all notifications as read")
    }, failure: { error in
        print("Failed to mark notifications as read, error: \(error)")
    })
    
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    var notificationsIds = notifications.Select(notification => notification.Id).ToList();
    
    GetSocial.User.SetNotificationsStatus(
        notificationsIds,
        NotificationStatus.Read,
        () =>
        {
            Debug.Log("Marked all notifications as read");
        },
        error =>
        {
            Debug.LogError("Failed to mark notifications as read, error: " + error.Message);
        });
    
  4. Trigger an action on notification click. Each notification may have an action attached to it. GetSocial SDK provides a set of predefined actions, like OPEN_ACTIVITY, as well as custom actions.

    In the example below we’ll handle two actions:

    • Predefined OPEN_ACTIVITY, used to open in-app forums powered by GetSocial Activity Feeds
    • Custom action to open the conference schedule.
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    GetSocial.setNotificationListener(new NotificationListener() {
        @Override
        public boolean onNotificationReceived(Notification notification, boolean wasClicked) {
            if (!wasClicked) {
                // if if wasn't clicked we won't act to notification, though we may show some dialog or in-app notification
                return false;
            }
            switch (notification.getAction().getType())
            {
                case ActionTypes.OPEN_ACTIVITY:
                    Log.i("GetSocial", "Received open activity feed notification");
                    // By returning false, we say GetSocial SDK to handle click on notification as usual
                    return false;
                case "open-schedule":
                    // Get the data we attached to the notification 
                    String sessionId = notification.getAction().getData().get("schedule-session-id");
    
                    // Open schedule for the sessionId from the notification
                    openSchedule(sessionId);
    
                    // By returning true, we tell GetSocial SDK that we've already handled the notification
                    return true;
            }
            return false;
        }
    });
    
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    [GetSocial setNotificationHandler:^BOOL(GetSocialNotification *notification, BOOL wasClicked) {
        if (!wasClicked) {
            // if if wasn't clicked we won't act to notification, though we may show some dialog or in-app notification
            return NO;
        }
        if ([notification.notificationAction.type isEqualToString:GetSocialActionOpenActivity]) {
            NSLog(@"Received open activity feed notification");
            return NO;
        } else if ([notification.notificationAction.type isEqualToString:@"open-schedule"]) {
            // Get the data we attached to the notification 
            NSString *sessionId = notification.notificationAction.data[@"schedule-session-id"];
    
            // Open schedule for the sessionId from the notification
            [self openSchedule:sessionId];
    
            // By returning true, we tell GetSocial SDK that we've already handled the notification
            return true;
        }
        return NO;
    }];
    
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    GetSocial.setNotificationHandler { (notification, wasClicked) -> Bool in
        if !wasClicked {
            // if if wasn't clicked we won't act to notification, though we may show some dialog or in-app notification
            return false
        }
        switch(notification.notificationAction.type.rawValue) {
        case GetSocialActionType.openActivity.rawValue:
            print("Received open activity feed notification")
            // By returning false, we say GetSocial SDK to handle click on notification as usual
            return false
        case "open-schedule":
            let sessionId = notification.notificationAction.data[GetSocialActionDataKey.init("schedule-session-id")]
    
            // Open schedule for the sessionId from the notification
            openSchedule(sessionId)
    
            // By returning true, we tell GetSocial SDK that we've already handled the notification
            return true
        default:
            return false
        }
    }
    
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    GetSocial.SetNotificationListener((notification, clicked) =>
    {
        if (!wasClicked)
        {
            // if if wasn't clicked we won't act to notification, though we may show some dialog or in-app notification
            return false;
        }
        switch (notification.NotificationAction.Type)
        {
            case GetSocialActionType.OpenActivity:
                Debug.Log("Received open activity feed notification");
                // By returning false, we say GetSocial SDK to handle click on notification as usual
                return false;
            case "open-schedule":
                // Get the data we attached to the notification 
                var sessionId = notification.NotificationAction.Data["schedule-session-id"];
    
                // Open schedule for the sessionId from the notification
                OpenSchedule(sessionId);
    
                // By returning true, we tell GetSocial SDK that we've already handled the notification
                return true;
        }
        return false;
    });
    
  5. Remove all notifications. In step 2, you can see that we’re querying only for UNREAD and READ notifications. To implement notification removal, we will set notification status to CONSUMED.

    Setting CONSUMED or IGNORED status is irreversible

    You can change notification status from UNREAD to READ and vice versa as many times as you want. But after notification status is changed to CONSUMED or IGNORED it cannot be changed back.

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    void clearNotifications(List<Notification> notifications)
    {
        List<String> notificationsIds = new ArrayList<>();
        for (Notification notification : notifications) {
            notificationsIds.add(notification.getId());
        }
    
        GetSocial.User.setNotificationsStatus(
                notificationsIds,
                // We use consumed status to mark notifications cleared 
                NotificationStatus.CONSUMED,
                new CompletionCallback() {
                    @Override
                    public void onSuccess() {
                        Log.i("GetSocial", "Cleared all notifications");
                    }
    
                    @Override
                    public void onFailure(GetSocialException exception) {
                        Log.e("GetSocial", "Failed to clear notifications, error: " + exception.getMessage());
                    }
                });
    }
    
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    - (void)cleanNotifications:(NSArray<GetSocialNotification *> *)notifications {
        NSMutableArray *notificationIds = [NSMutableArray new];
        for (GetSocialNotification *notification in notifications)
        {
            [notificationIds addObject:notification.notificationId];
        }
        [GetSocialUser setNotificationsStatus:notificationsIds
            status:GetSocialNotificationStatusConsumed
            success:^{
                NSLog(@"Marked all notifications as read");
            }
            failure:^(NSError *error) {
                NSLog(@"Failed to mark notifications as read, error: %@", error);
            }];
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    func clearNotifications(notifications: [GetSocialNotification]) {
        let notificationIds = notifications.map { $0.notificationId! }
    
        GetSocialUser.setNotificationsStatus(notificationIds, status: GetSocialNotificationStatus.consumed, success: {
            print("Marked all notifications as read")
        }, failure: { error in
            print("Failed to mark notifications as read, error: \(error)")
        })
    }
    
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    void ClearNotifications(List<Notification> notifications)
    {
        var notificationsIds = notifications.Select(notification => notification.Id).ToList();
    
        GetSocial.User.SetNotificationsStatus(
            notificationsIds, 
            // We use consumed status to mark notifications cleared 
            NotificationStatus.Consumed,
            () =>
            {
                Debug.Log("Cleared all notifications");
            },
            error =>
            {
                Debug.LogError("Failed to clear notifications, error: " + error.Message);
            });
    }
    

3. Display notifications as soon as they arrive

By default, GetSocial SDK is not showing notification as soon as they arrive. There two ways to implement it:

  1. Enable push notifications in foreground. After enabling this option push notification will be displayed as soon as they arrive, even if application is in the fullscreen or gaming mode.



    In the GetSocial Gradle Plugin configuration set:


    1
    2
    3
    4
    getsocial {
        // ...
        foregroundNotifications true
    }
    


    In the GetSocial iOS Installer Script set:


    1
    "$PROJECT_DIR/getsocial.sh" --app-id="your-getsocial-app-id" --foreground-notifications="true"
    


    In the GetSocial iOS Installer Script set:


    1
    "$PROJECT_DIR/getsocial.sh" --app-id="your-getsocial-app-id" --foreground-notifications="true"
    


    Go to menu panel → GetSocialEdit SettingsGeneral Settings → enable Show Notifications In Foreground setting.

  2. Alternatively, when the app is in the foreground, you can listen for new notifications and handle them on your own:

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    GetSocial.setNotificationListener(new NotificationListener() {
        @Override
        public boolean onNotificationReceived(Notification notification, boolean wasClicked) {
            if (!wasClicked) {
                // wasClicked=false means that notification arrives when app is in foreground
                // show notification in app here
    
                return true;
            }
            return false;
        }
    });
    
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    [GetSocial setNotificationHandler:^BOOL(GetSocialNotification *notification, BOOL wasClicked) {
        // Handle notifications
        if (!wasClicked) {
            // wasClicked=NO means that notification arrives when app is in foreground
            // show notification in app here
    
            return YES;
        }
        return NO;
    }];
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    GetSocial.setNotificationHandler { (notification, wasClicked) -> Bool in
        if !wasClicked {
            // wasClicked=false means that notification arrives when app is in foreground
            // show notification in app here
    
            return true
        }
        return false
    }
    
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    GetSocial.SetNotificationListener((notification, wasClicked) =>
    {
        if (!wasClicked)
        {
            // wasClicked=false means that notification arrives when app is in foreground
            // show notification in app here
    
            return true;
        }
        return false;
    }
    

4. Customize push notification icon

On Android, you have to customize the big and small notification icons. Check how to do it on Android or Unity/Android.

On iOS, the application icon will be used.

Try it out

Download DevFest Ukraine conference application to check notification center implementation in action.

Try in the app

Next steps

Give us your feedback! Was this article helpful?

😀 🙁