DocumentationCampaignCampaign v8 Documentation

Design an Android rich push delivery rich-push

Last update: Tue Jul 30 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Beginner
  • User
IMPORTANT
Before designing a Rich Push Notification, you first need to configure your V2 connector. Refer to this page for the detailed procedure.

With Firebase Cloud Messaging, you can choose between two types of messages:

  • The Data message is handled by the client app. These messages are sent directly to the mobile application, which generates and displays an Android notification on the device. Data messages contain only your custom application variables.

  • The Notification message, handled automatically by the FCM SDK. FCM automatically displays the message on your users’ devices on behalf of the client app. Notification messages contain a predefined set of parameters and options but can still be further personalized with custom application variables.

If the scroll bar is disabled on your interface, access Administration > Platform > Options, and set the XtkUseScrollBar option to 1.

Define the content of an Android notification push-message

Once your push delivery is created, you can define its content using one of the following templates:

  • Default allows you to send notifications with a simple icon and an accompanying image.

  • Basic can include text, images, and buttons in your notifications.

  • Carousel enables you to send notifications with text and multiple images that users can swipe through.

  • Icon buttons allows you to send notifications with an icon and a corresponding image.

  • Input box gathers user input and feedback directly through the notification.

  • Product catalog displays a variety of product images.

  • Product rating allows users to give feedback and rate products.

  • Timer includes a live countdown timer in your notifications.

  • Zero Bezel uses the entire background surface for an image, with text overlaid seamlessly.

Navigate through the tabs below to learn more on how to personalize these templates.

Default

  1. From the Notification type drop-down, select Default.

  2. To compose your message, enter your text in the Title and Message fields.

  3. Use dynamic personalization fields to define content, personalize data and add dynamic content. Learn more

  4. To further personalize your push notification, configure the Notification options and HTTPv1 additional options of your push notification. Learn more

Once you have defined your message content, you can use test subscribers to preview and test the message.

Basic

  1. From the Notification Type drop-down, select Basic.

  2. To compose your message, enter your text in the Title, Message and Expanded message fields.

    The Message text appears in the collapsed view while the Expanded message is displayed when the notification is expanded.

  3. Use dynamic personalization fields to define content, personalize data and add dynamic content. Learn more

  4. Under the Color options menu, enter the hexadecimal color codes for your Title, Message and Background.

  5. Add a Remind later button if needed. Enter your Reminder Text and Date in the corresponding fields.

    The Reminder Date field expects a value representing an epoch in seconds.

  6. Click Add button and fill in the following fields:

    • Label: Text displayed on the button.
    • Link URI: Specify the URI to be executed upon clicking the button.

    You have the option to include up to three buttons in your push notification. If you opt for the Remind later button, you can only include a maximum of two buttons.

  7. Select the Link type of your button’s linked URL:

    • Web URL: Web URLs direct users to online content. Upon clicking, they prompt the device’s default web browser to open and navigate to the designated URL.

    • Deeplink: Deep links are URLs guiding users to specific sections within an app even if the app is closed. When clicked, a dialog can appear, allowing users to choose from various apps capable of handling the link.

    • Open App: Open App URLs allow you to directly connect to content within an application. It enables your application to establish itself as the default handler for a specific type of link, bypassing the disambiguation dialog.

    For more information on how to handle Android App Links, refer to Android Developers documentation.

  8. To further personalize your push notification, configure the Notification options and HTTPv1 additional options of your push notification. Learn more

Once you have defined your message content, you can use test subscribers to preview and test the message.

