Customizing your Subscription Prompt

Web Push Notification is permission-based medium and visitors need to opt-in to start receiving the notifications. When visitors visit your website they are shown a Subscription Prompt asking for their permission and once they allow, they get subscribed to your website.

In the case of EU visitors, they will also receive the GDPR Compliance Prompt to get their permission to access their location and website activities. This allows iZooto to capture data needed for segmenting and personalizing the notification experience. More about the GDPR Compliance Prompt is explained in the GDPR Compliant Subscription Prompt section.

You can customize your Subscription and GDPR Compliance Prompts according to your website and audience to create a better user experience.

Prompts for Devices and GDPR Compliance

You can send Prompts for the following cases:

  1. Desktop Prompt: this prompt is shown to your Desktop Visitors
  2. Mobile Prompt: this prompt is shown to your Mobile Visitors
  3. GDPR Compliance Prompt: this prompt is shown to your EU visitors to get their permission to get access to their location and track their activities on your website. This is needed by iZooto for delivering a Personalized notification experience.

If you leave the button off for any of the Prompts, your visitors will not receive the Subscription Prompt for cases they are applicable for. For example, if the GDPR Compliance Prompt is toggled off, your visitors for the EU will not be shown the message.

We recommend you to keep the toggle button on for all Desktop and Mobile devices and GDPR compliance. To endure that all your visitors getting the applicable Prompts.

Anatomy of Your Subscription Prompt

This is an example of how your subscription prompt can look like:

Setting up Your Subscription and GDPR Compliance Prompt

Steps to customize your Subscription Prompt and GDPR Compliance message are the same. Here is how you do it:

  1. Login to your iZooto account, go to the Modify Subscription Prompt page and toggle on the buttons next to Desktop, Mobile and GDPR Compliance.
  1. Click on the Change Prompt button.
  1. You can now choose what Prompt you have to customize, Desktop, Mobile or GDPR Compliance and tap to see the design options.
  1. Select Prompt design you want to have for your visitor. You can also see the preview on the right side of your screen for different designs.
Select prompt design and preview it

Select prompt design and preview it

  1. To make changes in the selected Prompt design click on the edit icon which comes up when you hover over the design.
  1. You can now customize the different elements of your Prompt to resonate with your website and audience and preview the changes on the right side.

Note

Customizing a single Prompt design will modify all the designs for that particular tab, other than the specifications related to the Prompt Timing. For example, if you customize the Content and Appearance of a Desktop Prompt design all the other designs will get automatically updated. But the Prompt Timing needs to be managed independently.

  1. Once you have made the changes you can click on the Save Changes button.

Design Options for your Subscription Prompt

iZooto gives you 17 design options for your Subscription prompt, 9 for Desktop devices and 8 for Mobile Devices.

Subscription Prompt designs for Desktop Devices

Desktop Prompt Designs

Desktop Prompt Designs

Subscription Prompt designs for Mobile Devices

What can you Customize in your Subscription Prompt

You have the freedom to customize the following elements of your Subscription Prompt: -

  • Content - You can edit the text of your notification Title, Message, and Buttons and use an icon of your choice.
  • Appearance - You can change the background color of Prompt and Buttons and the text color of Title, Message, and Buttons.
  • Timing - You can also optimize the time after the first Prompt will show up and even the time after which the prompt will repeat itself in both the cases, the visitor has not clicked on any button or has clicked on the Later Button.

Note: If your visitor dismisses the Subscription Prompt thrice, the browser will not allow you to show the prompt again. So make the best of this opportunity

Here is a list of what design elements can be changed for different Subscription Prompt designs.

Customize Your Subscription Prompt Content

You can work on the following Content elements of your Subscription Prompt:

  • Icon
  • Title Text
  • Message Text
  • Allow Button Text
  • Later Button Text
    You can also see the preview of the changes on the right side of your screen.

For different Subscription Prompt designs, the text elements support a different number of characters. Here is the specification for each text elements for all Prompt designs:

Customize Subscription Prompt Appearance

You can work on the following Appearance elements of your Subscription Prompt:

  • Prompt Background Color
  • Title Text Color
  • Message Text Color
  • Allow Button Text Color
  • Later Button Text Color
    You can also see the preview of the changes on the right side of your screen.

Customize Subscription Prompt Timing

You can work on the following Timing elements of your Subscription Prompt:

  • Prompt Delay: Specify the time after which the Prompt should appear for a website visitor.
  • Repeat Prompt Delay: Specify the time after which the Prompt should appear if the visitor has not clicked on any of the buttons.
  • Later Button Delay: Specify the time after which the Prompt should appear if the visitor has clicked on the "Later" button.

Note: If your visitor dismisses the Subscription Prompt thrice, the browser will not allow you to show the prompt again. So make the best of this opportunity

We recommend that you time the first Subscription Prompt to come up only after the visitor has spent some time on your website.

Design Options for your GDPR Compliance Prompt

iZooto gives you 3 design options for your GDPR message for EU visitors.

What can you Customize in your GDPR Compliance Prompt

You can only change the Content of your GDPR Compliance Prompt.

Here is the specification for all text elements for different GDPR Compliance Prompt designs:

How will your Subscription and GDPR Compliance Prompt Look

To see how your Subscription and GDPR Compliance Prompt will appear you can:

  1. go to the Modify Notifications Prompt section under Settings and on the right side of the screen, you can see how your Prompts will appear.
  1. click to the "Change Prompt" button and you can see the Prompt preview on the right side of the screen or click on the "Full Preview" button to see how the Prompt will look on full screen.

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, the 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>

Bear in mind that triggered prompts are created to provide users with more context so that they are aware of what they are subscribing to. This is the reason that when the above is implemented, the prompt that will be visible to the user is the native browser opt-in (even if you had selected any custom prompt). This ensures that a user doesn't have to click on 3 buttons to get subscribed and hence makes the subscription experience better.

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)

Updated about a month ago

Customizing your Subscription Prompt


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.