Design Web Push Apps

Your first step in developing Web Push apps that work with Oracle Responsys is to gather the design requirements. You'll work with the Responsys Account Admin and the Marketers to define the following:

  • Web Push Channel List - Work with the Marketing team and Responsys Account Admin to define the “match key”. This should ideally be the “user identifier” that your end users use to log in to your Website (for example: Email Address, Mobile Number, or Customer Id).

  • Web Push App Icons and Badges - Design how your Web Push Notifications will appear to end users.

More details are provided below.

Designing the Visual Appearance of Web Push Notifications

The visual appearance of Web Push Notifications varies by browser and operating system. Below is an example of how Web Push Notifications appear to end users on the following platforms:

  • Chrome on Windows 10

  • Chrome on Android

  • Chrome on macOS

Here are some terms to familiarize yourself with. These are used in the screen-shots below.

  • Icon: A small image icon that identifies Notifications from the Website. Defined when creating your Web Push App's Platform, see Adding Platforms to learn more.

  • Badge: A small badge to identify the Website, displayed only on Android devices. Specified during Web Push App Platform creation, see Adding Platforms to learn more.

  • Big Images: A large image that gives end users a preview of the content available on the website after they click the Web Push Notification. Defined when creating the Web Push Campaign in Responsys.

  • Action Buttons: Buttons that enable end users to interact with Web Push Notifications. Defined when creating the Web Push Campaign in Responsys.

Windows 10

An image of Windows 10

Windows 10 Action Center

An image of windows 10 action center

Android

Notification Bar

An image of android notification bar

Lock screen

An image of android lock screen

Notification

An image of android notification

macOS

An image of Mac OS