Add phase 2 push template documentation, add push template image recommendations

gatsby-config.js

@@ -962,9 +962,29 @@ module.exports = {
                                         title: "Carousel",
                                         path: "/resources/reference/push-notifications/templates/carousel"
                                     },
+                                    {
+                                        title: "Input Box",
+                                        path: "/resources/reference/push-notifications/templates/input-box"
+                                    },
+                                    {
+                                        title: "Multi Icon",
+                                        path: "/resources/reference/push-notifications/templates/multi-icon"
+                                    },
+                                    {
+                                        title: "Product Catalog",
+                                        path: "/resources/reference/push-notifications/templates/catalog"
+                                    },
+                                    {
+                                        title: "Rating",
+                                        path: "/resources/reference/push-notifications/templates/rating"
+                                    },
                                     {
                                         title: "Timer",
                                         path: "/resources/reference/push-notifications/templates/timer"
+                                    },
+                                    {
+                                        title: "Zero Bezel",
+                                        path: "/resources/reference/push-notifications/templates/zero-bezel"
                                     }
                                 ]
                             }

src/pages/resources/reference/push-notifications/android/index.md

@@ -14,7 +14,7 @@ This document outlines the steps required to configure your app to use default p
 
 <InlineAlert variant="info" slots="text"/>
 
-Default push template functionality is available for use with the **Adobe Campaign Classic** extension. <br /><br />Supported versions are **Android SDK version >= 2.1.0 && < 3.0.0** and **iOS SDK version 5.0.0+**.
+Default push template functionality is available for use with the **Adobe Campaign Classic** extension. <br /><br />This is supported by **Android SDK version 3.1.0+**.
 
 ## Setup
 

src/pages/resources/reference/push-notifications/index.md

@@ -12,7 +12,7 @@ keywords:
 
 <InlineAlert variant="info" slots="text"/>
 
-Default push template functionality is available for use with the **Adobe Campaign Classic** extension. <br /><br />Supported versions are **Android SDK version >= 2.1.0 && < 3.0.0** and **iOS SDK version 5.0.0+**.
+Default push template functionality is available for use with the **Adobe Campaign Classic** extension. <br /><br />This is supported by **Android SDK version 3.1.0+** and **iOS SDK version 5.0.0+**.
 
 ## Setup
 
@@ -22,3 +22,32 @@ Default push template functionality is available for use with the **Adobe Campai
 ## Templates
 
 View the [list of supported templates](./templates/).
+
+## Image specifications
+
+The tables below contain guidelines for your push notification content. **These recommendations help your images display reliably across multiple devices.** These values are guidelines only - you should still test a notification prior to sending it.
+
+**Android**
+
+| Image type in notification payload |         Aspect Ratios         | Image Size | Supported File Types | File Source                          |
+| :--------------------------------: | :---------------------------: | :--------: | :------------------: | ------------------------------------ |
+|             adb_image              | 1:1, 3:2, 5:4, 4:3, 2:1, 16:9 |   < 1 MB   |    PNG, JPG, WebP    | Remote URI                           |
+|           adb_small_icon           |              1:1              |   < 1 MB   |    PNG, JPG, WebP    | Bundled Drawable Asset               |
+|           adb_large_icon           |              1:1              |   < 1 MB   |    PNG, JPG, WebP    | Remote URI or Bundled Drawable Asset |
+|         Multi-icon images          |              1:1              |   < 1 MB   |    PNG, JPG, WebP    | Remote URI or Bundled Drawable Asset |
+|         Rating icon images         |              1:1              |   < 1 MB   |    PNG, JPG, WebP    | Remote URI or Bundled Drawable Asset |
+|          Carousel images           | 1:1, 3:2, 5:4, 4:3, 2:1, 16:9 |   < 1 MB   |    PNG, JPG, WebP    | Remote URI                           |
+|     Filmstrip carousel images      |      1:1, 3:2, 5:4, 4:3       |   < 1 MB   |    PNG, JPG, WebP    | Remote URI                           |
+| Horizontal product catalog images  |           2:1, 16:9           |   < 1 MB   |    PNG, JPG, WebP    | Remote URI                           |
+|  Vertical product catalog images   |      1:1, 3:2, 5:4, 4:3       |   < 1 MB   |    PNG, JPG, WebP    | Remote URI                           |
+
+`adb_image` is used as the main image in basic, input box, remind later, timer, and zero bezel notifications.
+
+**iOS**
+
+| Image type in notification payload | Aspect Ratios |  Image Size   | Supported File Types | File Source |
+| :--------------------------------: | :-----------: | :-----------: | :------------------: | ----------- |
+|             adb_media              |      2:1      | 50 KB to 1 MB |    PNG, JPG, WebP    | Remote URI  |
+|          Carousel images           |      2:1      | 50 KB to 1 MB |    PNG, JPG, WebP    | Remote URI  |
+
+ `adb_media` is used as the main image in basic and timer notifications

