Raven In-app SDK lets you add a notification center in your angular web or mobile app.
Attribute | Purpose | Examples |
---|---|---|
userId | Unique identifier of the user opening the notification center | |
appId | Raven App ID. Go to Raven dashboard > Settings > AppID | |
signature | Unique signature generated for the user as described here | |
onClickNotification | Method that handles notification click. Args: (clickAction, customData). ClickAction string and CustomData map will be provided in the template and passed to the handler. Use clickAction to identify what action to perform on click and customData to pass any additional data that might be useful to perfor the click action. | (clickAction, customData) => { if (clickAction === "OPEN_ORDER_PAGE") { open("/orders", customData["orderId"])}} |
color | This is your primary color. It will get applied to the buttons and other UI components in the inapp center | ’red’, ‘#FF0000’, ‘rgb(255,0,0)’ (only strings) |
indicatorType | This attribute accepts only two values i.e ‘dot’, ‘count’. The ‘dot’ will show a dot on the bell icon whenever a new notification comes and the ‘count’ will show the count of new notifications. | ‘dot’, ‘count’ (only strings) |
fontStyle | Custom font family for the inapp center. Default will take your system font. | ‘Times’, ‘Courier’ etc (only strings) |
displayStyle | displayStyle can be either ‘drawer’ or ‘bubble’ or ‘fullScreen’. Bubble displays the notification list inside a popover. Drawer displays the notification list as full height on the right or left side of the screen depending on the position value. FullScreen comes with no bell-icon and inherits height and width from parent. | ‘drawer’,‘bubble’ and ‘fullScreen’ (only strings) |
position | If the displayStyle is ‘drawer’ then position accepts two values, i.e ‘left’ and ‘right’. If the display style is ‘bubble’ then position accepts three values, i.e ‘left’, ‘center’ and ‘right’. | ‘left’, ‘right’, ‘center’ (only strings) |
header | header can be either true or false. You can pass true, if you want the notification header which has unread count, refresh button, mark all read and close button. You can pass false, if you don’t want the notification header. | true or false (boolean) |