Cards 7.x.x

Create targeted or automated App Inbox/NewsFeed messages that can be grouped into various categories, and target your users with different updates or offers that can stay in the Inbox/Feed over a designated period of time. Refer to the help article to learn more about cards.

Integrating Cards

Make sure to use MoEngage-iOS-SDK version 6.1.0 and above to use the Cards module and to integrate Cards include MoEngageCards pod to your Pod file as shown below:

pod 'MoEngageCards','~> 2.0.0'

info	Manual Integration To integrate the `MoEngageCards` SDK manually to your project follow this doc.

warning

Important

MOCards class has been renamed to MoEngageCards from MOCards version 1.1.0. This is due to an issue in Xcode where if a module is built with BUILD_LIBRARIES_FOR_DISTRIBUTION and contains a public type with the same name as the module itself,(MOCards in this case) clients will fail to import the module. (link for reference)

Displaying AppInbox/Feeds

Once the module is integrated, use the below-provided methods to display the MOCardsListViewController with the transition:

// To Push MOCardsListViewController
MoEngageCards.sharedInstance.pushCardsViewController(toNavigationController: self.navigationController!)

// To Present MOCardsListViewController
MoEngageCards.sharedInstance.presentCardsViewController()

// To Push MOCardsListViewController
[MoEngageCards.sharedInstance pushCardsViewControllerToNavigationController:self.navigationController withUIConfiguration:nil];

// To Present MOCardsListViewController
[[MOCards sharedInstance] presentCardsViewControllerWithUIConfiguration:nil];

So as shown above, in the SDK we have provided support for Push and Present transition. In case you want to handle the transition while displaying the Inbox, use the getCardsViewControllerWithUIConfiguration method as shown below to obtain the view controller instance:

let cardsViewController = MoEngageCards.sharedInstance.getCardsViewController()

MOCardsListViewController* cardsViewController = [MoEngageCards.sharedInstance getCardsViewControllerWithUIConfiguration:nil];

Customizing Inbox UI

The earlier snapshots indicate how the default UI of the Inbox would look like. But we have also added support for customizing the App Inbox screen according to your App Theme. For customizing the screen make use of MOCardsUIConfiguration instance and pass the same in the above-mentioned methods. Refer to the example below:

let uiConfig = MOCardsUIConfiguration()
// Do customization using uiConfig
// provide the argument while obtaining the MOCardsListViewController instance

// Present Cards View Controller
MoEngageCards.sharedInstance.presentCardsViewController(withUIConfiguration: uiConfig)

// Push Cards View Controller 
MoEngageCards.sharedInstance.pushCardsViewController(toNavigationController: self.navigationController!, withUIConfiguration: uiConfig)


// Obtaining the ViewController
let cardsViewController = MoEngageCards.sharedInstance.getCardsViewController(withUIConfiguration: uiConfig)

Above is an example of how the UI of Inbox can be completely customized according to your need. Below we have mentioned about what all UI attributes which can be customized using MOCardsUIConfiguration instance:

Customizing Navigation Bar:

Navigation Bar customization includes updating the title, navigation bar color, title color, title font, etc. Create an instance of MOCardsNavigationBarStyle and set all the attributes as shown below, post that assign the same to your MOCardsUIConfiguration instance:

let uiConfig = MOCardsUIConfiguration()
      
// Navigation Bar Customizations
let navBarStyle = MOCardsNavigationBarStyle()
navBarStyle.navigationBarColor = MOCoreUtils.getColorFromHexValue("#0A1D1F")
navBarStyle.navigationBarTitleFont = UIFont.systemFont(ofSize: 20.0, weight: .semibold)
navBarStyle.navigationBarTitleColor = MOCoreUtils.getColorFromHexValue("#FFFFFF")
navBarStyle.navigationBarTintColor = MOCoreUtils.getColorFromHexValue("#FFFFFF")
navBarStyle.navigationBarTransluscent = true

uiConfig.navigationBarTitle = "Hello!!!"
uiConfig.navigationBarStyle = navBarStyle

Customizing Category TabBar:

Directly set the attributes of MOCardsUIConfiguration instance, you would like to change for the Category Tabs Bar view as shown below:

let uiConfig = MOCardsUIConfiguration()

// Category Tabs Customizations
uiConfig.categoryTabsContainerBGColor  = MOCoreUtils.getColorFromHexValue("#6EA6CF")
uiConfig.categoryTabsBGColor = MOCoreUtils.getColorFromHexValue("#6EA6CF")
uiConfig.categoryTabsTextColor  = MOCoreUtils.getColorFromHexValue("#0A1D1F")
uiConfig.categorySelectedTabBGColor  = MOCoreUtils.getColorFromHexValue("#BB4D3E")
uiConfig.categorySelectedTabTextColor  = MOCoreUtils.getColorFromHexValue("#FFFFFF")
uiConfig.categorySelectionIndicatorBarColor = MOCoreUtils.getColorFromHexValue("#B0BF40")

uiConfig.categoryTabFont  = UIFont.systemFont(ofSize: 12.0, weight: .medium)
uiConfig.categorySelectedTabFont  = UIFont.systemFont(ofSize: 16.0, weight: .bold)

Customizing Empty Inbox:

In the case of an empty inbox, we provide the option of setting a message and image. By default, the empty inbox will look as shown below in the image:

This can again be customized by using the UI configuration instance as shown below:

let uiConfig = MOCardsUIConfiguration()