src/pages/resources/reference/push-notifications/templates/basic.md

@@ -12,7 +12,9 @@ import Tabs from './tabs/basic.md'
 
 # Push template - basic
 
-A standard notification including a title, subtitle, message body, optional image, icons, link, buttons.<br />An alternate title and body can be optionally specified when the notification is expanded by the user.
+A standard notification including a title, subtitle, message body, optional image, icons, link, buttons.
+
+An alternate title and body can be optionally specified when the notification is expanded by the user.
 
 The following tables show all available properties in their respective payloads for FCM (Android) and APNS (iOS).
 

src/pages/resources/reference/push-notifications/templates/carousel.md

@@ -12,10 +12,11 @@ import Tabs from './tabs/carousel.md'
 
 # Push template - carousel
 
-A notification that shows a series of three to five images that scroll on/off the sides of the notification. <br />If operating in `automatic` mode, images will rotate every five (5) seconds.  If operating in manual mode, the user is required to push a button to advance forwards or backwards through the carousel.
+A notification that shows a series of three to five images that scroll on/off the sides of the notification.
+
+If operating in automatic mode, images will rotate every five (5) seconds.  If operating in manual mode, the user is required to push a button to advance forwards or backwards through the carousel.
 
 Templates below show all available properties in their respective payloads for FCM (Android) and APNS (iOS).
-<br />
 <TabsBlock orientation="horizontal" slots="heading, content" repeat="2"/>
 
 FCM

src/pages/resources/reference/push-notifications/templates/catalog.md

@@ -0,0 +1,27 @@
+---
+title: Adobe Experience Platform SDK basic push template
+description: Basic push template supported by Adobe Campaign Classic mobile extension.
+keywords:
+- Adobe Campaign Classic
+- Push
+- Push Template
+- Product Catalog
+---
+
+import Tabs from './tabs/catalog.md'
+
+# Push template - product catalog
+
+A notification containing a central image which can show one of three products.
+
+The user can select a product thumbnail to highlight it in the main image, causing the title, body, image, and product price to update in the notification.
+
+A call-to-action (CTA) button is provided to specify an action to take when the user interacts with a product.
+
+The table below shows all available properties in the respective payload for FCM (Android).
+
+<TabsBlock orientation="horizontal" slots="heading, content" repeat="1"/>
+
+FCM
+
+<Tabs query="platform=fcm&template=catalog"/>

src/pages/resources/reference/push-notifications/templates/index.md

@@ -14,10 +14,17 @@ This document outlines the push templates that are supported by default.
 
 <InlineAlert variant="info" slots="text"/>
 
-Default push template functionality is available for use with the **Adobe Campaign Classic** extension. <br /><br />Supported versions are **Android SDK version >= 2.1.0 && < 3.0.0** and **iOS SDK version 5.0.0+**.
+Default push template functionality is available for use with the **Adobe Campaign Classic** extension.
+
+This is supported by **Android SDK version 3.1.0+** and **iOS SDK version 5.0.0+**.
 
 | Template Name | Compatibility | Description | Sample |
 | :------------ | :------------ | :---------- | :----- |
