Web message inbox

This guide refers to Message Inbox integration into your website

Prerequisites

Make sure you've implemented Pushwoosh Web SDK on your website. To do so, please follow our guide.

Overview

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!

See it in action!

Check out Message Inbox in seconds! To make this powerful tool easy to try out, we've implemented it on our Push On website.

Mobile Message Inbox

To implement Message Inbox for mobile platforms, please follow the Mobile Message Inbox guide.

How does it work

Here's a typical workflow with InboxMessages:

Event listeners

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);
}]);

Public module

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"
}

Public methods

Check out public methods' descriptions in the Web Push SDK 3.0 guide.