Sample Notification Inbox Module- iOS

The Notification Inbox sample module is an easy-to-use plug-and-play solution created by WebEngage to help the client integrate a Notification Inbox within their application without having to build it from scratch. This module provides lots of flexibility and customization to help clients in giving the Inbox a look and feel similar to their app.

After Integrating this module clients will be able to send copy of their push notification campaigns within their App Inbox.

🚧

Please Note

Integrating this module isn't a pre-requisite for enabling Copy to Inbox feature. Clients with their self created Notification Inbox will be able to send copy of their push notifications as well.

Integration of WebEngage iOS Notification Inbox Module

Follow the steps below to integrate the WebEngage iOS Notification Inbox Module into your project:

Step 1: Clone the Code

Go to the WebEngage iOS Notification Inbox Module GitHub repository and clone the code to your local machine.

Step 2: Copy the Module

Copy or import the WENotificationInboxModule module from the cloned code into your project.

Adding WebEngage's Notification-inbox-module

Add the below lines of code to initialize the Notification Inbox from wherever you want, i.e. On click of a button.

import WENotificationInbox
...
..
let storyBoard: UIStoryboard = UIStoryboard(name: "WENotificationInbox", bundle: nil)
let inboxViewController = storyBoard.instantiateViewController(withIdentifier: "WENotificationInbox") as! WENotificationInboxViewController
self.navigationController?.pushViewController(inboxViewController, animated: true)
#import "<Project_Name>-Swift.h"
...
..
UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"WENotificationInbox" bundle:nil];
WENotificationInboxViewController *inboxViewController = [storyboard instantiateViewControllerWithIdentifier:@"WENotificationInbox"];
[self.navigationController pushViewController:inboxViewController animated:YES];

And that's it you will be able to see all the notifications.

👍

Congratulations

You have now successfully integrated our Notification Sample Module.

Get Notification Count

To retrieve the updated notification count of unread messages, add the following code snippet to your viewWillAppear method of your view controller.

 WENotificationInbox.shared.getUserNotificationCount { [weak self] data, error   in
            if data != nil{
                // Attach result string to your Notification Bell Label
                }
            }else if let weInboxError = error{
            // Handle the error 
            }
        }
[WENotificationInbox.shared getUserNotificationCountWithCompletion:^(id _Nullable data, WEInboxError * _Nullable error) {
        __weak typeof(self) weakSelf = self;
        if (data != nil) {
            // Attach result string to your Notification Bell Label
        } else if (error != nil) {
            // Handle the error
        }
    }];

Adding Customization to Default Cards

You can customize the card by creating a class and conforming that class to our Protocols based on your requirements.

Protocol NameDescription
WEViewControllerConfigurationProtocolFor customization related to viewController, navigationBar, and tableView.
WEPushTextConfigurationProtocolFor customization related to the TEXT cards.
WEPushBannerConfigurationProtocolFor customization related to the BANNER cards.

Each Protocol has a set of properties, for which you can provide custom values.

class CustomConfiguration: <WEPushTextConfigurationProtocol>{
    var titleFontColor: UIColor = .systemPink
    var titleFont: String = "AmericanTypewriter"
    var titleFontSize: CGFloat = 16
    var descriptionFontSize: CGFloat = 18
    var timeFontColor: UIColor = .red
    var timeFont: String = "AmericanTypewriter"
    var timeFormat: String = "EEEE, MMM d, yyyy"
    var timeFontSize: CGFloat = 14
}
  @IBAction func notificationButtonClick(_ sender: Any) {
    // Add the below code as per your application
    let storyBoard: UIStoryboard = UIStoryboard(name: "WENotificationInbox", bundle: nil)
    let inboxViewController = storyBoard.instantiateViewController(withIdentifier: "WENotificationInbox") as! WENotificationInboxViewController
    
    // Call the setupCustomConfiguration and pass the CustomConfiguration object and for what you need the customization.
    // customizationFor should be one of ("text", "banner", "viewController")
    inboxViewController.setupCustomConfiguration(customConfiguration: CustomConfiguration(), customizationFor: "text")

    self.navigationController?.pushViewController(inboxViewController, animated: true)
}
// The custom Class should conform to any oof the WE Protocols.
@interface CustomClass : NSObject <WEPushCardConfigutationProtocol>
@end

