Displaying a Feed Notification

Feed Notifications

A Pulsate Feed Notification is normally rendered in a list or 'Feed'. This Feed is normally rendered on a dedicated page, access by clicking or tapping on a dedicated navigation link, button or icon. The Feed can also be accessed by clicking a Call to Action on another notification type (i.e. In App Notification).

For Feed Notifications, you should consider the following:

1. Where you want the User to be able to access the Feed Notification from
2. How you will display the Unread Notification count
3. How you will render a list or Feed of Feed Notifications

To allow Users to access the Feed, Pulsate normally recommend the use of either

1. A dedicated Text Menu Item on your primary or secondary navigation
2. A Floating Action Button
3. An Icon Menu Item in your primary or secondary navigation

Retrieving a Feed Notification from Pulsate

Once you have decided on the above, you will need to retrieve a Feed Notification from Pulsate.

You can do this by calling the Pulsate API each time your User loads the Feed Notification's page. The Pulsate Feed API implements paging, so you will need to consider this when designing and architecting this page.

📘

Pulsate Feed API Documentation

You can find the relevant documentation at https://docs.pulsatehq.com/v2.9/reference/feed-get

🚧

Remember to handle Paging logic

The Pulsate Feed implement paging logic. Remember to check for additional items in the Pulsate Feed by checking the paging attributes in the Feed API

Rendering a Feed

A Feed is made up of an array of Feed Notifications. The Feed will contain the following components

• inbox_items: An array of Feed Notification Items
• total_unread: The total number of unread Feed Notification Items. This can be used to indicate the number of unread Feed Notifications to the User in your Link, Icon or Floating Action Button

Rendering a Feed Notification

A Feed Notification is made up of multiple different components. Each component contains the following basic attributes

• guid: String
  A unique identifier for this Feed Item
• campaign_guid: String
  A unique identifier for the Campaign this Feed Item belongs to
• is_campaign_unread: Boolean
  A flag indicating if this Campaign has been read by the User
• front: Notification
  A complex Notification type object
• back: Notification
  A complex Notification type object
• last_interaction_at: Timestamp
  A Unix timestamp indicating the last time the User interacted with this Campaign/Feed Item
• expiry_at: Timestamp
  A Unix timestamp indicating the time a Feed Item is to expire from the User's device (0 if not time is set)
• type: Enum(String)
  Can be on of card or talk (deprecated)

Front and Back of a Feed Post

Each Feed Notification contains a front and optionally a back component. Both of these components are of type Notification

The Front of the Feed Post should be rendered within a scrollable Feed. Each Feed Post should be visually distinctive from the next, in that it should be clear that they are not the same Feed Post. For example, you could put a horizontal separator between each Feed Post, or render a Feed Post in such a manner that the content of each Feed Post is self contained and does not relate to other Feed Posts.

The optional Back of the Feed Post should be rendered as a full screen modal.

Details on how to render each component of both the Front and Back of a Feed Post are available in the Notification Objects section.

Sample of a Feed Notification

The below image is a sample of how to render an In App Notification. While the below sample demonstrators rendering an In App Notification on a mobile device, the same structure can be used responsively to render on a Desktop or Tablet based device.

Front of a Feed Notification

The below image renders the following components in the order demonstrated below. As documented above, each component should be rendered based on the position attribute of the Notification.

1. Personal Message
2. Image
3. Headline
4. Text
5. Call To Action

Back of a Feed Notification

The below image renders the following components in the order demonstrated below. As documented above, each component should be rendered based on the position attribute of the Notification.

1. Image
2. Headline
3. Text
4. Table
5. Call To Action