Web Inbox Widget
How to integrate the out-of-the-box website widget for inbox messages
Prerequisites
Overview
Web Message Inbox being integrated into your website increases conversions drastically. A ready-to-use Web Inbox Widget is out of the box subscribed to all methods needed to communicate with users. Just integrate the widget into your website and customize its appearance to fit your brand.
Integrating widget
When initializing Pushwoosh WebSDK, add the
inboxWidget parameter:Example
1
Pushwoosh.push(['init', {
2
...,
3
inboxWidget: {
4
enable: true,
5
triggerId: 'pwInbox'
6
}
7
}]);
Copied!
Trigger
To render the widget, you should specify a trigger element for the widget. Any DOM-element on the page could be the trigger. Specify its ID as “pwInbox” or assign any custom ID to the
triggerId parameter when initializing SDK.
When WebSDK is initialized, the unread messages badge displays on the trigger element. Once the trigger element is tapped, the widget appears on the page.
Positioning
By default, the widget is located in the opposite direction from the screen border closest to the trigger element.
You can set the widget’s position through configuration params:
Example
1
Pushwoosh.push(['init', {
2
...,
3
inboxWidget: {
4
enable: true,
5
triggerId: 'pwInbox',
6
position: 'top'
7
}
8
}]);
Copied!
By default, the
inboxWidget should be placed before the closing </body> tag.
Render the widget anywhere on the page as shown in the example below:Example
1
Pushwoosh.push(['init', {
2
...,
3
inboxWidget: {
4
enable: true,
5
triggerId: 'pwInbox',
6
appendTo: '.widget-parent-element-class'
7
}
8
}]);
Copied!
Search for a parent element is performed by querySelector, so it needs clear specification of a class, id, or element.
Customizing widget
Customizing texts
To customize widget text, add
emptyInboxTitle and emptyInboxText parameters:Example
1
Pushwoosh.push(['init', {
2
...,
3
inboxWidget: {
4
enable: true,
5
triggerId: 'pwInbox',
6
title: 'Inbox', // widget title
7
emptyInboxTitle: 'You\'re all caught up', // empty inbox widget title
8
emptyInboxText: 'There are no new messages. Stay tuned!' // empty inbox widget text
9
}
10
}]);
Copied!
The result looks like this:
Customizing appearance
To customize the widget's appearance, use the following parameters:
Example
1
Pushwoosh.push(['init', {
2
...,
3
inboxWidget: {
4
enable: true,
5
triggerId: 'pwInbox',
6
bgColor: '#ffffff', // widget background
7
borderColor: 'transparent', // widget border color
8
borderRadius: 4, // widget border radius (px)
9
widgetWidth: 350, // widget width (px)
10
zIndex: 100 // z-index
11
}
12
}]);
Copied!
Unread messages count badge can be customized as follows:
Example
1
Pushwoosh.push(['init', {
2
...,
3
inboxWidget: {
4
enable: true,
5
triggerId: 'pwInbox',
6
badgeBgColor: '#ff4c00', // badge color
7
badgeTextColor: '#ffffff' // badge text color
8
}
9
}]);
Copied!
To customize text properties, add the following code:
Example
1
Pushwoosh.push(['init', {
2
...,
3
inboxWidget: {
4
enable: true,
5
triggerId: 'pwInbox',
6
textColor: '#333333', // text color
7
fontFamily: 'Helvetica, Arial, sans-serif', // font
8
messageTitleColor: '#7a7a7a', // messages title color
9
timeTextColor: '#c4c4c4', // timestamp text color
10
emptyInboxTitleColor: '#333333', // empty inbox title color
11
emptyInboxTextColor: '#7a7a7a' // empty inbox text color
12
}
13
}]);
Copied!
Lastly, you can specify the icon for empty inbox:
Example
1
Pushwoosh.push(['init', {
2
...,
3
inboxWidget: {
4
enable: true,
5
triggerId: 'pwInbox',
6
emptyInboxIconUrl: 'https://pushon.pushwoosh.com/images/icon-empty-inbox.png' // URL path to an icon
7
}
8
}]);
Copied!
API
To open or close the widget, use the following API method:
Example
1
Pushwoosh.pwinboxWidget.toggle(open?: boolean);
Copied!