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¶
- Finished Getting Started guide for Android, iOS, Unity or React Native.
- GetSocial UI libraries added to your project.
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:
```java tab=”Android(Java)”
GetSocialUi
.createNotificationCenterView()
.setFilterByTypes(Notification.NotificationType.SDK) // Optional
.setFilterByActions(ActionTypes.OPEN_URL) // Optional
.show();
```kotlin tab="Android(Kotlin)"
GetSocialUi
.createNotificationCenterView()
.setFilterByTypes(Notification.NotificationType.SDK) // Optional
.setFilterByActions(ActionTypes.OPEN_URL) // Optional
.show()
```objc tab=”iOS(Objective-C)”
GetSocialUINotificationCenterView *ncView = [GetSocialUI createNotificationCenterView];
[ncView setFilterTypes:@[GetSocialNotificationTypeSDK]]; // Optional
[ncView setFilterActions:@[GetSocialActionOpenUrl]]; // Optional
[ncView show];
```swift tab="iOS(Swift)"
let ncView = GetSocialUI.createNotificationCenterView()
ncView.filterTypes = [GetSocialNotificationType.SDK.rawValue] // Optional
ncView.filterActions = [GetSocialActionType.openProfile.rawValue] // Optional
ncView.show()
```c# tab=”Unity”
GetSocialUi.CreateNotificationCenterView()
.SetFilterByTypes(new []{ Notification.NotificationTypes.Sdk }) // Optional
.SetFilterByActions(new []{ GetSocialActionType.OpenUrl }) // Optional
.Show();
```javascript tab="React Native"
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.
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:
```java tab=”Android(Java)”
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();
```kotlin tab="Android(Kotlin)"
GetSocialUi.createNotificationCenterView()
.setNotificationClickListener { notification ->
// return true if you handled the action, otherwise return false
false
}
.show()
```objc tab=”iOS(Objective-C)”
GetSocialUINotificationCenterView *ncView = [GetSocialUI createNotificationCenterView];
[ncView setClickHandler:^BOOL(GetSocialNotification *notification) {
// return true if you handled the action, otherwise return false
return NO;
}];
[ncView show];
```swift tab="iOS(Swift)"
let ncView = GetSocialUI.createNotificationCenterView()
ncView.clickHandler = { (notification: GetSocialNotification?) -> Bool in
// return true if you handled the action, otherwise return false
return false
}
ncView.show()
```c# tab=”Unity”
GetSocialUi.CreateNotificationCenterView()
.SetNotificationClickListener((notification) =>
{
// return true if you handled the action, otherwise return false
return false;
})
.Show();
```javascript tab="React Native"
GetSocialUI.createNotificationCenterView()
.setNotificationClickListener((notification) => {
// handle the action here
})
.show();
Handle Action Buttons clicks:
```java tab=”Android(Java)”
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();
```kotlin tab="Android(Kotlin)"
GetSocialUi.createNotificationCenterView()
.setActionButtonClickListener { notification, actionButton ->
// return true if you handled the action, otherwise return false
false
}
.show()
```objc tab=”iOS(Objective-C)”
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];
```swift tab="iOS(Swift)"
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()
```c# tab=”Unity”
GetSocialUi.CreateNotificationCenterView()
.SetActionButtonClickListener((notification, actionButton) =>
{
// return true if you handled the action, otherwise return false
return false;
})
.Show();
```javascript tab="React Native"
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.
Next Steps¶
- Check what you can build with GetSocial Notifications API.
- Setup push notifications on Android, iOS, Unity or React Native.
- Learn how to send targeted notifications from the Dashboard or user-to-user notifications from Android, iOS, Unity and React Native.