Get started with notifications
A notification card contains the following configurable areas:

A notification card, with its parts annotated
You work with the properties of the NotificationOptions
object to create or update a notification:
- Indicator: A colored area with text describing the nature of the notification.
indicator.text
indicator.color
- Header: The app’s name and icon, a timestamp, and a title.
icon
: the application icondate
: the timestamp; current date and time are used if not specified.title
the title, formatted as a headline
- Body: The details of the notification. It can be customized by using one of the following, based on the template used:
TemplateMarkdown
,body
: a string, which may contain inline Markdown formattingTemplateList
,list
: a list of string pairsTemplateCustom
,templateOptions
andtemplateData
: a custom template and specific data to populate it. For more information, see Customize notifications.
- Buttons: A row of buttons for the user to take action or dismiss the notification.
button
: A list of (at most 4) ButtonOptions for buttons to display. Refer to Buttons within a notification for details.
Create a basic notification
The following example shows how to apply basic options to generate the illustrated card:
const notification = {
indicator: {
color: “orange”,
text: “News Alert”,
},
icon: “https://cdn.openfin.co/examples/notifications/company-B.png”,
title: “US added 138K jobs; Lower than target 185K”,
body: “After more than a decade of growth, U.S. nonfarm payrolls shrunk by 701,000, and the unemployment rate rose to 4.4%...”,
buttons: [
{
title: “Read More”,
type: “button”,
cta: true,
onClick: {
window.open("https://myexample.com/news/employment”, "_blank")
}
}
]
};
create(notification);
Updated 29 days ago