Custom Subscription Popup

Overview
Custom Subscription Popup is a pop-up window displayed on the web page and suggesting users to subscribe to web push notifications. It’s implemented with Pushwoosh WebSDK and allows to overcome the browser restrictions on a native subscription prompts displaying. A native subscription popup can be shown to a particular user only twice. If a user doesn’t allow push notifications and closes the native subscription popup two times in a row, it won’t be shown again and push notifications are considered blocked. A Custom Subscription Popup in its turn can be displayed as many times as needed unless a user subscribes to or blocks push notifications explicitly.
A Custom Subscription Popup can contain any text explaining the advantages of subscription to push notifications and two customizable buttons — a one for an "Ask later" option and a one for "Subscribe." 
Once a user presses a "Subscribe" button, a native subscription popup appears. 
When a user presses an "Ask Later" button or simply closes the window, the Custom Subscription Popup will appear again in a specified time (by default, in a week after; a delay to retry can be customized via the "retryOffset" parameter).
Implementation
To enable and customize a Custom Subscription Popup, use the following script while initializing Pushwoosh WebSDK:
Example
1
Pushwoosh.push('init', {
2
    . . .,
3
    subscribePopup: {
4
        enable: true,          // (boolean) popup activation
5
        text: 'Text on popup', // (string) a text to display on the popup 
6
        askLaterButtonText: 'Not now', // (string) custom text for the “Ask later” button         
7
        confirmSubscriptionButtonText: 'Subscribe', // (string) custom text for the “Subscribe” button 
8
        iconUrl: 'https://...',  // (string) custom icon URL
9
        delay: 60,             // (integer) a delay between the page loading and popup appearance 
10
        retryOffset: 604800,   // (integer) an offset in seconds to display the popup again 
11
        overlay: false,        // (boolean) enables page overlaying when popup is displayed
12
        position: 'top',       // (string) position on the page. Possible values: ’top' | 'center' | 'bottom’
13
         
14
        bgColor: '#fff',                         // (string) popup’s background color
15
        borderColor: 'transparent',              // (string) popup’s border color
16
        boxShadow: '0 3px 6px rgba(0,0,0,0.16)', // (string) popup’s shadow
17
         
18
        textColor: '#000',      // (string) popup’s text color 
19
        textSize: 'inherit',    // (string) popup’s text size
20
        fontFamily: 'inherit',  // (string) popup’s text font 
21
         
22
        subscribeBtnBgColor: '#4285f4',     // (string) “Subscribe” button’s color
23
        subscribeBtnTextColor: '#fff',      // (string) “Subscribe” button text’s color 
24
         
25
        askLaterBtnBgColor: 'transparent',  // (string) “Ask later” button’s color
26
        askLaterBtnTextColor: '#000',        // (string) “Ask later” button text’s color
27
        
28
        theme: 'material' // or 'topbar'. A popup theme, see the details below      
29
    }   
30
});
31
​
Copied!
Themes
By default, the Subscription Popup uses a 'material' theme and is overlays some part of a screen when shown, thus hiding some content from a website visitor.
'Material' theme
To avoid hiding valuable content by the Subscription Popup, use the 'topbar' theme so that the popup is shown as a narrow bar on the top of the screen.
'Topbar' theme

Push Subscription Button

Web Push via Google Tag Manager

Last modified 2yr ago

Copy link

Contents

Overview

Implementation

Themes