# Web 收件箱小组件

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

## 前提条件

要为网站集成消息收件箱，请遵循[指南](/zh/developer/guides/message-inbox/web-message-inbox/)。

## 集成小组件

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

```txt title="示例"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox'
  }
}]);
```

### 触发器

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

<img src="/web-push-notifications-web-inbox-widget-1.webp" alt=""/>

### 定位

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

```txt title="示例"
Pushwoosh.push(['init', {

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

默认情况下，`inboxWidget` 应放在闭合的 \</body> 标签之前。
如下例所示，在页面的任何位置渲染小组件：

```txt title="示例"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {

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

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

## 自定义小组件

### 自定义文本

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

```txt title="示例"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    title: 'Inbox',                                 // 小组件标题
    emptyInboxTitle: 'You\'re all caught up',       // 空收件箱小组件标题
    emptyInboxText: 'There are no new messages. Stay tuned!'    // 空收件箱小组件文本
  }
}]);
```

结果如下所示：

<img src="/web-push-notifications-web-inbox-widget-2.webp" alt=""/>

### 自定义外观

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

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

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

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

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

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

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

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

## API

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

```txt title="示例"
Pushwoosh.pwinboxWidget.toggle(open?: boolean);
```