Web Message Inbox
This guide refers to Message Inbox integration into your website
Prolong the effect of your campaigns with Message Inbox for websites!
Being displayed at any time the browser is launched, web push notifications allow you to interact with your customers when they are surfing the web or doing their work on a desktop. But sometimes users don't pay enough attention to push messages and cannot make a decision right at the moment.
By keeping web push notifications in Web Message Inbox, you let users who missed (or dismissed) your message return to your website and re-read the message whenever they prefer. Store messages in Message Inbox while they are valid to give customers time to think your offers over. Integrate Web Inbox into your website with Web Push SDK 3.0 to keep customers informed!
Check out Message Inbox in seconds!
To make this powerful tool easy to try out, we've implemented it in our Push On website. Follow the guide to start exploring Web Message Inbox.
Here's a typical workflow with InboxMessages:
Step | Method |
Page load | |
Synchronizing messages with the server | InboxMessagesModel.updateMessages
Executed while the SDK is initialized |
Deleting outdated messages | InboxMessagesModel.updateMessages
Executed while the SDK is initialized |
Receiving the number of unread messages to update a badge | Pushwoosh.pwinbox.unreadMessagesCount
Executed manually (after the onUpdateInboxMessagesevent triggers) |
Loading messages to be displayed in Inbox | Pushwoosh.pwinbox.loadMessages
Executed manually (after the onUpdateInboxMessagesevent triggers) |
Marking messages got in the viewport as read | Pushwoosh.pwinbox.readMessagesWithCodes
Executed manually |
Performing an action assigned to the message opened | Pushwoosh.pwinbox.performActionForMessageWithCode
Executed manually |
Deleting messages by click on a delete icon or swipe-right a message | Pushwoosh.pwinbox.performActionForMessageWithCode
Executed manually |
onUpdateInboxMessages
// Executed after the Inbox is updated automatically while the page is loading.
Pushwoosh.push(['onUpdateInboxMessages', function(api, pwinbox) {
pwinbox.loadMessages().then(function(messages) {
console.log('EVENT: onUpdateInboxMessages', messages);
});
}]);
onPutNewMessageToInboxStore
// Executed by ServiceWorker after the Inbox Message is received and saved to indexedDB.
Pushwoosh.push(['onPutNewMessageToInboxStore', function(api, message) {
console.log('EVENT: onPutNewMessageToInboxStore', message);
}]);
WebSDK InboxMessagesPublic module presents a public interface to implement Web Inbox.
Model
type TInboxMessageTypePlain = 0;
type TInboxMessageTypeRichmedia = 1;
type TInboxMessageTypeURL = 2;
type TInboxMessageTypeDeeplink = 3;
type TInboxMessageType = TInboxMessageTypePlain // depends on action_params
| TInboxMessageTypeRichmedia
| TInboxMessageTypeURL
| TInboxMessageTypeDeeplink;
interface IInboxMessagePublic {
code: string; // inbox_id
title: string; // title
message: string; // body
imageUrl: string; // image
sendDate: string; // send_date
type: TInboxMessageType; // depends on action_params
isRead: boolean; // true if status is "read" or "open"
link: string; // Deeplink | URL | "/"
isActionPerformed: boolean; // true if status is "open"
}
Last modified 6mo ago