Swiftpack.co - CleverTap/CTNotificationContent as Swift Package

Swiftpack.co is a collection of thousands of indexed Swift packages. Search packages.
See all packages published by CleverTap.
CleverTap/CTNotificationContent 0.2.0
A Notification Content Extension class to display custom content interfaces for iOS 10 push notifications
⭐️ 9
🕓 4 days ago
iOS
.package(url: "https://github.com/CleverTap/CTNotificationContent.git", from: "0.2.0")

CTNotificationContent

Version SwiftPM compatible Platform iOS 10.0+ License

A Notification Content Extension class to display custom content interfaces for iOS 10 push notifications

Starting with iOS 10 you can add custom content views to iOS push notifications. This library provides a class to accomplish that. It provides a default Image Slideshow view and is designed to be easily extensible to display additional view types.

Custom push notification content interfaces are enabled in iOS 10 via a Notification Content Extension, a separate and distinct binary embedded in your app bundle.

Table of contents

🎉 Installation

(Back to top)

CocoaPods

Your Podfile should look something like this:

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '10.0'

use_frameworks!

target 'YOUR_NOTIFICATION_CONTENT_TARGET_NAME' do  
    pod 'CTNotificationContent'  
end     

Then run pod install

See example Podfile here.

Swift Package Manager

Swift Package Manager is an Xcode tool that installs project dependencies. To use it to install CTNotificationContent SDK, follow these steps:

  • In Xcode, navigate to File -> Swift Package Manager -> Add Package Dependency.
  • Enter https://github.com/CleverTap/CTNotificationContent.git when choosing package repo and Click Next.
  • On the next screen, Select an SDK version (by default, Xcode selects the latest stable version). Click Next.
  • Click Finish and ensure that the CTNotificationContent has been added to the appropriate target.

🚀 Setup

(Back to top)

Configure your app for Push and add a Notification Content Extension target

Enable push notifications in your main app.

Create a Notification Content Extension in your project. To do that in your Xcode project, select File -> New -> Target and choose the Notification Content Extension template.

notification content extension

Configure your Notification Content Extension to use the CTNotificationViewController class

Change the superclass of your NotificationViewController to CTNotificationViewController. You should not implement any of the UNNotificationContentExtension protocol methods in your NotificationViewController class, those will be handled by CTNotificationViewController. See Objective-C example here and Swift example here.

Edit the Maininterface.storyboard in your NotificationContent target to a plain UIView, see example here.

In your AppDelegate, register the Notification category and actions:

Swift:

    // register category with actions
    let action1 = UNNotificationAction(identifier: "action_1", title: "Back", options: [])
    let action2 = UNNotificationAction(identifier: "action_2", title: "Next", options: [])
    let action3 = UNNotificationAction(identifier: "action_3", title: "View In App", options: [])
    let category = UNNotificationCategory(identifier: "CTNotification", actions: [action1, action2, action3], intentIdentifiers: [], options: [])
    UNUserNotificationCenter.current().setNotificationCategories([category])

Objective-C:

    UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter];
    UNNotificationAction *action1 = [UNNotificationAction actionWithIdentifier:@"action_1" title:@"Back" options:UNNotificationActionOptionNone];
    UNNotificationAction *action2 = [UNNotificationAction actionWithIdentifier:@"action_2" title:@"Next" options:UNNotificationActionOptionNone];
    UNNotificationAction *action3 = [UNNotificationAction actionWithIdentifier:@"action_3" title:@"View In App" options:UNNotificationActionOptionNone];
    UNNotificationCategory *cat = [UNNotificationCategory categoryWithIdentifier:@"CTNotification" actions:@[action1, action2, action3] intentIdentifiers:@[] options:UNNotificationCategoryOptionNone];
    [center setNotificationCategories:[NSSet setWithObjects:cat, nil]];

See Objective-C example here and Swift example here.

Then configure your Notification Content target Info.plist to reflect the category identifier you registered: NSExtension -> NSExtensionAttributes -> UNNotificationExtensionCategory. In addition, set the UNNotificationExtensionInitialContentSizeRatio -> 0.1 and UNNotificationExtensionDefaultContentHidden -> true.

Also, If you plan on downloading non-SSL urls please be sure to enable App Transport Security Settings -> Allow Arbitrary Loads -> true in your plist. See plist example here.

Dashboard Usage

(Back to top) While creating a Push Notification campaign on CleverTap, just follow the steps below -

  1. On the "WHAT" section pass the desired required values in the "title" and "message" fields (NOTE: These are iOS alert title and body). Dashboard alert
  2. Click on "Advanced" and then click on "Rich Media" and select Single or Carousel template. Dashboard Rich Media
  3. For adding custom key-value pair, add the template Keys individually or into one JSON object and use the pt_json key to fill in the values. Dashboard Custom Key individual Dashboard Custom Key JSON
  4. Send a test push and schedule!

Template Types

(Back to top)

Rich Media

Single Media

Single media is for basic view with single image. Single Media

Content Slider

Content Slider is for image slideshow view where user can add multiple images with different captions, sub-captions, and actions.

Content slider

