@pushwoosh/web-push-subscribe-popup

SubscribePopUp

Subscription pop-up widget for Pushwoosh WebSDK. Отдельный пакет который отрисовывает попап подписки если он сконифгурирован через init параметры WebSDK.

Проект старый и часть локальной сборки теперь не актуальна, поэтому вот вам HOW TO:

1. Сходить в проект WebSDK и поменять там одну строчку в /src/subscribePopup.ts

const popup = new PWSubscribePopup(ev.detail.pw);
->
const popup = new (globalThis as any).PWSubscribePopup(ev.detail.pw) || new PWSubscribePopup(ev.detail.pw);

2. Собрать SDK командой npm run build
3. Скопировать файлы из сборки в директорию /static/ этого проекта

pushwoosh-service-worker.uncompress.js
pushwoosh-web-notifications.uncompress.js

4. В файле /config/config.js указать конфигурацию аналогичную WebSDK, serviceWorkerUrl использовать /static/pushwoosh-service-worker.uncompress.js
5. Использовать 12 ноду и установить зависимости проекта
6. Запустить npm start

Публичная документация по фиче: https://docs.pushwoosh.com/platform-docs/pushwoosh-sdk/web-push-notifications/custom-subscription-popup#implementation

Параметры попапа:

Pushwoosh.push('init', {
    . . .,
    subscribePopup: {
        enable: true,          // boolean флаг для активации попапа 
        text: 'Text on popup', // текст на попапе
        askLaterButtonText: 'Not now',              // текст на кнопке “Ask later”
        confirmSubscriptionButtonText: 'Subscribe', // текст на кнопке “Subscribe”
        delay: 60,             // задержка между прогрузкой страницы и показом попапа в секундах
        retryOffset: 604800,   // через какое время (в секундах) ещё раз показать пользователю попап после прошлого отказа
        overlay: false,        // boolean флаг, включающий overlay на странице при показе попапа
        position: 'top',       // позиция попапа 'top' | 'center' | 'bottom'
        mobileViewMargin: '0', // отступ снизу для мобильной версии, для тех кто использует App-like меню (sport1)
        
        bgColor: '#fff',                         // цвет фона попапа
        borderColor: 'transparent',              // цвет бордера попапа
        boxShadow: '0 3px 6px rgba(0,0,0,0.16)', // тень попапа
        
        textColor: '#000',      // цвет текста на попапе
        textSize: 'inherit',    // размер текста на попапе
        textWeight: 'normal',   // толщина основного текста
        fontFamily: 'inherit',  // шрифт на попапе
        
        subscribeBtnBgColor: '#4285f4',          // цвет кнопки “Subscribe”
        subscribeBtnTextColor: '#fff',           // цвет текста на кнопке “Subscribe”
        subscribeBtnTextWeight: 'normal',        // толщина текста кнопки “Subscribe”
        subscribeBtnBorderColor: 'transparent',  // цвет рамки “Subscribe”
        subscribeBtnBorderRadius: '2px',         // радиус скругления кнопки “Subscribe”
        
        askLaterBtnBgColor: 'transparent',   // цвет кнопки “Ask later”
        askLaterBtnTextColor: '#000',        // цвет текста на кнопке “Ask later”
        askLaterBtnTextWeight: 'normal',     // толщина текста кнопки “Ask later”
        askLaterBtnBorderColor: '#fff',      // цвет рамки “Ask later”
        askLaterBtnBorderRadius: '8px',      // радиус скругления кнопки “Ask later”
        
        theme: 'material' | 'topbar'        // тема попапа
    }    
});