Customizing your Subscription Prompt

Enabling web push notifications will allow your website to show a subscription opt-in. And if your website visitor wants to receive notifications from you, he/she can give their permission and become a subscriber. The trick lies in understanding when to ask the visitor for permission, when to re-prompt and of course how to ask in the first place.

Modifications to the subscription prompt can be availed from Settings >> Modify Subscription Prompt

Ready to use and Customizable Designs

Using ready-to-use design templates help in setting up a context before asking the visitor to subscribe to your website thus making the experience even better. Here is an example:

You can play with various designs, add your logo and customize the text to make it much more attractive than the native browser opt-in. It also saves you from being blocked even if a user dismisses it more than 3 times!

Currently, there are 8 designs to choose from. The browser native opt-in is the only design for which you cannot make any customizations as its the default setting of a browser.

You can, however, add an overlay to this design on the desktop. Simply turn the toggle ON and type the message you would like to display on it.

This is how the subscription prompt would look.

Max characters allowed on the overlay text is 50

All the other 7 designs can be customized - you tweak the copy, change the background and text color of the prompt and buttons so that it looks more in-tune with your website.

To edit a design, click on the edit option use the radio option - prompt and button to make the changes to each of the parameters.

Selecting the Prompt radio option enables you to change the background color of the opt-in along with the title and message text color, add an icon (only for the Dialog Box, Right Sidebar, Sticky Header, and Slide Up Box) and tweak the copy.

Selecting the Button radio option enabled you to change the copy and text of the button along with the button color.
 
Here are the specifications for each of the text elements on every opt-in design.
 
You can choose to have different subscription opt-ins for your mobile and desktop subscribers. All designs apart from the Right Sidebar are available for mobile devices too.
 
The message field is optional for all the subscription opt-ins
After changing the subscription opt-in, allow 2-3 minutes for the sync to take place. If you still cannot view it, clear your browser cache (CMD/CTRL + SHIFT + R) and check
 
For GDPR compliant subscription opt-in, check this document

Timing of Prompt

You can set a time when the opt-in should be shown on the user’s screen. We recommend that you display the opt-in after the visitor spends some time on your website and not flash it as soon as he/she lands upon it.
 
Also, it’s suggested to avoid constant opt-ins just because they visited another page on your website. There are different timings that can be set up for your subscription opt-in.
 
      • Set up when the subscription opt-in should appear for the first time
      • Set up when the subscription opt-in should appear again if the visitor ignored it the first time
      • Set up when the subscription opt-in should appear if a custom design is used and the visitor clicks on the CTA - later

Device Selection

We recommend that you enable the subscription opt-in on both desktop and mobile so that you can target visitors regardless of their device preference. However, in the unlikely event that you wish to disable the prompt on one type of device, it can be easily done by turning off the toggle button.

No activity based tracking for segmentation would be possible on whichever device iZooto is turned off

Trigger-Based

Prompting visitors when they take specific actions is highly recommended as indicates more intent to subscribe to notifications. For instance, when a visitor purchases a product from your website, you can ask him/her to subscribe for notifications to stay updated about product delivery.
 
Here is how that can be achieved:
 
a. Disable automatic prompt on page visits
 
  Edit the iZooto JS code as follows.
<script>window._izq = window._izq || []; window._izq.push(["init",{"auto_prompt" : false}]);</script>
 
b. Trigger the Notification request on a click event - a certain button or a URL
 
<button onclick="window._izq = window._izq||[]; window._izq.push(['triggerPrompt']);">Subscribe</button>
<a href="#" onclick="window._izq = window._izq || []; window._izq.push(['triggerPrompt']);">Subscribe</a>
 
c. Conditional Notification Permission Prompt
 
Using the response callback function, you can store the state of the subscriber and use this information to conditionally prompt the user who :
 
1. Had already subscribed
2. Had already blocked
 
For instance, for subscribers who have already subscribed, show them the option to unsubscribe. Although we do not advocate churn, we understand that sometimes, the user experience is crucial and pivotal for your business.
 
In order to implement this, ensure that the automatic prompt on page visits is disabled.
<script>window._izq = window._izq || []; window._izq.push(["init",{"auto_prompt" : false}]);</script>
 
And after that, basis on where and how you need the opt-in to behave, you can trigger the below:
 
Implementation on a Button
<button onclick='window._izq = window_izq || []; window._izq.push(["updateSubscription","subscribe"]);'>Subscribe</button>
<button onclick='window._izq = window_izq || []; window._izq.push(["updateSubscription","unsubscribe"]);'>Unsubscribe</button>
 
Implementation on a URL
<a href="#" onclick='window._izq = window._izq || []; window._izq.push(["updateSubscription","subscribe"]);">Subscribe</a>
<a href="#" onclick='window._izq = window._izq || []; window._izq.push(["updateSubscription","unsubscribe"]);">Unsubscribe</a>
All the above works ONLY with the browser native opt-in design

Capture User Preferences at Subscription

A lot of times, a user might be interested in receiving notifications from only a particular category of your website. This especially holds true for news and content websites. And iZooto allows you to capture these preferences at the time of subscription itself.
Image for reference only. You can design your own subscription opt-in
 
Step 1: Design your Subscription Opt-in
 
Design the subscription prompt for your website. You can refer to the template mentioned above. There are three key components to the subscription opt-in:
 
a. Categories (Represented by the checkboxes above)
 
b. Subscription Action
 
Add the subscription prompt trigger to the 'Subscribe' button using the triggerPrompt function mentioned below.
<button onclick="window._izq = window._izq||[]; window._izq.push(['triggerPrompt']);">Subscribe</button>
 
c. 'Not Now' Action
 
If the user doesn't want to subscribe to notifications on the first visit, you can set a cookie delay on the 'Not Now' button to prompt user only after the specified delay.
 
Please note that you should disable the automatic prompt on page visits first:
<script>window._izq = window._izq || []; window._izq.push(["init",{"auto_prompt" : false}]);</script>
This works ONLY with the browser native opt-in design
 
Step 2: Save User Preferences
 
Save the options selected by the website visitors in cookies as soon as they click on 'Subscribe'. Please note that this is not the actual subscription action, it will simply trigger the browser native opt-in. 
 
Step 3: Assign Preferences to Subscribers
 
iZooto's callback function lets you assign user preferences at subscription using user properties. Here is the sample code:
<script>window._izq = window._izq || []; window._izq.push(["init",{"auto_prompt" : false}]);
window._izq.push(["register_callback",function(obj){
	if(obj.statuscode==1){
		/*
			Your code comes here
			Extract user preferences and assign them using userproperties
		*/

  		window._izq.push(["userProfile",{"add":{
				"categories":preference;
			}
		}]);
	}
}]);</script>
<script src="https://cdn.izooto.com/scripts/<Your-Website-Hash-Key>.js"></script>
 
 
Step 4: Create an Audience
 
You can use preferences set at subscription to create the required audience (Create Audience > Add Audience > Show User Properties > Select User Properties from the drop-down menu)

Did this help answer your question?

thumbs up
thumbs down

Thanks for the feedback! 🙏🏽