//Implementation of the CustomClass 
@implementation CustomClass

//The properties you want to modify.
@synthesize cardBackgroundColor = cardBackgroundColor;
@synthesize cornerRadius = cornerRadius;

@end
.
.
.
.
- (IBAction)notificationInboxButton:(id)sender {
// This code will initilize the Notification Inbox Module
UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"WENotificationInbox" bundle:nil];
WENotificationInboxViewController *inboxViewController = [storyboard instantiateViewControllerWithIdentifier:@"WENotificationInbox"];

 ===== You can add the customization code here =====
CustomClass *myObject = [[CustomClass alloc] init];
customConfig myConfig = customConfigText;
 [inboxViewController setupCustomConfigurationWithCustomConfiguration:myObject customizationFor:myConfig];

[self.navigationController pushViewController:inboxViewController animated:YES];
}

📘

Multiple Customizations

You can add multiple customizations by calling the setupCustomConfiguration method multiple times.

Default Notification Layouts

Following are details for each layout:

Text Layout

Reference No.WEPushTextConfigurationProtocolDescription
1titleFont: Stringto change the Title font
titleFontSize: CGFloatto change the Title font size
titleFontColor: UIColorto change the Title font color
2descriptionFont: Stringto change the Description font
descriptionFontSize: CGFloatto change the Description font size
descriptionFontColor: UIColorto change the Description font color
3timeFont: Stringto change the Time font
timeFontSize: CGFloatto change the Time font size
timeFontColor: UIColorto change the Time font color
timeFormat: Stringto change the Time format (pass any time format support by Swift)
4readButtonImage: UIImageto change the Read Button Image
readButtonImageTintColor: UIColorto change the Read Button tint color
unReadButtonImage: UIImageto change Unread Button Image
unReadButtonImageTintColor: UIColorto change the Unread Button tint color
readUnreadButtonVisibility: Boolto hide/unhide the read/unread button
5deleteButtonImage: UIImageto change the Delete Button Image
deleteButtonImageTintColor: UIColorto change the Delete Button tint color
deleteButtonVisibility: Boolto hide/unhide the delete button

Banner Layout

Reference No.WEPushTextConfigurationProtocolDescription
1imageViewCornerRadius: CGFloatto update the corner radius of image(by default it will take up the cards radius)
imageViewContentMode: UIView.ContentModeto change the image’s content mode.
2titleFont: Stringto change the Title font
titleFontSize: CGFloatto change the Title font size
titleFontColor: UIColorto change the Title font color
3descriptionFont: Stringto change the Description font
descriptionFontSize: CGFloatto change the Description font size
descriptionFontColor: UIColorto change the Description font color
4timeFont: Stringto change the Time font
timeFontSize: CGFloatto change the Time font size
timeFontColor: UIColorto change the Time font color
timeFormat: Stringto change the Time format (pass any time format support by Swift)
5readButtonImage: UIImageto change the Read Button Image
readButtonImageTintColor: UIColorto change the Read Button tint color
unReadButtonImage: UIImageto change Unread Button Image
unReadButtonImageTintColor: UIColorto change the Unread Button tint color
readUnreadButtonVisibility: Boolto hide/unhide the read/unread button
6deleteButtonImage: UIImageto change the Delete Button Image
deleteButtonImageTintColor: UIColorto change the Delete Button tint color
deleteButtonVisibility: Boolto hide/unhide the delete button

View Controller Layout

