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

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

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

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

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

Реализация

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

Пример

Wavesend.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'
    }
});

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

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

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

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

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

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

Темы

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

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

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

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

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

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

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

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

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