Перейти к содержанию
Руководства пользователяПоддержка Запросить демо Войти
Pushwoosh.com

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

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

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

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

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

Реализация

Anchor link to

Чтобы включить и настроить настраиваемое всплывающее окно подписки, используйте следующий скрипт при инициализации 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'
    }
});

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

Anchor link to

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

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

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

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

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

Темы

Anchor link to

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

Тема 'Material'

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

Тема 'Topbar'

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

Anchor link to

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

// Выполняется, когда настраиваемое всплывающее окно подписки загружено и готово к показу
// Примечание: это событие НЕ сработает, если пользователь уже подписан на 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");
});