> ## 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.

# How to Avoid Push Template Issues in iOS Push Notifications (SDK version 7.x.x) Without a Notification Content Extension?

> Fix iOS push template display issues (carousel, colors, fonts) on SDK 7.x.x by creating a Notification Content Extension. Full setup guide included.

## Problem

Push templates (carousel images, background color, font color, and so on) are not displayed correctly in Push notifications when the Notification Content Extension is not implemented.

## Instruction

Perform the following steps:

1. Create a Notification Content Extension target.
   <img src="https://mintcdn.com/moengage/7H2dU4CG2W0DQCPI/images/moengage_71e025.png?fit=max&auto=format&n=7H2dU4CG2W0DQCPI&q=85&s=24011ffbc24fcab230b8c1118b845001" alt="NCE.png" width="1454" height="1040" data-path="images/moengage_71e025.png" />
   * In the **Product Name** box, type a name for the extension target.
   * In the **Language** list, click a language. **Swift** is recommended as the language because it works seamlessly with Objective-C projects.
     <img src="https://mintcdn.com/moengage/DUgG020WbtkVK2Ls/images/moengage_35e6b6.png?fit=max&auto=format&n=DUgG020WbtkVK2Ls&q=85&s=b6a69136992e73ac7031d9ec7f9e0bb9" alt="name swift.png" width="1412" height="1016" data-path="images/moengage_35e6b6.png" />
   * On the **Signing & Capabilities** tab, add the *AppGroupId* to the Notification Content Extension’s settings.
     <img src="https://mintcdn.com/moengage/t_8awpRKFC9RNHlT/images/moengage_ac6bfb.png?fit=max&auto=format&n=t_8awpRKFC9RNHlT&q=85&s=a963976b9c20b051dd9c11ade34ef391" alt="signing.png" width="2560" height="836" data-path="images/moengage_ac6bfb.png" />
   * Under **Minimum Deployments**, set the minimum deployment iOS version of the Notification Content Extension to match the main app’s iOS version.
     <img src="https://mintcdn.com/moengage/epqsPEpMsGQCYy1r/images/moengage_5c1797.png?fit=max&auto=format&n=epqsPEpMsGQCYy1r&q=85&s=f2b7ea3dbef13e379a9fde8432679bed" alt="deployment.png" width="1920" height="455" data-path="images/moengage_5c1797.png" />
2. Integrate the MORichNotification framework into the Notification Content Extension target.
   * In your podfile, add the Notification Content Extension as a separate target and install the MORichNotification framework.
     ```swift Swift theme={null}
     target 'MoEngageDemo' do
       use_frameworks!
       pod 'MoEngage-iOS-SDK'
     end
     target 'MoEngageNotificationService' do
       use_frameworks! #use use_frameworks only if included in main target as in above scenario
       pod 'MORichNotification'
     end
     target 'MoegageRichContent" do
       use_frameworks! #use use_frameworks only if included in main target as in above scenario
       pod 'MORichNotification'
     end
     ```
3. Code changes in **NotificationViewController.swift** file.
   ```swift Swift theme={null}
   import UIKit
   import UserNotifications
   import UserNotificationsUI
   import MORichNotification
   class NotificationViewController: UIViewController, UNNotificationContentExtension {
       @IBOutlet var label: UILabel?
       
       override func viewDidLoad() {
           super.viewDidLoad()
           MORichNotification.setAppGroupID("group.com.XXXXXXXXXXXXXXXX")
       }
       
       func didReceive(_ notification: UNNotification) {
           if #available(iOSApplicationExtension 12.0, *) {
               MOPushTemplateHandler.sharedInstance().addPushTemplate(to: self, with: notification)
           } else {
               // Fallback on earlier versions
           }
       }
   }
   ```
4. Select **MainInterface.storyboard** in the Content extension, remove the default label, and set the background color of the View to clear.
   <img src="https://mintcdn.com/moengage/ncl4TtlD4tqnPefh/images/moengage_771662.png?fit=max&auto=format&n=ncl4TtlD4tqnPefh&q=85&s=e392579a0932e3b386297b67b8398554" alt="main.png" width="3360" height="1646" data-path="images/moengage_771662.png" />
5. Info.plist changes:
   ```swift Swift theme={null}
   <key>NSExtensionAttributes</key> 
   <dict>
         <key>UNNotificationExtensionCategory</key>
         <string>MOE_PUSH_TEMPLATE</string>
         <key>UNNotificationExtensionDefaultContentHidden</key>
         <true/>
         <key>UNNotificationExtensionInitialContentSizeRatio</key>
         <real>1.2</real>
         <key>UNNotificationExtensionUserInteractionEnabled</key>
         <true/>
   </dict>
   ```
   <img src="https://mintcdn.com/moengage/CaPmX0z_ys8cr0ms/images/moengage_054a69.png?fit=max&auto=format&n=CaPmX0z_ys8cr0ms&q=85&s=d9be0e1662856fb626bd41526815b5e4" alt="NSExtension.png" width="1948" height="786" data-path="images/moengage_054a69.png" />
6. Check build phases in the main app target.
   * In Embed App Extensions/Embed Foundation Extensions, clear the **Copy only when installing** check box.
     <img src="https://mintcdn.com/moengage/xeb_76Bworf1GG6P/images/moengage_968bdb.png?fit=max&auto=format&n=xeb_76Bworf1GG6P&q=85&s=84f71b89f176a52e5edb104e68e3c357" alt="copy only.png" width="2740" height="930" data-path="images/moengage_968bdb.png" />
7. Ensure consistent *appGroupId* across configurations.
   * Verify that the *appGroupId* is consistent across all schemes and configurations (for example, Debug/Release/QA/UAT) in the project.
8. Align build configuration.
   * When executing or archiving the project, ensure that the build configuration for the main target, Notification Service Extension, and Notification Content Extension target points to the same scheme or configuration.
     <img src="https://mintcdn.com/moengage/UX7SFw6G5JwoHWFq/images/moengage_62d0a0.png?fit=max&auto=format&n=UX7SFw6G5JwoHWFq&q=85&s=01c73f9724f0b1f7a2b5ab26a7b8ac18" alt="debug.png" width="1750" height="556" data-path="images/moengage_62d0a0.png" />
   <img src="https://mintcdn.com/moengage/ME-DtlELD2N8TrcF/images/moengage_c31f9e.png?fit=max&auto=format&n=ME-DtlELD2N8TrcF&q=85&s=343eac9f1b77b8a027dd1f508933a60a" alt="target.png" style={{ width:"94%" }} width="1832" height="446" data-path="images/moengage_c31f9e.png" />
   <img src="https://mintcdn.com/moengage/t9d2bz7zij1iE1iP/images/moengage_9ee69a.png?fit=max&auto=format&n=t9d2bz7zij1iE1iP&q=85&s=990fd7cd8849e77f115990b453af8589" alt="duplicate.png" style={{ width:"93%" }} width="1826" height="976" data-path="images/moengage_9ee69a.png" />