-| [Basic](./basic) | **Android**<br />**> Product**<br /> *Adobe Campaign Classic*<br /> **> SDK Extension**<br /> *CampaignClassic >= 2.1.0 && < 3.0.0* <br /><br />**iOS**<br /> **> Product**<br />*Adobe Campaign Classic*<br /> **> SDK Extension**<br /> *AEPNotificationContent 5.0.0+* | A basic push notification template. <br />Allows setting a title, message body, and optional image, action buttons, and click-through URL. <br /><br />For **Android only**, it also supports a "remind me later" functionality which will schedule the notification to be re-delivered at a later time. | ![gif of sample basic notification](./../templates/assets/basic.gif) |
-| [Carousel](./carousel) | **Android**<br />**> Product**<br /> *Adobe Campaign Classic*<br /> **> SDK Extension**<br /> *CampaignClassic >= 2.1.0 && < 3.0.0* <br /><br />**iOS**<br /> **> Product**<br />*Adobe Campaign Classic*<br /> **> SDK Extension**<br /> *AEPNotificationContent 5.0.0+* | Shows a series of three (3) to five (5) images that scroll on and off the side of the notification. <br /><br />Available in `manual` mode (user must click a button to scroll carousel items) and `auto` mode (carousel items scroll every five seconds). | ![gif of sample carousel notification](./../templates/assets/carousel.gif) |
-| [Timer](./timerl) | **Android** - coming soon<br /><br />**iOS**<br /> **> Product**<br />*Adobe Campaign Classic*<br /> **> SDK Extension**<br /> *AEPNotificationContent 5.0.0+* | Notification containing title, body, and image.  Configure a countdown timer which upon expiry can cause a new title, body, and image to be shown. | ![gif of sample timer notification](./../templates/assets/timer.gif) |
+| [Basic](./basic) | **Android**<br />**> Product**<br /> *Adobe Campaign Classic*<br /> **> SDK Extension**<br /> *CampaignClassic 3.1.0+* <br /><br />**iOS**<br /> **> Product**<br />*Adobe Campaign Classic*<br /> **> SDK Extension**<br /> *AEPNotificationContent 5.0.0+* | A basic push notification template. <br />Allows setting a title, message body, and optional image, action buttons, and click-through URL. <br /><br />For **Android only**, it also supports a "remind me later" functionality which will schedule the notification to be re-delivered at a later time. | ![gif of sample android basic notification](./../templates/assets/android_basic.gif)<br />![gif of sample basic notification](./../templates/assets/basic.gif) |
+| [Carousel](./carousel) | **Android**<br />**> Product**<br /> *Adobe Campaign Classic*<br /> **> SDK Extension**<br />  *CampaignClassic 3.1.0+* <br /><br />**iOS**<br /> **> Product**<br />*Adobe Campaign Classic*<br /> **> SDK Extension**<br /> *AEPNotificationContent 5.0.0+* | Shows a series of three (3) to five (5) images that scroll on and off the side of the notification. <br /><br />Available in `manual` mode (user must click a button to scroll carousel items) and `auto` mode (carousel items scroll every five seconds). | ![gif of sample android manual carousel notification](./../templates/assets/android_manual_carousel.gif)<br />![gif of sample carousel notification](./../templates/assets/carousel.gif) |
+| [Timer](./timer) | **Android**<br />**> Product**<br /> *Adobe Campaign Classic*<br /> **> SDK Extension**<br />  *CampaignClassic 3.1.0+* <br />**iOS**<br /> **> Product**<br />*Adobe Campaign Classic*<br /> **> SDK Extension**<br /> *AEPNotificationContent 5.0.0+* | Notification containing title, body, and image.  Configure a countdown timer which upon expiry can cause a new title, body, and image to be shown. | ![gif of sample android timer notification](./../templates/assets/android_timer.gif)<br />![gif of sample timer notification](./../templates/assets/timer.gif) |
+| [Input Box](./input-box) | **Android**<br />**> Product**<br /> *Adobe Campaign Classic*<br /> **> SDK Extension**<br />  *CampaignClassic 3.1.0+* <br /> | Notification containing title, body, and image. The notification contains a user input field which can receive a user text input that is sent back to the app via intent. After the input is received, the notification can be updated with a feedback image and/or feedback message. | ![gif of sample input box notification](./../templates/assets/input_box.gif) |
+| [Zero Bezel](./zero-bezel) | **Android**<br />**> Product**<br /> *Adobe Campaign Classic*<br /> **> SDK Extension**<br />  *CampaignClassic 3.1.0+* <br /> | Notification containing title, body, and an edge-to-edge background image which fills the notification area. | ![gif of sample zero bezel notification](./../templates/assets/zero_bezel.gif) |
+| [Product Catalog](./catalog) | **Android**<br />**> Product**<br /> *Adobe Campaign Classic*<br /> **> SDK Extension**<br />  *CampaignClassic 3.1.0+* <br /> | Notification containing a main product image which can be changed by pressing one of the three product thumbnails present on the notification. The notification also contains a call-to-action (CTA) button to redirect the app user to a specified uri. <br />Product catalog notifications have two layout styles: vertical and horizontal. The vertical layout should be used with fullscreen (4:3) aspect ratio images and the horizontal layout should be used with widescreen (16:9) aspect ratio images. | ![gif of sample product catalog notification](./../templates/assets/vertical_catalog.gif) |
+| [Rating](./rating) | **Android**<br />**> Product**<br /> *Adobe Campaign Classic*<br /> **> SDK Extension**<br />  *CampaignClassic 3.1.0+* <br /> | Notification containing title, body, and image.  The notification contains three to five customizable rating icons which can be pressed to provide a rating to the app via an intent. | ![gif of sample rating notification](./../templates/assets/rating.gif) |
+| [Multi icon](./multi-icon) | **Android**<br />**> Product**<br /> *Adobe Campaign Classic*<br /> **> SDK Extension**<br />  *CampaignClassic 3.1.0+* <br /> | Notification containing three to five icons. Each icon can be pressed to be redirected to a specified URI. The notification is persistent and will remain in the notification tray when it is interacted with. | ![gif of sample multi-icon notification](./../templates/assets/multi_icon.gif) |

