The Siren JS SDK for In-App Notifications enhances Siren's capabilities by providing users with advanced notification management functionalities within their javascript applications. This feature ensures a seamless integration process, robust error handling, and compatibility with Siren's existing ecosystem
You can install the js sdk from npm
npm install @sirenapp/js-sdkor from yarn
yarn add @sirenapp/js-sdkor from cdn
<script src="https://siren-js.sirenapp.io/siren-js-umd-sdk.js"></script>Initialize the SDK by creating a class instance as follows
import Siren from "@sirenapp/js-sdk"
const sirenInstance = new Siren({
token: "your-user-token",
recipientId: "your-recipient-id",
onError: (error) => {
# error callback function
});
actionCallbacks:{
onEventReceive?: (response: NotificationsApiResponse, eventType: 'NOTIFICATIONS'| 'UNVIEWED_COUNT') => {
# callback function to receive data
};
onStatusChange?: (status: 'SUCCESS' | 'FAILED' | 'PENDING') =>{
# callback function triggered when token verification status changes
}
}All the exposed methods can be accessed using sirenInstance object. For example,to fetch all notifications,
const response = await sirenInstance.fetchAllNotifications({ page: 0, size: 10 })Siren constructor accepts the following arguments
| Property | Description | Type | Optional |
|---|---|---|---|
| token | Siren user token | string | false |
| recipientId | Siren recipient id | string | false |
| onError | To receive error call backs when there is any error | function | false |
| actionCallbacks | An object used to specify the callbacks triggered upon fetching the notifications or the unviewed count dynamically | object | true |
This method verifies the validity of the given tokens (recipientId and userToken).This method is called automatically while creating the instance . Once the verification is successful, the remaining exposed methods can be accessed.
await sirenInstance.verifyToken();This method retrieves the count of unviewed notifications.
const { unviewedCount } = await sirenInstance.fetchUnviewedNotificationsCount()This method retrieves list of notifications in a paginated manner.
const notifications = await sirenInstance.fetchAllNotifications({ page: 0, size: 15, start: '', end: '', isRead: false });| Argument | Description | Type | Mandatory | Default |
|---|---|---|---|---|
| page | Current page | number | false | 0 |
| size | Number of items fetched | number | false | 10 |
| start | Accepts an ISO date string to filter notifications created after the specified date. By default, only the first 20 notifications will be fetched eg: 2024-02-19T06:37:33.792+00:00 |
string | false | null |
| end | Accepts an ISO date string to filter notifications created before the specified date. By default, only the first 20 notifications will be fetched eg: 2024-02-19T06:37:33.792+00:00 |
string | false | null |
| isRead | Filter to fetch read or unread notifications. If not specified, it retrieves both read and unread notifications | boolean | false | null |
interface Notifications = {
id: string;
createdAt?: string;
message: {
channel: string;
header: string;
subHeader: string;
body: string;
actionUrl: string;
avatar: {
imageUrl: string;
actionUrl: string | null;
}
additionalData: string;
}
requestId: string;
isRead: boolean;
}[]By specifying the parameter eventType as either NOTIFICATIONS or UNVIEWED_COUNT, this method triggers the real-time retrieval of notifications or the count of unviewed notifications. If NOTIFICATIONS is selected, further parameters (params) can be provided for additional customization or filtering
sirenInstance.startRealTimeFetch({ eventType: NOTIFICATIONS, params:{ page: 0, size: 15, start: '', end: '', isRead: false }});
sirenInstance.startRealTimeFetch({ eventType: UNVIEWED_COUNT });Below are the accepted filters for notifications
| Argument | Description | Type | Mandatory | Default |
|---|---|---|---|---|
| page | Represents the current page | number | false | 0 |
| size | The number of items to be fetched in a single call | number | false | 10 |
| start | Accepts an ISO date string to filter notifications created after the specified date. By default, only the first 20 notifications will be fetched | string | false | null |
| end | Accepts an ISO date string to filter notifications created before the specified date. By default, only the first 20 notifications will be fetched | string | false | null |
| isRead | Filter to fetch read or unread notifications. If not specified, it retrieves both read and unread notifications | number | false | null |
By specifying the parameter eventType as either NOTIFICATIONS or UNVIEWED_COUNT, this method stops the real-time retrieval of notifications or the count of unviewed notifications.
sirenInstance.stopRealTimeFetch(NOTIFICATIONS);
sirenInstance.stopRealTimeFetch(UNVIEWED_COUNT);This method marks the notification as read. It accepts a notification id as an argument.
await sirenInstance.markAsReadById("your-notification-id");This method marks the notifications as read till the given date.
It accepts an ISO date string as an argument.
await sirenInstance.markAsReadByDate("2011-10-05T14:48:00.000Z");This method deletes a notification. It accepts a notification id as an argument.
await sirenInstance.deleteById("your-notification-id");This method deletes the notifications till the given date.
It accepts an ISO date string as an argument
await sirenInstance.deleteByDate("2011-10-05T14:48:00.000Z");This method marks the notifications as viewed till the given date. This sets the unviewed count as 0
It accepts an ISO date string as an argument
await sirenInstance.markAllAsViewed("2011-10-05T14:48:00.000Z");