User GuideDeveloper GuideAPI GuideTechnology PartnersNetcore Cloud AI: Co-Marketer
User Guide
BlogLogin

Overlay on Image: App Push Template

Learn to create an App push template using the Overlay on Image template.

Suggest Edits

The Overlay on Image template enables marketers to deliver visually rich notifications by overlaying text and actions on a background image. This layout is ideal for promotional campaigns, product launches, or any communication that benefits from high-impact visuals and clear CTAs.

Select Overlay on Image layout from the Content section when creating or editing any app push template.

Configure Content

Configure the following content and design elements to personalize the template's layout.

OptionsDescription
TitleAdd a concise and attention-grabbing title for your notifications. You can apply text formatting:
  • Bold
  • Italics
  • Underline
  • Text color
  • Background color

    • Note: Text formatting in only supported on Android. iOS will display plain text.
    DescriptionProvide the main message or supporting text to communicate your intent. This appears overlaid on the image.
    Note: Supported on both Android and iOS.
    Landing PageSet the redirection behavior when users interact with the notification:
  • Deeplink: Opens a specific app screen.
  • URL: Opens a browser link
  • App Homepage: Navigates to the app’s home screen

    • Note: These options support deep personalization and can be tracked via analytics

    Enable APN Interactions

    This includes all image-related and design-enhancing options that control how the push notification looks. These settings help create high-impact visuals while ensuring readability and brand consistency.

    OptionsDescriptions
    SubtitleAdd supporting text to complement the title and description of your notification. This appears in a secondary position and helps convey additional context.
  • Android: Displayed beside the title in both expanded and collapsed views.
  • iOS: Displayed below the title in both states.

    • Note: Even if subtitle is disabled for editing, a placeholder or instructional comment may appear in the preview.
    Rich MediaUpload or link an image that forms the background of the notifications. Available options:
  • Upload file: Select an image from your computer.
  • Media URL: Use a hosted image(must start with hhtps://)

    • Supported format: .jpg, .jpeg, .png
    Max size: 200 KB
    Note: Important content should not be placed at the bottom of the image due to cropping behavior. Only available for SDK 3.4.0 and above.
    Overlay ColorAllows you to customize the color applied to the background overlay behind an app push.
    Background colorDefine a solid or gradient background behind the overlay image block. This is useful as a fallback or design enhancement.
    Brand logo in previewBrand logos appear automatically in previews based on platform:
  • Android:Right side (collapsed & expanded)
  • iOS: Left side(collapsed & expanded)
    • Customize collapsed stateAllows you to define how a push notification appears in its minimized form on Android devices. Marketers can upload a separate image or reuse the rich media asset with tailored layout controls when enabled.
    Availability
  • Platform: Android only
  • SDK Support: SDK v3.5.8 onwards(Android Push SDK)
  • Dependent on: Rich media(image or carousel) being added.
  • Suggested aspect ratio: 4:1
    Available on Android only.
    • Enable sticky notificationMake your notifications persistent by preventing swipe dismissal.
  • Remains in the tray until user interacts
  • Helpful for critical updates or promotions.
    • SoundDefine the tone played when a notification arrives on the device. You can choose between the default device sound or a custom sound.

    Here are the requirements for setting a custom sound:
    • Android Versions Below 8: Enter the sound file name in your app bundle. Supported formats are .mp3, .ogg, and .wav.
    • Android Versions 8 and Above: Enter the name of the notification channel ID. For setup instructions, refer to the notification channel documentation .
    • iOS: Enter the sound file name included in your app bundle. Supported formats are .aiff, .wav, and .caf.
    Note: The sound file name must be in your app bundle. If it is missing, the device will play the default sound.
    Carousel TypeThis option allows you to select between Manual and Automatic carousel transitions. In Automatic, set the timer for image transitions between 2 and 10 seconds.
    Note: Ensure the important part of the image is not in the lower portion. Users can add up to five images with a 2:1 aspect ratio and a maximum file size of 40KB.
    Progress Bar Settings
  • End date & time: Select when the progress bar reaches completion.
  • Maximum and minimum time allowed: Set the timer duration between one hour and 28 days.
  • Message after the timer ends: Specify the message that will replace the timer text once the progress bar is completed.Local time display: Timer will automatically adjust to the user’s local time zone.

    • Action Button

    Add interactive buttons to your push notification to direct users toward specific actions, such as visiting a page, opening a section of the app, or triggering a deep link.

    You can configure the following options:

    1. Action title: Define the text that appears on the button (e.g., “Shop Now”, “Check Offer”, “Know More”). Keep it concise and action-oriented to maximize engagement.

    2. Call to action: Select the action behavior that should be triggered when the user taps the button. You can choose from the following options:

      OptionDescription
      Open within appLaunches a specific screen in the app via a deeplink. Ideal for driving engagement to in-app features or offers.
      Open in browserOpens a web page in the device’s default browser using a URL. Useful for linking to landing pages, product pages, or external content.
      CloseDismisses the notification without taking further action. Suitable for “No Thanks” or passive dismissals.
      Remind me laterTriggers a reminder notification later. Best used in time-sensitive scenarios or when giving users the option to postpone.
      Copy textCopies predefined text (e.g., a promo code) to the user’s clipboard. Great for coupon-based campaigns or referral codes.

    📘

    Note

    Some options like “Open within app” require a valid deeplink to be configured in your app.

    1. Target URL: Specify the destination URL that opens when the user taps the button. You can set a:
      • Deeplink (to open a specific screen in the app)
      • Web URL (to open a browser page)
      • App Landing Page

        📘

        Tip

        Make sure the destination matches the campaign objective and is mobile-friendly.

    Add-on Options

    Use the following enhancements to add controls and personalization to your push notification logic:

    Overwrite Content with Collapse Key

    Use this feature to manage notification replacement behavior in the user’s tray. Only the most recent one is displayed when multiple notifications share the same collapse key.

    • Applicable for: All templates using FCM or APNS
    • Use Case: Send score updates, countdowns, or stock changes without cluttering the tray.
    • Example:
      1. Collapse Key: promo_alert
      2. Behavior: Only the latest “promo_alert” notification appears.

    Custom Key-Value Pairs

    Add up to 49 OS-specific key-value pairs to control in-app behavior when the notification is clicked. These values are passed to the app and can be used for deep personalization or routing.

    • Key Example: category
    • Value Example: electronics
    • Use Case: When a user taps the push, the app opens the Electronics section directly.

    📘

    Note

    • At least one platform (Android or iOS) must be selected for each key-value pair.
    • These values must be handled in your app’s SDK to trigger specific actions.

    Once you've configured all the content and design elements for the Overlay on Image layout, you can:

    • Save Template: To use it in future campaigns
    • Use in Campaign: To apply it directly to a new or existing push campaign

    Your template is now ready to deliver visually compelling, high-engagement push notifications.

    To learn how to create an app push campaign step-by-step, check out this document.

    Updated about 3 hours ago