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

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

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

Чтобы отобразить кнопку на вашем сайте, пожалуйста, добавьте следующий код в параметры инициализации Pushwoosh Web SDK:

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

Убедитесь, что вы отключили autoSubscribe при настройке кнопки!

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

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

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',
    }
  }
}]);