// Empty Inbox Customization
uiConfig.emptyInboxText = "No New Messages!!!"
uiConfig.emptyInboxTextColor = MOCoreUtils.getColorFromHexValue("#BB4D3E")
uiConfig.emptyInboxTextFont = UIFont.systemFont(ofSize: 28.0, weight: .bold)
uiConfig.emptyInboxImage = UIImage(named: "emptyInbox")

Customising Inbox Container:

In case any of the property of MOCardsListViewController has to be customized, refer to the below example:

let uiConfig = MOCardsUIConfiguration()

// Cards Container customization
uiConfig.cardsViewControllerBGColor = MOCoreUtils.getColorFromHexValue("#0A1D1F")
uiConfig.cardsTableViewBGColor = MOCoreUtils.getColorFromHexValue("#0A1D1F")
uiConfig.pullToRefreshTintColor = MOCoreUtils.getColorFromHexValue("#BB4D3E")

// To disable Pull to refresh set it to false, set to true by default
uiConfig.enablePullToRefresh = false 

// To change the Delete/Cancel text in Action Sheet
uiConfig.actionSheetDeletionText = "Remove"
uiConfig.actionSheetCancelText = "Never Mind"

// New Updates Button Customizations
uiConfig.newUpdatesButtonTitle = "Updates Available!!"
uiConfig.newUpdatesButtonFont = UIFont.systemFont(ofSize: 14.0, weight: .semibold)
uiConfig.newUpdatesButtonBGColor = MOCoreUtils.getColorFromHexValue("#BB4D3E")
uiConfig.newUpdatesButtonTextColor = MOCoreUtils.getColorFromHexValue("#FFFFFF")

info	Note We have supported pull to refresh in the Inbox, the activity indicator color for the same can be updated as shown above.

Customizing Card Properties:

We have provided options to customize your Card in the dashboard while creating the campaign, but along with it you can also set the default attribute values so that you don't have to set it every time while creating the campaign, refer to the example below:

let uiConfig = MOCardsUIConfiguration()

// Cards Default parameters
uiConfig.defaultCardBackgroundColor = MOCoreUtils.getColorFromHexValue("#6EA6CF")

// On highlighting the cell
uiConfig.cardSelectionTintColor = MOCoreUtils.getColorFromHexValue("#333333")

// Header Label textcolor and font
uiConfig.cardHeaderLabelFont = UIFont.init(name: "AmericanTypewriter", size: 20.0)!
uiConfig.cardHeaderLabelDefaultTextColor = MOCoreUtils.getColorFromHexValue("#0A1D1F")

// Message Label textcolor and font
uiConfig.cardMessageLabelFont  = UIFont.init(name: "Baskerville", size: 16.0)!
uiConfig.cardMessageLabelDefaultTextColor = MOCoreUtils.getColorFromHexValue("#0F2E2A")

// TimeStamp Date Format, Label textcolor and font
uiConfig.timestampDateFormat = "dd/MM, HH:mm"
uiConfig.cardTimestampLabelFont  = UIFont.init(name: "Courier", size: 14.0)!
uiConfig.cardTimestampLabelDefaultTextColor = MOCoreUtils.getColorFromHexValue("#0F2E2A")

// CTA Button customizations
uiConfig.cardButtonFont  = UIFont.init(name: "SavoyeLetPlain", size: 16.0)!
uiConfig.cardButtonDefaultTextColor = MOCoreUtils.getColorFromHexValue("#FFFFFF")
uiConfig.cardButtonDefaultBGColor = MOCoreUtils.getColorFromHexValue("#BB4D3E")

// Image Customizations
uiConfig.cardImageBackgroundColor = UIColor.clear
uiConfig.cardPlaceholderImage  = UIImage(named: "card-placeholder")

// Card Pinned Indicator
uiConfig.cardPinnedImage  = UIImage(named: "pinned")

// Unclicked Indicator
// Either Color OR Image NOT Both, If both are set then image will be considered
uiConfig.cardUnclickedIndicatorColor = MOCoreUtils.getColorFromHexValue("#7EC247")
uiConfig.cardUnclickedIndicatorImage = UIImage(named: "unclicked")

// Separator
uiConfig.cardSeparatorBackgroundColor = UIColor(red: 10.0/255.0, green: 90.0/255.0, blue: 190.0/255.0, alpha: 0.30)

Getting Cards Count APIs

Getting New Cards Count:

A Card is considered new if it's not yet seen by the user. To get the number/count of new cards use the getNewCardsCount() method as shown below:

let newCardsCount = MoEngageCards.sharedInstance.getNewCardsCount()

Getting Unclicked Cards Count:

To get the number/count of cards which are not clicked by the user, use the getUnclickedCardsCount() method as shown below:

let unclickedCardsCount = MoEngageCards.sharedInstance.getUnclickedCardsCount()

Callbacks using MOCardsDelegate

Use MOCardsDelegate protocol for getting the callbacks from the Cards Module:

@objc protocol MOCardsDelegate {
   // Called when the Cards data is synced successfully
    @objc optional func cardsSyncCompleted()
  
   // Called when MOCardsListViewController is dismissed after being presented
    @objc optional func cardsViewControllerDismissed()
  
    // Called when a Card is deleted
    @objc optional func cardDeleted(withCardInfo card: MOCard)
  
    // Called when a Card is clicked by the user
    @objc optional func cardClicked(withCardInfo card: MOCard, andAction action:MOCardNavigationAction) -> Bool
}

Set cardsDelegate property of MOCards instance as shown below to get the above callbacks:

class DelegateClass: MOCardsDelegate {
//  ...
MoEngageCards.sharedInstance.cardsDelegate = delegate // DelegateClass instance