Customizing your Subscription Prompt

Enabling web push notifications will allow your website to show a subscription prompt. 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 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. 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. You can always tweak the copy of the prompt to make it more appealing and add in a flavor of your website.

Dialog Box

Subscription Prompt Specifications

Central Modal

Subscription Prompt Specifications
 

Full-Screen Pop-Up

Subscription Prompt Specifications

Right Sidebar

Subscription Prompt Specifications

Sticky Header

Subscription Prompt Specifications

Slide Up Box

Subscription Prompt Specifications

Bell

Sticky Bar

Subscription Prompt Specifications
Make sure you click on Save & Activate to make the changes live.
 
 
For GDPR compliant subscription prompt, check this document

Timing of Prompt

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

Set up when the subscription prompt should appear if a ready-to-use template is used and the visitor click on the CTA - laterDevice Selection

We recommend that you enable the subscription prompt 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.

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. Edit the first line of the iZooto JS code
 
To 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
 
<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
 

User invoked Subscription Prompt

You might want your subscribers to have the option of unsubscribing to your website easily available and not have them figure out the browser configurations for this. Although we do not advocate churn, we understand that sometimes, the user experience is crucial and pivotal for your business.
 
You can make use of subscription callback response function to get the current subscription status and based on that show the option to the user for either subscribing or unsubscribing.
<script>window._izq = window._izq || []; window._izq.push(["init",{"auto_prompt" : false}]);</script>
<script>window._izq = window._izq || []; window._izq.push(["updateSubscription","unsubscribe"]);
 
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 an 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>

Capture User Preferences at Subscription

You can also capture user preferences at subscription by allowing your website visitors to subscribe to their favourite categories.
Image for reference only. You can design your own subscription prompt.
 
Step 1: Design your Subscription Prompt
 
Design the subscription prompt for your website. You can refer to the template mentioned above. There are three key components to the subscription prompt -
 
i. Categories (Represented by the checkboxes above)
 
ii. 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>
 
iii. 'Not Now' Action
 
If the user doesn't want to subscribe to notifications on the first visit, you can set a cookie delay on 'Not Now' button to prompt user only after the specified delay.
 
Please note that you should disable auto prompt on page visits by changing the first line to - 
 
<script>window._izq = window._izq || []; window._izq.push(["init",{"auto_prompt" : false}]);</script>
 
Also, ensure that you have selected 'Browser Native Opt-in' as the subscription prompt design on iZooto panel.
 
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 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. Refer to the code mentioned below.
 
<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 Audience
 
You can use preferences set at subscription to create the required audience.
 
The message field is optional for all the subscription prompts
 
After changing the subscription prompt, 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.
 
 
 

Did this help answer your question?

πŸ‘
πŸ‘

Thanks for the feedback! πŸ™πŸ½


Help by drift