> ## Documentation Index
> Fetch the complete documentation index at: https://moengage.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Push templates

> Add custom push notification templates with Notification Content Extension in your iOS app.

Notification Content Extension allows you to customize the appearance of the notification in expanded mode. For info on how to create campaigns with templates in the dashboard refer to [this](https://www.moengage.com/docs/user-guide/campaigns-and-channels/mobile-push/create/push-templates) link.

<img src="https://mintcdn.com/moengage/Jtvf10ggM77HdKvB/images/pushtemp1.gif?s=7390182b986c633c0d03a28e6071c268" alt="Pushtemp1" title="Pushtemp1" style={{ width:"36%" }} width="600" height="1067" data-path="images/pushtemp1.gif" />

<Note>
  **Prerequisites**

  Make sure you have completed the [App Target](https://www.moengage.com/docs/developer-guide/ios-sdk/push/basic/ios-push-integration-tutorial#step-1-implement-notification-service-extension-nse) and [Notification Service Extension](https://www.moengage.com/docs/developer-guide/ios-sdk/push/basic/ios-push-integration-tutorial#Optional) Implementation for supporting Rich Push in your project before proceeding with the below steps.
</Note>

# STEPS:

To support these custom push templates, your project needs to have a Notification Content Extension. Follow the below steps to create a Content Extension and to set it up to support MoEngage templates:

## 1. Create a Notification Content Extension

<img src="https://mintcdn.com/moengage/Jtvf10ggM77HdKvB/images/pushtemp2.png?fit=max&auto=format&n=Jtvf10ggM77HdKvB&q=85&s=0df3ab46ac4cfa8b7b3bf775bcfc867c" alt="Pushtemp2" title="Pushtemp2" style={{ width:"80%" }} width="1460" height="1040" data-path="images/pushtemp2.png" />

After the target is created, Activate the scheme for Extension when prompted for the same.

<img src="https://mintcdn.com/moengage/Jtvf10ggM77HdKvB/images/pushtemp3.png?fit=max&auto=format&n=Jtvf10ggM77HdKvB&q=85&s=8f99bc4aceec5496218a0e3bf6c2eddd" alt="Pushtemp3" title="Pushtemp3" style={{ width:"82%" }} width="2146" height="1396" data-path="images/pushtemp3.png" />

After this, your extension will be added to the project you will see a class with the extension name provided by you while creating and an .plist file associated with it.

## 2. Set deployment target

Set the deployment target same as the main app target.

## 3. Add required Capabilities

In the Capabilities Section add **App Groups** and select the same app group id that you have configured in your App target and Notification Service Extension target.

<img src="https://mintcdn.com/moengage/Jtvf10ggM77HdKvB/images/pushtemp4.png?fit=max&auto=format&n=Jtvf10ggM77HdKvB&q=85&s=f1301bb83c9974f83505b653097719ef" alt="Pushtemp4" title="Pushtemp4" style={{ width:"85%" }} width="1728" height="726" data-path="images/pushtemp4.png" />

Refer to the **Set AppGroup ID** section of the [doc](https://www.moengage.com/docs/developer-guide/ios-sdk/push/basic/ios-push-integration-tutorial#step-1-implement-notification-service-extension-nse) for more information on setting the app group ID on the main target

## 4. Info.plist changes

<img src="https://mintcdn.com/moengage/Jtvf10ggM77HdKvB/images/pushtemp5.png?fit=max&auto=format&n=Jtvf10ggM77HdKvB&q=85&s=0f0ea7a822e7a51b3de8129957941e64" alt="Pushtemp5" width="1726" height="436" data-path="images/pushtemp5.png" />

Make the changes in the `Info.plist` of your Notification Content Extension, as shown above, set NSExtensionAttributes as following:

| Attribute                                      | Attribute Value     |
| :--------------------------------------------- | :------------------ |
| UNNotificationExtensionCategory                | MOE\_PUSH\_TEMPLATE |
| UNNotificationExtensionInitialContentSizeRatio | 1.2                 |
| UNNotificationExtensionDefaultContentHidden    | YES                 |
| UNNotificationExtensionUserInteractionEnabled  | YES                 |

<Note>
  **Note**

  Update the UNNotificationExtensionCategory with the necessary values according to the categories that you have declared.
</Note>

## 5. Storyboard changes

Select ***MainInterface.storyboard*** in your Content extension and remove the default label which is placed there and set the background color of the view to clear color, as shown:

<img src="https://mintcdn.com/moengage/Jtvf10ggM77HdKvB/images/pushtemp6.png?fit=max&auto=format&n=Jtvf10ggM77HdKvB&q=85&s=c1e511eb6a3802ad16828789eb3a10bc" alt="Pushtemp6" width="2282" height="1010" data-path="images/pushtemp6.png" />

## 6. MoEngageRichNotification Integration

### Integration via Swift Package Manager (Recommended)

To integrate via SPM, use the  GitHub url [https://github.com/moengage/apple-sdk.git](https://github.com/moengage/apple-sdk.git) for SDK versions equal and above 9.23.0, or [https://github.com/moengage/MoEngage-iOS-SDK.git](https://github.com/moengage/MoEngage-iOS-SDK.git) for other SDK versions link and set the branch as master or required version.

### Integration via CocoaPod

<Info>
  **Information**

  CocoaPods is being deprecated. MoEngage recommends using Swift Package Manager for all new integrations. For more info on CocoaPods, refer to [CocoaPods Integration Guide](https://www.moengage.com/docs/developer-guide/ios-sdk/sdk-integration/basic/integration-through-cocoa-pods).
</Info>

For integrating through CocoaPod, include **MoEngageRichNotification** pod for your Notification Content Extension as shown below, and run the pod update / install command:

<CodeGroup>
  ```ruby Ruby wrap theme={null}
  target "NotificationContent" do
  	pod 'MoEngage-iOS-SDK/RichNotification',
  end
  ```
</CodeGroup>

<Info>
  **Manual Integration**

  * To integrate the MoEngageRichNotification SDK manually to your project follow this [doc](https://www.moengage.com/docs/developer-guide/ios-sdk/manual-integration/manual-integration).
  * Add MoEngageRichNotification to embed binaries in the App target, and ensure it is linked to your Notification Content Extension target.
</Info>

## 7. Code Changes in Content Extension:

<CodeGroup>
  ```swift Swift wrap theme={null}
  import UIKit
  import UserNotifications
  import UserNotificationsUI
  import MoEngageRichNotification
    
  class NotificationViewController: UIViewController, UNNotificationContentExtension {
      override func viewDidLoad() {
          super.viewDidLoad()
          // Set App Group ID
          MoEngageSDKRichNotification.setAppGroupID("Your App Group ID")
      }
    
      
      func didReceive(_ notification: UNNotification) {
          // Method to add template to UI
          MoEngageSDKRichNotification.addPushTemplate(toController: self, withNotification: notification)
      }
  }
  ```

  ```objective-c Objective C wrap theme={null}
  #import "NotificationViewController.h"
  #import <UserNotifications/UserNotifications.h>
  #import <UserNotificationsUI/UserNotificationsUI.h>
  @import MoEngageRichNotification;

  @interface NotificationViewController () <UNNotificationContentExtension>

  @end

  @implementation NotificationViewController

  - (void)viewDidLoad {
      [super viewDidLoad];
      // Set App Group ID
      [MoEngageSDKRichNotification setAppGroupID:@"Your App Group ID"];
  }

  - (void)didReceiveNotification:(UNNotification *)notification {
      // Method to add template to UI
      [MoEngageSDKRichNotification addPushTemplateToController:self withNotification:notification];
  }

  @end
  ```
</CodeGroup>

As shown above, make these changes in your ***NotificationViewController***  class:

1. Set the same App Group ID in ***viewDidLoad()*** method which was enabled in Capabilities.
2. Call [*addPushTemplate(toController:withNotification:)* ](https://moengage.github.io/ios-api-reference/Classes/MoEngageSDKRichNotification.html#/c:@M@MoEngageRichNotification@objc\(cs\)MoEngageSDKRichNotification\(cm\)addPushTemplateToController:withNotification:)method to add template in ***didReceiveNotification()*** callback.

## 8. Notification Click callback in App:

In the case of Simple Image Carousel notification, to know which slide was clicked by the user, make use of `MOMessagingDelegate` to get `notificationClicked(withScreenName: andKVPairs:)` callback to get key-value pairs and screen name if set for the clicked slide. Refer to the example below, here we are registering for the callback in AppDelegate:

<CodeGroup>
  ```swift Swift wrap theme={null}
  class AppDelegate: UIResponder, UIApplicationDelegate, UNUserNotificationCenterDelegate, MoEngageMessagingDelegate{
      
  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Set the delegate 
        MoEngageSDKMessaging.sharedInstance.setMessagingDelegate(self)
   
        //Rest of the implementation
  }
   
  // Notification Clicked Callback
  func notificationClicked(withScreenName screenName: String?, andKVPairs kvPairs: [AnyHashable : Any]?) {
          if let screenName = screenName {
              print("Navigate to Screen:\(screenName)")
          }
          
          if let actionKVPairs = kvPairs {
              print("Selected Action KVPair:\(actionKVPairs)")
          }
  }
    
  // Notification Clicked Callback with Push Payload
  func notificationClicked(withScreenName screenName: String?, kvPairs: [AnyHashable : Any]?, andPushPayload userInfo: [AnyHashable : Any]) {
          
          print("Push Payload: \(userInfo)")
          
          if let screenName = screenName {
              print("Navigate to Screen:\(screenName)")
          }
          
          if let actionKVPairs = kvPairs {
              print("Selected Action KVPair:\(actionKVPairs)")
          }
  }
  }
  ```

  ```objective-c Objective C wrap theme={null}
  @interface AppDelegate () <UNUserNotificationCenterDelegate, MoEngageMessagingDelegate>
  @end
   
  @implementation AppDelegate
   
   
  - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
      // Set the delegate 
     [[MoEngageSDKMessaging sharedInstance] setMessagingDelegate:self forAppID:@"YOUR WORKSPACE ID"];
   
      //Rest of the implementation
  }
   
  // Notification Clicked Callback
  -(void)notificationClickedWithScreenName:(NSString *)screenName andKVPairs:(NSDictionary *)kvPairs{
      if (screenName) {
          NSLog(@"Screen Name : %@",screenName);
      }
      if (kvPairs) {
          NSLog(@"KV Pairs : %@",kvPairs);
      }
  }
   
  // Notification Clicked Callback with Push Payload
  -(void)notificationClickedWithScreenName:(NSString *)screenName KVPairs:(NSDictionary *)kvPairs andPushPayload:(NSDictionary *)userInfo{
      NSLog(@"Push Payload: %@",userInfo);
      if (screenName) {
          NSLog(@"Screen Name : %@",screenName);
      }
      if (kvPairs) {
          NSLog(@"KV Pairs : %@",kvPairs);
      }
  }
   
   
  @end
  ```
</CodeGroup>