Displaying an In App Notification

Retrieving an In App Notification from Pulsate

Normally, you will receive an In App Notification, if one is available, when you call the Start Session API. As discussed in the previous step, you may choose to cache your In App Notification for display at a later time in your web application.

You may also receive an In App Notification in response to sending a Custom Event to the Pulsate API. As with Starting a Session, you should determine if it is more appropriate to render the In App Notification now, or cache it and render later.

Retrieving an In App Notification

An In App Notification is a full screen modal notification. It contains multiple components, and allows multiple actions. An In App Notification may be received when calling the Start Session API. This is discussed in the Starting a Session Section

Rendering an In App Notification

An In App Notification is made up of multiple different components. Each component contains the following basic attributes

guid: String
A unique identifier for this In App Notification
campaign_guid: String
A unique identifier for the Campaign this In App Notification belongs to
position: Enum (top | bottom)
A string indicating whether an In App Notification should be rendered at the top or bottom of the screen. Only relevant when size is set to small
size: Enum (small | large)
The size of the In App Notification. A large In App Notification should be rendered as a full screen takeover, whereas a small In App Notification should be rendered as a smaller banner, using the position attribute to determine where on the screen is rendered.
front: Notification
A complex Notification type object
created_at: Timestamp
A Unix timestamp indicating the when the campaign was created

You should refer to Notification Objects for more information on how to correctly render each component of a Notification.

Sample of an In App 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.

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.

Personal Message
Image
Headline
Text
Call To Action