Custom key-value pair

Basic Template

Basic Template is the basic push notification received on apps where user can also update text colour, background colour.

Custom Basic template

Auto Carousel Template

Auto carousel is an automatic revolving carousel push notification where user can also update text colour, background colour.

Auto carousel

Manual Carousel Template

This is the manual version of the carousel. The user can navigate to the next/previous image by clicking on the Next/Back buttons.

Manual carousel

Timer Template

This template features a live countdown timer. You can even choose to show different title, message, and background image after the timer expires.

Timer template

Note: If any image can't be downloaded, the template falls back to basic template with caption and sub caption only.

Template Keys

(Back to top)

Rich Media

Content Slider

Configure your APNS payload:

Then, when sending notifications via APNS:

  • include the mutable-content flag in your payload aps entry (this key must be present in the aps payload or the system will not call your app extension)
  • for the Image Slideshow view, add the ct_ContentSlider key with a json object value, see example below, to the payload, outside of the aps entry.
{

    "aps": {
        "alert": {
            "body": "test message",
            "title": "test title",
        },
        "category": "CTNotification",
        "mutable-content": true,
      },
    "ct_ContentSlider": {
        "orientation": "landscape", // landscape assumes 16:9 images, remove to display default square/portrait images
        "showsPaging": true, // optional to display UIPageControl
        "autoPlay": true, // optional to auto play the slideshow
        "autoDismiss": true, // optional to auto dismiss the notification on item actionUrl launch
        "items":[
            {
                "caption": "caption one",
                "subcaption": "subcaption one",
                "imageUrl": "https://s3.amazonaws.com/ct-demo-images/landscape-1.jpg",
                "actionUrl": "com.clevertap.ctcontent.example://item/one"
            }, 
            {
                "caption": "caption two", 
                "subcaption": "subcaption two", 
                "imageUrl": "https://s3.amazonaws.com/ct-demo-images/landscape-2.jpg",
                "actionUrl": "com.clevertap.ctcontent.example://item/two"
            }
       ]
   }
}

Custom key-value pair

Basic Template

Basic Template Keys Required Description
pt_id Required Value - pt_basic
pt_title Required Title
pt_msg Required Message
pt_msg_summary Required Message line when Notification is expanded
pt_bg Required Background Color in HEX
pt_big_img Optional Image
pt_dl1 Optional One Deep Link
pt_title_clr Optional Title Color in HEX
pt_msg_clr Optional Message Color in HEX
pt_json Optional Above keys in JSON format

Auto Carousel Template

Auto Carousel Template Keys Required Description
pt_id Required Value - pt_carousel
pt_title Required Title
pt_msg Required Message
pt_msg_summary Optional Message line when Notification is expanded
pt_dl1 Required Deep Link
pt_img1 Required Image One
pt_img2 Required Image Two
pt_img3 Required Image Three
pt_bg Required Background Color in HEX
pt_title_clr Optional Title Color in HEX
pt_msg_clr Optional Message Color in HEX
pt_json Optional Above keys in JSON format

Manual Carousel Template

Manual Carousel Template Keys Required Description
pt_id Required Value - pt_manual_carousel
pt_title Required Title
pt_msg Required Message
pt_msg_summary Optional Message line when Notification is expanded
pt_dl1 Required Deep Link One
pt_img1 Required Image One
pt_img2 Required Image Two
pt_img3 Required Image Three
pt_bg Required Background Color in HEX
pt_title_clr Optional Title Color in HEX
pt_msg_clr Optional Message Color in HEX
pt_json Optional Above keys in JSON format

Timer Template

Timer Template Keys Required Description
pt_id Required Value - pt_timer
pt_title Required Title
pt_title_alt Optional Title to show after timer expires
pt_msg Required Message
pt_msg_alt Optional Message to show after timer expires
pt_msg_summary Optional Message line when Notification is expanded
pt_dl1 Required Deep Link
pt_big_img Optional Image
pt_big_img_alt Optional Image to show when timer expires
pt_bg Required Background Color in HEX
pt_chrono_title_clr Optional Color for timer text in HEX
pt_timer_threshold Required Timer duration in seconds. Will be given higher priority.
pt_timer_end Optional Epoch Timestamp to countdown to (for example, $D_1595871380 or 1595871380). Not needed if pt_timer_threshold is specified.
pt_title_clr Optional Title Color in HEX
pt_msg_clr Optional Message Color in HEX
pt_json Optional Above keys in JSON format

Sample App

(Back to top)

Changelog

(Back to top) Refer to the Change Log.

GitHub

link
Stars: 9
Last commit: 3 days ago
jonrohan Something's broken? Yell at me @ptrpavlik. Praise and feedback (and money) is also welcome.

Release Notes

CTNotificationContent v0.2.0
3 days ago
  • Supports new templates - Basic, Auto carousel, Manual carousel and Timer
  • Backward compatible with Rich Media Push Notifications (Single Image and Content Slider)
  • Compatible with CleverTap iOS SDK v4.1.0

Swiftpack is being maintained by Petr Pavlik | @ptrpavlik | @swiftpackco | API | Analytics