Web 收件箱小组件

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

前提条件

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

集成小组件

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

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

触发器

要渲染小组件，您应该为小组件指定一个触发器元素。页面上的任何 DOM 元素都可以作为触发器。将其 ID 指定为 “pwInbox”，或在初始化 SDK 时为 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',                                 // 小组件标题
    emptyInboxTitle: 'You\'re all caught up',       // 空收件箱小组件标题
    emptyInboxText: 'There are no new messages. Stay tuned!'    // 空收件箱小组件文本
  }
}]);

结果如下所示：

自定义外观

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

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    bgColor: '#ffffff',         // 小组件背景
    borderColor: 'transparent', // 小组件边框颜色
    borderRadius: 4,            // 小组件边框半径 (px)
    widgetWidth: 350,           // 小组件宽度 (px)
    zIndex: 100                 // z-index
  }
}]);

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

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    badgeBgColor: '#ff4c00',    // 徽章颜色
    badgeTextColor: '#ffffff'   // 徽章文本颜色
  }
}]);

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

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    textColor: '#333333',                       // 文本颜色
    fontFamily: 'Helvetica, Arial, sans-serif', // 字体
    messageTitleColor: '#7a7a7a',               // 消息标题颜色
    timeTextColor: '#c4c4c4',                   // 时间戳文本颜色
    emptyInboxTitleColor: '#333333',            // 空收件箱标题颜色
    emptyInboxTextColor: '#7a7a7a'              // 空收件箱文本颜色
  }
}]);

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

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

API

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

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