# 推送订阅按钮

获取更多推送订阅者并改善用户体验！在您的网站上设置自定义订阅按钮以提高选择加入率。与其自动向新用户显示标准对话框，不如解释您的消息价值，并在用户满意时提示他们订阅推送通知。
只需**两**个简单步骤，您就可以拥有一个准备就绪并正常工作的自定义推送订阅按钮！

## 1. 实现 Web SDK 订阅按钮

<Aside type="caution">
#### Pushwoosh Web SDK

请确保您已在网站上实现 Pushwoosh Web SDK。为此，请遵循我们的[指南](/zh/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/#integration)。
</Aside>

要在您的网站上显示按钮，请将以下代码添加到 Pushwoosh Web SDK 的初始化参数中：

```javascript
Pushwoosh.push(['init', {
  //...
  autoSubscribe: false,
  subscribeWidget: {
    enable: true,
  }
}]);
```

设置按钮时，请务必禁用 `autoSubscribe`！

<Aside type="note">
要使按钮对使用 Chrome 和 Mozilla 的访问者可见，您需要在 `manifest.json` 文件中指定 `fcm_sender_id`；对于 Safari，请指定 `safariWebsitePushID`。
</Aside>

## 2. 自定义按钮

为了使按钮与您的网站外观和风格匹配，请自定义其设计！您可以更改铃铛的颜色、位置、边框和阴影等参数；此外，还可以更改工具提示文本。

```javascript
Pushwoosh.push(['init', {
  //...
  subscribeWidget: {
    enable: true,
    position: 'bottomLeft', //possible values: ‘bottomLeft’, ‘bottomRight’, ‘topLeft’, ‘topRight’
    bgColor: '#12AE7E',
    bellColor: 'white',
    bellStrokeColor: '#08754f',
    bellButtonBorder: '1px solid #379676',
    shadow: '0px 0px 6px rgba(0, 0, 0, 0.75)',
    size: '48px',
    indent: '20px',
    zIndex: '999999',
    tooltipText: {
      successSubscribe: '您已成功订阅！',
      needSubscribe: '获取重要新闻通知！',
      blockSubscribe: '点击查看如何获取通知',
      alreadySubscribed: '您已订阅'
    },
    buttonImage: 'https://url-image.jpg',
    contentImages: {
      chrome: 'https://url-image.jpg',
      mobileChrome: 'https://url-image.jpg',
      firefox: 'https://url-image.jpg',
      opera: 'https://url-image.jpg',
      safari: 'https://url-image.jpg',
      edge: 'https://url-image.jpg',
    }
  }
}]);
```

<Aside type="tip">

为了最大限度地提高推送选择加入率，请确保订阅的好处对用户来说是显而易见的。更改 `needSubscribe` 文本，使其解释您的消息价值，人们就会订阅通知！
</Aside>