SDK

Remote Notifications

In this page you'll learn how notifications are handled in your website and what all the options at your disposal to create a great messaging experience for your users.

Please note that all the browsers, except for Safari, that support website push notifications, will need to be opened to receive notifications. Safari in MacOS will still receive notifications even when the browser is not opened at all. Users will receive notifications even if your website is not focused or opened at all, as long as the browser is running.

Receiving Notifications

When your website is opened (even when it is not focused) and a notification is received the following event will be triggered:

1
2
3
$("body").bind("notificare:didReceiveNotification", function(event, data) {
	//Update UI?
});

Please note that this event will not be triggered if your website is not opened. In most cases you will also not need to do anything when this event happens since the browser will display a native alert in the top right corner that users can click if they are interested in opening the notification. But in case you would like to update your UI, you can use this event to do so.

When a notification is displayed and a user is clicks on it, the browser will redirect them to the URL Format String you've configure Website Push to use and the following event will be triggered:

1
2
3
$("body").bind("notificare:didOpenNotification", function(event, data) {
	//Handle all the notification types
});

In this event you will obtain a notification object containing everything you need to handle the content and actions of the message.

Here's an example of how content and actions are handled in most cases:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$('body').bind("notificare:didOpenNotification", function(event, data) {


	if (data.type === 're.notifica.notification.Alert') {

		//Alert does not contain any content other than the message

	} else {
		//All the other types will additionally contain an array with content
		$.each( data.content, function( key, value ) {
			//Handle each content depending on its type
		});
	}

	//If a message contains actions you should access them like this
	if (data.actions && data.actions.length > 0) {
		$.each( data.actions, function( key, value ) {
			//Display each action accordingly
		});
	}

});

Finally consider the following example in how to handle the functionality attached to each action:

1
2
3
4
5
6
$('.action-button').on('click', function(e) {
	e.preventDefault();

	instance.notificare("handleAction", "NOTIFICATION_ID", "LABEL OF THE ACTION");

});

Inbox

With our library it's extremely easy to implement an inbox. Implementing an inbox increases considerably the engagement rate with notifications simply because messages will always be available inside your web app. To activate the inbox functionality, please follow the instructions described here.

After activating this functionality you can start implementing your inbox in any page of your website. To get all the items in the inbox you would basically invoke the following:

1
2
3
4
5
6
7
instance.notificare("fetchInbox", function(inboxItems){

	//Handle inboxItems array

}, function(error){
	//Handle error
});

Whenever a message is opened, mark as read or deleted the following event will be triggered:

1
2
3
$("body").bind("notificare:didUpdateBadge", function(event, data) {
	//Handle badge count
});

This will give you the opportunity to display an unread messages count which you can use to show a badge in your web app.

You can open each in inbox item by invoking the following method:

1
instance.notificare("openInboxItem", inboxItem);

This method will trigger the event didOpenNotification that we mentioned above. You should then handled it accordingly like explained earlier.

If you wish to mark a message as read without opening it, invoke the following method:

1
2
3
4
5
6
7
instance.notificare("markAsRead", inboxItem, function(msg){

	//Message marked as read

}, function(error){
	//Handle error
});

To remove an item from the inbox you would invoke the following method:

1
2
3
4
5
6
7
instance.notificare("removeFromInbox", inboxItem, function(msg){

	//Message is removed

}, function(error){
	//Handle error
});

Finally to remove all the items in the inbox you would do the following:

1
2
3
4
5
6
7
instance.notificare("clearInbox", function(success){

	//Handle success

}, function(error){
	//Handle error
});