Настраиваемое всплывающее окно подписки

Настраиваемое всплывающее окно подписки — это всплывающее окно, которое отображается на веб-странице и предлагает пользователям подписаться на web push-уведомления. Оно реализуется с помощью Pushwoosh WebSDK и позволяет обойти ограничения браузера на отображение нативного запроса на подписку. Нативное всплывающее окно подписки может быть показано конкретному пользователю только дважды. Если пользователь не разрешает push-уведомления и дважды подряд закрывает нативное всплывающее окно подписки, оно больше не будет отображаться, а push-уведомления будут считаться заблокированными. Настраиваемое всплывающее окно подписки, в свою очередь, может отображаться столько раз, сколько необходимо, пока пользователь явно не подпишется на push-уведомления или не заблокирует их.

Настраиваемое всплывающее окно подписки может содержать любой текст, объясняющий преимущества подписки на push-уведомления, и две настраиваемые кнопки — одну для опции «Спросить позже» и одну для «Подписаться».

Как только пользователь нажимает кнопку «Подписаться», появляется нативное всплывающее окно подписки.

Когда пользователь нажимает кнопку «Спросить позже» или просто закрывает окно, настраиваемое всплывающее окно подписки появится снова через указанное время (по умолчанию — через неделю; задержка для повторного показа может быть настроена с помощью параметра retryOffset).

Реализация

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

Pushwoosh.push('init', {
    // . . .,
    subscribePopup: {
        enable: true,                      // (boolean) активация всплывающего окна
        text: 'Текст во всплывающем окне', // (string) текст для отображения во всплывающем окне
        confirmSubscriptionButtonText: 'Подписаться', // (string) пользовательский текст для кнопки «Подписаться»

        manualToggle: false,               // (boolean) ручное управление показом всплывающего окна
        delay: 60,                         // (integer) задержка между загрузкой страницы и появлением всплывающего окна
        retryOffset: 604800,               // (integer) смещение в секундах для повторного отображения всплывающего окна

        iconUrl: 'https://...',            // (string) URL пользовательской иконки
        iconAlt: 'Описательный текст для вашей иконки', // (string) ALT-текст для иконки
        overlay: false,                    // (boolean) включает наложение на страницу при отображении всплывающего окна
        position: 'top',                   // (string) положение на странице. Возможные значения: 'top' | 'center' | 'bottom’
        mobileViewMargin: '10px',          // (string) отступ для мобильного вида

        bgColor: '#fff',                   // (string) цвет фона всплывающего окна
        borderColor: 'transparent',        // (string) цвет рамки всплывающего окна
        boxShadow: '0 3px 6px rgba(0,0,0,0.16)', // (string) тень всплывающего окна

        textColor: '#000',                 // (string) цвет текста всплывающего окна
        textSize: 'inherit',               // (string) размер текста всплывающего окна
        textWeight: 'normal',              // (string) насыщенность (жирность) текста всплывающего окна
        fontFamily: 'inherit',             // (string) шрифт текста всплывающего окна

        subscribeBtnBgColor: '#4285f4',         // (string) цвет фона кнопки «Подписаться»
        subscribeBtnTextColor: '#fff',          // (string) цвет текста кнопки «Подписаться»
        subscribeBtnTextWeight: 'bold',         // (string) насыщенность (жирность) текста кнопки «Подписаться»
        subscribeBtnBorderColor: 'transparent', // (string) цвет рамки кнопки «Подписаться»
        subscribeBtnBorderRadius: '4px',        // (string) радиус скругления рамки кнопки «Подписаться»

        askLaterButtonText: 'Не сейчас',        // (string) пользовательский текст для кнопки «Спросить позже»
        askLaterBtnBgColor: 'transparent',      // (string) цвет фона кнопки «Спросить позже»
        askLaterBtnTextColor: '#000',           // (string) цвет текста кнопки «Спросить позже»
        askLaterBtnBorderColor: 'transparent',  // (string) цвет рамки кнопки «Спросить позже»
        askLaterBtnBorderRadius: '4px',         // (string) радиус скругления рамки кнопки «Спросить позже»
        askLaterBtnTextWeight: 'normal',        // (string) насыщенность (жирность) текста кнопки «Спросить позже»

        theme: 'material',               // (string) тема всплывающего окна, возможные значения: 'material' | 'topbar'
        viewport: 'desktop'              // (string) целевое отображение (viewport), возможные значения: 'desktop' | 'mobile'
    }
});

Доступ к экземпляру настраиваемого всплывающего окна подписки

Экземпляр настраиваемого всплывающего окна подписки доступен через Pushwoosh.moduleRegistry.subscribePopup.

Примечание: Этот экземпляр становится доступным только после срабатывания события subscribe-popup-ready. Однако он не будет доступен, если пользователь уже подписан на push-уведомления.

Экземпляр предоставляет метод toggle(), который позволяет вручную показывать или скрывать всплывающее окно:

// Показать или скрыть настраиваемое всплывающее окно подписки вручную
Pushwoosh.moduleRegistry.subscribePopup.toggle(); // Переключает видимость
Pushwoosh.moduleRegistry.subscribePopup.toggle(true); // Показывает всплывающее окно
Pushwoosh.moduleRegistry.subscribePopup.toggle(false); // Скрывает всплывающее окно

Это дает больше контроля над поведением всплывающего окна прямо из вашего кода.

Темы

По умолчанию всплывающее окно подписки использует тему ‘material’ и при отображении перекрывает часть экрана, скрывая часть контента от посетителя сайта.

Чтобы всплывающее окно подписки не скрывало ценный контент, используйте тему ‘topbar’, чтобы оно отображалось в виде узкой полосы в верхней части экрана.

События настраиваемого всплывающего окна подписки

Для отслеживания взаимодействий с настраиваемым всплывающим окном подписки доступны следующие события:

// Выполняется, когда пользовательское всплывающее окно подписки загружено и готово к показу
// Примечание: это событие НЕ сработает, если пользователь уже подписан на push-уведомления.
Pushwoosh.addEventHandler('subscribe-popup-ready', function() {
  console.log("Сработало событие: subscribe-popup-ready");
});

// Выполняется, когда отображается пользовательское всплывающее окно подписки
Pushwoosh.addEventHandler('subscribe-popup-show', function() {
  console.log("Сработало событие: subscribe-popup-show");
});

// Выполняется, когда пользователь нажимает кнопку 'Подписаться' во всплывающем окне
Pushwoosh.addEventHandler('subscribe-popup-accept', function() {
  console.log("Сработало событие: subscribe-popup-accept");
});

// Выполняется, когда пользователь нажимает кнопку 'Спросить позже' во всплывающем окне
Pushwoosh.addEventHandler('subscribe-popup-decline', function() {
  console.log("Сработало событие: subscribe-popup-decline");
});

// Выполняется, когда всплывающее окно скрывается
Pushwoosh.addEventHandler('subscribe-popup-hide', function() {
  console.log("Сработало событие: subscribe-popup-hide");
});