Carousel

  1. From the Notification Type drop-down, select Carousel.

  2. To compose your message, enter your text in the Title, Message and Expanded message fields.

    The Message text appears in the collapsed view while the Expanded message is displayed when the notification is expanded.

  3. Use the Expression editor to define content, personalize data and add dynamic content. Learn more

  4. Under the Color options menu, enter the hexadecimal color codes for your Title, Message and Background.

  5. Choose how the Carousel is operated:

    • Auto: automatically cycles through images as slides, transitioning at predefined intervals.
    • Manual: allows users to manually swipe between slides to navigate through the images.

  6. From the Layout drop-down, select Filmstrip option to include previews of the previous and next images alongside the main slide.

  7. Click Add image and enter your image URL, Text and Action URL.

    Ensure that you include a minimum of three images and a maximum of five images.

  8. To further personalize your push notification, configure the Notification options and HTTPv1 additional options of your push notification. Learn more

Once you have defined your message content, you can use test subscribers to preview and test the message.

Icon buttons

  1. From the Notification Type drop-down, select Icon buttons.

  2. Under the Color options menu, enter the hexadecimal color codes for your Background.

  3. Provide the URL for the Cancel button image.

  4. Under the Icon image buttons, click Add image. Then, enter the Image URL, Link type, and Link URI.

    Ensure you include a minimum of three images and a maximum of five buttons.

  5. To further personalize your push notification, configure the Notification options and HTTPv1 additional options of your push notification. Learn more

Once you have defined your message content, you can use test subscribers to preview and test the message.

Input box

  1. From the Notification Type drop-down, select Input box.

  2. To compose your message, enter your text in the Title, Message and Expanded message fields.

    The Message text appears in the collapsed view while the Expanded message is displayed when the notification is expanded.

  3. Under the Color options menu, enter the hexadecimal color codes for the Title, Message and Background.

  4. In the Input box options menu, fill in the following option:

    • Input receiver name: Enter the name or identifier for the receiver of the input.
    • Input text: Enter the text for the Input box.
    • Feedback text: Enter the text to display after a reply.
    • Feedback image: Add the URL for the image displayed after a reply.

  5. To further personalize your push notification, configure the Notification options and HTTPv1 additional options of your push notification. Learn more

Once you have defined your message content, you can use test subscribers to preview and test the message.

Product Catalog

  1. From the Notification Type drop-down, select Product catalog.

  2. To compose your message, enter your text in the Title, Message and Expanded message fields.

    The Message text appears in the collapsed view while the Expanded message is displayed when the notification is expanded.

  3. Under the Color options menu, enter the hexadecimal color codes for your Title, Message and Background.

  4. Under Product catalog options menu, fill in the following options:

    • Action button text: Text displayed on the button.
    • Action button text color: Color of the Action button text.
    • Action button color: Color of the Action button.
    • Action button URI: Specify the URI to be executed upon clicking the button.
    • Display type: Choose between vertical or horizontal display.

  5. In the Product catalog items menu, click Add and enter the following details for each item:

    • Title
    • Description
    • Image URL
    • Price
    • URI

    Ensure that you include a maximum of three items.

  6. To further personalize your push notification, configure the Notification options and HTTPv1 additional options of your push notification. Learn more

Once you have defined your message content, you can use test subscribers to preview and test the message.

Product Rating

  1. From the Notification Type drop-down, select Product rating.

  2. To compose your message, enter your text in the Title, Message and Expanded message fields.

    The Message text appears in the collapsed view while the Expanded message is displayed when the notification is expanded.

  3. Under the Color options menu, enter the hexadecimal color codes for your Title, Message and Background.

  4. In the Product rating options menu, enter the URLs for the Rating icon in unselected state and Rating icon in selected state.

  5. Under Product rating items menu, click Add and enter your Link URI and choose your Link type.

    • Web URL: Web URLs direct users to online content. Upon clicking, they prompt the device’s default web browser to open and navigate to the designated URL.

    • Deeplink: Deep links are URLs guiding users to specific sections within an app even if the app is closed. When clicked, a dialog can appear, allowing users to choose from various apps capable of handling the link.

    • Open App: Open App URLs allow you to directly connect to content within an application. It enables your application to establish itself as the default handler for a specific type of link, bypassing the disambiguation dialog.

    • Dismiss: No URL is associated with the button; clicking simply closes the dialog or interface.

    Ensure that you include a minimum of three values and a maximum of five values.

  6. To further personalize your push notification, configure the Notification options and HTTPv1 additional options of your push notification. Learn more

