# Кнопка подписки на Push-уведомления

Получите больше подписчиков на Push-уведомления и улучшите пользовательский опыт! Настройте пользовательскую кнопку подписки на вашем сайте, чтобы увеличить коэффициент подписки (opt-in rate). Вместо того чтобы автоматически показывать новичкам стандартный диалог, объясните ценность ваших сообщений и предложите подписаться на Push-уведомления, когда пользователи будут готовы.\
Всего за **два** простых шага у вас будет готовая и работающая пользовательская кнопка подписки на Push-уведомления!

## 1. Реализация кнопки подписки Web SDK

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

Убедитесь, что вы внедрили Pushwoosh Web SDK на своем сайте. Для этого, пожалуйста, следуйте нашему [руководству](/ru/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, вам необходимо указать `fcm_sender_id` в файле `manifest.json`; для Safari укажите `safariWebsitePushID`.
</Aside>

## 2. Настройка кнопки

Чтобы кнопка соответствовала внешнему виду вашего сайта, настройте ее дизайн! Вы можете изменить такие параметры, как цвет колокольчика, его положение, границу и тень; кроме того, можно изменить тексты всплывающих подсказок (tooltip texts).

```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">

Чтобы максимально увеличить коэффициент подписки на Push-уведомления, убедитесь, что преимущества подписки очевидны для пользователей. Измените текст `needSubscribe`, чтобы он объяснял ценность ваших сообщений, и люди будут подписываться на уведомления!
</Aside>