iOS In App Notification

In-App Notifications

The CleverTap SDK allows you to show In-App notifications to your users. You can design in-app notifications right from the dashboard, without writing a single line of code. There is no code required for this feature

Note: not applicable inside App Extensions and watchOS apps.

InApp Notification Button onClick Callbacks

iOS SDK v3.7.1 and above supports callback on the click of InApp Notification Buttons by returning a Map of Key-Value pairs. To use this, make sure your class implements the CleverTapInAppNotificationDelegate and use the following method to handle user-selected actions from InApp notifications:

- (void)inAppNotificationButtonTappedWithCustomExtras:(NSDictionary *)customExtras {
     NSLog(@"inAppNotificationButtonTappedWithCustomExtras:%@", customExtras);
  ...
}
func inAppNotificationButtonTapped(withCustomExtras customExtras: [AnyHashable : Any]!) {
      print("In-App Button Tapped with custom extras:", customExtras ?? "");
  }

Control In-App Notifications

For CleverTap iOS SDK 3.10.0 and above, you can suspend, discard, or resume in-app notifications.

📘

Note

The CleverTap SDK automatically resumes displaying the in-app notification after every new session.

You can control the in-app notifications in the following ways:

Suspend

The suspendInAppNotifications method suspends and saves in-app notifications until the resumeInAppNotifications method is called for the current session.

CleverTap.sharedInstance()?.suspendInAppNotifications()
#import <CleverTapSDK/CleverTap+InAppNotifications.h>
[[CleverTap sharedInstance] suspendInAppNotifications];

Discard

The discardInAppNotifications method discards in-app notifications until the resumeInAppNotifications method is called for the current session.

CleverTap.sharedInstance()?.discardInAppNotifications()
#import <CleverTapSDK/CleverTap+InAppNotifications.h>
[[CleverTap sharedInstance] discardInAppNotifications];

Resume

The resumeInAppNotifications method resumes displaying in-app notifications.

CleverTap.sharedInstance()?.resumeInAppNotifications()
#import <CleverTapSDK/CleverTap+InAppNotifications.h>
[[CleverTap sharedInstance] resumeInAppNotifications];

If you call this the resumeInAppNotifications method after the suspendInAppNotifications() method, then the CleverTap SDK displays all the queued in-app notifications and resumes the new in-app notifications.

📘

Note

The showInAppNotificationIfAny method will be deprecated soon. Use the resumeInAppNotifications method to manually display the pending in-app notifications.

Custom Handling Deeplink

For CleverTap iOS SDK 3.10.0 and above, you can implement custom handling for URLs of in-app notification CTAs, push notifications, and app Inbox messages.

Check that your class conforms to the CleverTapURLDelegate protocol by first calling setURLDelegate. Use the following protocol method shouldHandleCleverTap(_ : forChannel:) to handle URLs received from channels such as in-app notification CTAs, push notifications, and app Inbox messages:

// Set the URL Delegate
CleverTap.sharedInstance()?.setUrlDelegate(self)


 // CleverTapURLDelegate method
public func shouldHandleCleverTap(_ url: URL?, for channel: CleverTapChannel) -> Bool {  
    print("Handling URL: \(url!) for channel: \(channel)") 
    return true 
}
#import <CleverTapSDK/CleverTapURLDelegate.h>

// Set the URL Delegate
[[CleverTap sharedInstance]setUrlDelegate:self];

// CleverTapURLDelegate method 
- (BOOL)shouldHandleCleverTapURL:(NSURL *)url forChannel:(CleverTapChannel)channel {
    NSLog(@"Handling URL: \(%@) for channel: \(%d)", url, channel);
    return YES;
}

Javascript support in In-App Notifications

CleverTap iOS SDK v3.5.0 and above supports embedding Javascript code inside Custom In-Apps. To make sure your Javascript code works on the app, while creating the InApp campaign, select the checkbox for Enabling javascript during the In-App campaign creation

All methods are explained with examples below:

//Recording a User Event called Product Viewed in JS enabled custom in-apps.
var props = {foo: 'xyz', lang: 'French'};
var message = { action:'recordEventWithProps', event:'Product Viewed', props: props};

if(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.clevertap){
 // Call iOS interface                  
   window.webkit.messageHandlers.clevertap.postMessage(message);         
} 

//Updating profile properties of the User in JS enabled custom in-apps.
var props = {foo: 'xyz', lang: 'French'};
var message = { action:'profilePush', properties: props};

if(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.clevertap){
 // Call iOS interface
  window.webkit.messageHandlers.clevertap.postMessage(message);        
}

//Setting a user profile
var message = {
                action: 'profileSetMultiValues',
                values: ['bag', 'kitkat'],
                key: 'myStuff'
            };
            
if(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.clevertap){
    window.webkit.messageHandlers.clevertap.postMessage(message);
}


//Add multi value
var message = {action: 'profileAddMultiValue',
             value: 'coat', 
             key: 'myStuff'};

if(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.clevertap){
    window.webkit.messageHandlers.clevertap.postMessage(message);
}


//Add multi values
 var message = {action: 'profileAddMultiValues',
                values: ['bag', 'kitkat', 'Wine'],
                key: 'myStuff'};

if(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.clevertap){
    window.webkit.messageHandlers.clevertap.postMessage(message);
}


//Remove value for key

var message = {action: 'profileRemoveValueForKey',
                    key: 'myStuff' };

if(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.clevertap){
    window.webkit.messageHandlers.clevertap.postMessage(message);
}


//Remove multi values for key
 var message = {action: 'profileRemoveMultiValues',
                values: ['scarf', 'knife'],
                key: 'myStuff'};

if(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.clevertap){
    window.webkit.messageHandlers.clevertap.postMessage(message);
}


//Remove multi Value
var message = {action: 'profileRemoveMultiValue',
                value: 'bag',
                key: 'myStuff'};

if(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.clevertap){
    window.webkit.messageHandlers.clevertap.postMessage(message);
}

// Increment user property value

var message = {action: 'profileIncrementValueBy',
               value: 1,
               key: 'score'
             };
                
if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.clevertap) {
    window.webkit.messageHandlers.clevertap.postMessage(message);
}

// Decrement user property value

var message = {action: 'profileDecrementValueBy',
               value: 1,
               key: 'score'
             };
                
if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.clevertap) {
    window.webkit.messageHandlers.clevertap.postMessage(message);
}

// Call onUserLogin

var props = { Name: 'JohnWeb', Email: '[email protected]' };
var message = { action:'onUserLogin', properties: props };
                
if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.clevertap) {
    window.webkit.messageHandlers.clevertap.postMessage(message);
}

//Record Charged Event
const chargeDetails = {
                "Amount" : 300,
                "Payment mode": "Credit Card",
                "Charged ID": 24052013
            };
const items = [{
                "Category": "books",
                "Book name": "The Millionaire next door",
                "Quantity": 1
            },{
                "Category": "books",
                "Book name": "The Millionaire previous door",
                "Quantity": 5
            }];
const message = {
                action:'recordChargedEvent',
                chargeDetails: chargeDetails,
                items: items
            };
if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.clevertap) {
    window.webkit.messageHandlers.clevertap.postMessage(message);
}

📘

Inline Media

To add inline media support in custom HTML for in-app notifications, add the key playsinline with value as 1 or true as a query parameter in your media URL. For example, watch this YouTube video. This functionality is available for CleverTap iOS SDK 3.7.2 and above.


Did this page help you?