Once you have defined your message content, you can use test subscribers to preview and test the message.

Timer

  1. From the Notification Type drop-down, select Timer.

  2. To compose your message, enter your text in the Title, Message and Expanded message fields.

    The Message text appears in the collapsed view while the Expanded message is displayed when the notification is expanded.

  3. Enter the text that will be displayed after the timer has expired in the Alternate title, Alternate message and Alternate expanded message fields.

  4. Under the Color options menu, enter the hexadecimal color codes for your Title, Message, Background and Timer.

  5. Set your Timer duration in seconds or the Timer end timestamp to a specific epoch timestamp and add your Alternate image URL that will be displayed after the timer has expired.

  6. To further personalize your push notification, configure the Notification options and HTTPv1 additional options of your push notification. Learn more

Once you have defined your message content, you can use test subscribers to preview and test the message.

Zero Bezel

  1. From the Notification Type drop-down, select Zero bezel.

  2. To compose your message, enter your text in the Title, Message and Expanded message fields.

    The Message text appears in the collapsed view while the Expanded message is displayed when the notification is expanded.

  3. Under the Color options menu, enter the hexadecimal color codes for your Title, Message and Background.

  4. In the Zero bezel options menu, add your image URL in the Collapsed notification style field.

  5. To further personalize your push notification, configure the Notification options and HTTPv1 additional options of your push notification. Learn more

Once you have defined your message content, you can use test subscribers to preview and test the message.

Push notification advanced settings push-advanced

Notification options notification-options

Parameter
Description
Channel ID
Set your notification’s channel ID. The app must create a channel with this channel ID before any notification with this channel ID is received.
Icon
Set the notification’s icon to display on your profiles’ devices.
Sound
Set the sound to play when the device receives your notification.
Tag
Set an identifier used to replace existing notifications in the notification drawer. This helps prevent the accumulation of multiple notifications and ensures that only the latest relevant notification is displayed.
Color
Set your notification’s icon color with hexadecimal color code.
Click action
Set the action associated with a user click on your notification.
Notification background color
Set the color of your Notification background with your Hex color codes.
Link type
  • Web URL: Web URLs direct users to online content. Upon clicking, they prompt the device’s default web browser to open and navigate to the designated URL.
  • Deeplink: Deep links are URLs guiding users to specific sections within an app even if the app is closed. When clicked, a dialog can appear, allowing users to choose from various apps capable of handling the link.
  • Open App: Open App URLs allow you to directly connect to content within an application. It enables your application to establish itself as the default handler for a specific type of link, bypassing the disambiguation dialog.

HTTPv1 additional options additional-options

Parameter
Description
Ticker
Set the ticker text of your notification. Only available for devices set to Android 5.0 Lollipop.
Sticky
When activated, the notification remains visible even after the user clicks on it.
If deactivated, the notification is automatically dismissed when the user interacts with it. The sticky behavior allows important notifications to persist on the screen for longer periods.
Image
Set the image’s URL to be displayed in your notification.
Notification Priority
Set the priority level of your notification, which can be default, minimum, low, or high. The priority level determines the importance and urgency of the notification, influencing how it is displayed and whether it can bypass certain system settings. For more on this, refer to FCM documentation.
Notification Count
Set the number of new unread information to be displayed directly on the application icon. This allows the user to quickly see the number of pending notifications.
Visibility
Set the visibility level of your notification, which can be public, private, or secret. The visibility level determines how much of the notification’s content is shown on the lock screen and other sensitive areas. For more information, refer to the FCM documentation.
Application variables
Allow you to define notification behavior. These variables are fully customizable and are included as part of the message payload sent to the mobile device.
recommendation-more-help
35662671-8e3d-4f04-a092-029a056c566b