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 />Supported version is **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 />Supported versions are **Android SDK version 3.1.0+** and **iOS SDK version 5.0.0+**.
 
 ## Setup
 
@@ -22,3 +22,28 @@ 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 - it is still recommended to test a notification prior to sending it.
+
+**Android**
+
+|        **Android Image type in notification payload**        |       **ASPECT RATIOS**       | **IMAGE SIZE RANGE** | **SUPPORTED FILE TYPES** | FILE SOURCE                          |
+| :----------------------------------------------------------: | :---------------------------: | :------------------: | :----------------------: | ------------------------------------ |
+| adb_image (used as the main image in basic, input box, remind later, timer, and zero bezel notifications) | 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                           |
+
+**iOS**
+
+|    **iOS Image type in notification payload**     | **ASPECT RATIOS** | **IMAGE SIZE RANGE** | **SUPPORTED FILE TYPES** | FILE SOURCE |
+| :-----------------------------------------------: | :---------------: | :------------------: | :----------------------: | ----------- |
+| adb_media (used in basic and timer notifications) |        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  |

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

@@ -12,7 +12,7 @@ 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. <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.
 
 Templates below show all available properties in their respective payloads for FCM (Android) and APNS (iOS).
 <br />

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

@@ -0,0 +1,29 @@
+---
+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.<br />
+
+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.<br />
+
+A call-to-action is provided to specify an action to take when the user interacts with a product.<br />
+
+The table below shows all available properties in the respective payload for FCM (Android).
+
+<br />
+
+<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,15 @@ 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. <br /><br />Supported versions are **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](./timerl) | **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 user text input to be sent to the app via intent. After 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 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 4:3 aspect ratio images and the horizontal layout should be used with wide screen 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<br />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.<br />
+
+The table below shows all available properties in the respective payload for FCM (Android).
+
+<br />
+
+<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.<br />
+
+The table below shows all available properties in the respective payload for FCM (Android).
+<br />
+<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,25 @@
+---
+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.<br />
+
+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).
+<br />
+<TabsBlock orientation="horizontal" slots="heading, content" repeat="1"/>
+
+FCM
+
+<Tabs query="platform=fcm&template=rating"/>