src/pages/resources/reference/push-notifications/templates/input-box.md

@@ -0,0 +1,25 @@
+---
+title: Adobe Experience Platform SDK basic push template
+description: Basic push template supported by Adobe Campaign Classic mobile extension.
+keywords:
+- Adobe Campaign Classic
+- Push
+- Push Template
+- Input Box
+---
+
+import Tabs from './tabs/input-box.md'
+
+# Push template - input box
+
+A notification including a title, message body, optional image, and a user input text field.
+
+After receiving text input, an intent containing the input is dispatched to the app and a feedback received notification can be displayed if a feedback message or image is provided in the push payload.
+
+The table below shows all available properties in the respective payload for FCM (Android).
+
+<TabsBlock orientation="horizontal" slots="heading, content" repeat="1"/>
+
+FCM
+
+<Tabs query="platform=fcm&template=input-box"/>

src/pages/resources/reference/push-notifications/templates/multi-icon.md

@@ -0,0 +1,23 @@
+---
+title: Adobe Experience Platform SDK timer push template
+description: Timer push template supported by Adobe Campaign Classic mobile extension.
+keywords:
+- Adobe Campaign Classic
+- Push
+- Push Template
+- Multi Icon
+---
+
+import Tabs from './tabs/multi-icon.md'
+
+# Push template - multi icon
+
+Notification that displays three to five (3-5) image buttons with no text. Each button contains a URI to follow if the user interacts with it.
+
+The table below shows all available properties in the respective payload for FCM (Android).
+
+<TabsBlock orientation="horizontal" slots="heading, content" repeat="1"/>
+
+FCM
+
+<Tabs query="platform=fcm&template=multi-icon"/>

src/pages/resources/reference/push-notifications/templates/rating.md

@@ -0,0 +1,24 @@
+---
+title: Adobe Experience Platform SDK timer push template
+description: Timer push template supported by Adobe Campaign Classic mobile extension.
+keywords:
+- Adobe Campaign Classic
+- Push
+- Push Template
+- Rating
+---
+
+import Tabs from './tabs/rating.md'
+
+# Push template - rating
+
+A notification that allows displaying a title, text, and image, along with 3-5 image buttons that allow the user to provide "rating" feedback.
+
+After a rating is selected in the notification, an intent containing the rating is dispatched to the app.
+
+The table below shows all available properties in the respective payload for FCM (Android).
+<TabsBlock orientation="horizontal" slots="heading, content" repeat="1"/>
+
+FCM
+
+<Tabs query="platform=fcm&template=rating"/>