WEViewControllerConfigurationProtocolDescription
backgroundColor: UIColorto change the background color of viewController
navigationBarColor: UIColorto change the navigation bar color
navigationBarTintColor: UIColorto change the tint color of the navigation bar
navigationTitle: Stringto change the title of the navigation bar
navigationTitleColor: UIColorto change the title color of the navigation bar
noNotificationsView: UIViewyou can show a custom view when there is no notification
optionMenuImage: UIImageto change the option menu(barButtonItem) Image
optionMenuTitles: [String]you can add custom titles to menu items (only the title can be updated, the functionality will remain the same.)

Common Properties

Property NameDescription
cardBackgroundColor: UIColorto change the card background color
cornerRadius: CGFloatto change the card corner radius
shadowColor : UIColorto change the card shadow color
shadow0ffSetWidth : Intto change the shadow width
shadow0ffSetHeight : Intto change the shadow height
shadowOpacity : Floatto change the shadow opacity

👍

Keep in Mind

  • Common properties will be available in WEPushTextConfigurationProtocol and WEPushBannerConfigurationProtocol.
  • Properties in WEPushTextConfigurationProtocol will be available WEPushBannerConfigurationProtocol.

🚧

Please Note

WebEngage supports four types of push notification layouts: banner, text, carousel, and rating. However, the current version of the notification-inbox-module only supports text and banner layouts. If your application receives notifications with carousel or rating layouts, they will be displayed as text layouts by default, which can be overridden by your own custom layouts.

Adding Custom Cards

📘

Remember

Before customizing the default layouts in the WebEngage Notification Inbox Module, it's important to be aware of the default layout properties that can be modified. Below are the default layout’s properties

In cases where you want to use your custom cards, you can create a Custom Cell.

  1. The custom cell must confirm to UITableViewCell and WECustomCellProtocol.
  2. Use the setupCell() from the WECustomCellProtocol to add the data to your cell.
  3. You need to register the cell with our WENotificationInboxViewController object.
  4. Add an identifier to the Nib from one of these (“TEXT", "BANNER", "RATING", "CAROUSEL").
  5. Call the setupCustomCell(customCell: CustomCell(), forCellType: .text) and pass your CustomCell() object.
  let storyBoard: UIStoryboard = UIStoryboard(name: "WENotificationInbox", bundle: nil)
  let inboxViewController = storyBoard.instantiateViewController(withIdentifier: "WENotificationInbox") as! WENotificationInboxViewController
  
  //Loads the view controller’s view if it’s not loaded yet so that we can register the cell
  inboxViewController.loadViewIfNeeded()
  
  //Add in custom cells
  let nib = UINib(nibName: "TEXT", bundle: nil)
  inboxViewController.tableView?.register(nib, forCellReuseIdentifier: CellType.text.stringValue)
  inboxViewController.setupCustomCell(customCell: CustomCell(), forCellType: .text)
  
  self.navigationController?.pushViewController(inboxViewController, animated: true)

  UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"WENotificationInbox" bundle:nil];
  WENotificationInboxViewController *inboxViewController = [storyboard instantiateViewControllerWithIdentifier:@"WENotificationInbox"];
  
  //Getting the String value from Enum    
  CellType myEnumValue = CellTypeText;
  NSString *reusableIdentifier = [CellTypeHelper stringValueForEnumValue:myEnumValue];    
  
  //Loads the view controller’s view if it’s not loaded yet so that we can register the cell   
  [inboxViewController loadViewIfNeeded];
      
  UINib *nib = [UINib nibWithNibName:@"TEXT" bundle:nil];
  [inboxViewController.tableView registerNib:nib forCellReuseIdentifier: reusableIdentifier];
  [inboxViewController setupCustomCellWithCustomCell:[[<CustomCellClass> alloc] init] forCellType:CellTypeText];
    

📘

The value of forCellReuseIdentifier must be one of these depending upon the cellType

CellType.text.stringValue                                  
CellType.banner.stringValue
CellType.rating.stringValue 
CellType.carousel.stringValue
CellType.text.stringValue                                  
CellType.banner.stringValue
CellType.rating.stringValue 
CellType.carousel.stringValue