Web 收件箱小部件

将 Web 消息收件箱集成到您的网站中可以显著提高转化率。开箱即用的 Web 收件箱小部件订阅了与用户通信所需的所有方法。只需将该小部件集成到您的网站中，并自定义其外观以适应您的品牌。

设置 inboxWidget.enable: true 会为访问者的设备注册收件箱投递，即使访问者尚未授予推送通知权限，因此可以触达从未订阅推送的访问者。

先决条件

要为网站集成消息收件箱，请遵循指南。

集成小部件

在初始化 Pushwoosh WebSDK 时，添加 inboxWidget 参数：

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox'
  }
}]);

触发器

要渲染小部件，您应为小部件指定一个触发元素。页面上的任何 DOM 元素都可以作为触发器。在初始化 SDK 时，将其 ID 指定为 “pwInbox” 或为 triggerId 参数分配任何自定义 ID。当 WebSDK 初始化后，未读消息徽章会显示在触发元素上。一旦点击触发元素，小部件就会出现在页面上。

定位

默认情况下，小部件位于离触发元素最近的屏幕边界的相反方向。您可以通过配置参数设置小部件的位置：

Pushwoosh.push(['init', {

  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    position: 'top'
  }
}]);

默认情况下，inboxWidget 应放置在 </body> 结束标签之前。如下例所示，在页面上的任何位置渲染小部件：

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {

    enable: true,
    triggerId: 'pwInbox',
    appendTo: '.widget-parent-element-class'
  }
}]);

父元素的搜索是通过 querySelector 执行的，因此需要明确指定类、id 或元素。

自定义小部件

自定义文本

要自定义小部件文本，请添加 emptyInboxTitle 和 emptyInboxText 参数：

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    title: 'Inbox',                                 // widget title
    emptyInboxTitle: 'You\'re all caught up',       // empty inbox widget title
    emptyInboxText: 'There are no new messages. Stay tuned!'    // empty inbox widget text
  }
}]);

结果如下所示：

自定义外观

要自定义小部件的外观，请使用以下参数：

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    bgColor: '#ffffff',         // widget background
    borderColor: 'transparent', // widget border color
    borderRadius: 4,            // widget border radius (px)
    widgetWidth: 350,           // widget width (px)
    zIndex: 100                 // z-index
  }
}]);

未读消息计数徽章可以按如下方式自定义：

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    badgeBgColor: '#ff4c00',    // badge color
    badgeTextColor: '#ffffff'   // badge text color
  }
}]);

要自定义文本属性，请添加以下代码：

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    textColor: '#333333',                       // text color
    fontFamily: 'Helvetica, Arial, sans-serif', // font
    messageTitleColor: '#7a7a7a',               // messages title color
    timeTextColor: '#c4c4c4',                   // timestamp text color
    emptyInboxTitleColor: '#333333',            // empty inbox title color
    emptyInboxTextColor: '#7a7a7a'              // empty inbox text color
  }
}]);

最后，您可以指定空收件箱的图标：

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    emptyInboxIconUrl: 'https://pushon.pushwoosh.com/images/icon-empty-inbox.png'   // URL path to an icon
  }
}]);

API

要打开或关闭小部件，请使用以下 API 方法：

Pushwoosh.pwinboxWidget.toggle(open?: boolean);