iZooto

Customizing your Subscription Prompt

Improve user experience using different subscription prompt templates, enable event-based trigger and change device preferences.

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 6 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

Central Modal

Full-Screen Pop-Up

Right Sidebar

Sticky Header

Slide Up Box

Specifications to be kept in mind while modifying your subscription prompt.

Element
Max. Allowed

Logo

10 Kb (100 x 100)

Title

50 Characters

Description

100 Characters

Click on Save & Activate to make the changes live.

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 - later

Device 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.\

window._izq = window._izq || []; window._izq.push(["updateSubscription","subscribe"]);
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>

FAQs

Q1. Are the font and the color of the Subscription Prompt customizable?

Ans. The color and the font of the default subscription prompt templates are not customizable but you can edit the content of the subscription prompt.

Q2. How to customize a subscription prompt?

Ans. There are many ways in which you can customize your subscription prompt for a better engagement. Here is a blog that will help you out in customizing your subscription prompt.

Customizing your Subscription Prompt

Improve user experience using different subscription prompt templates, enable event-based trigger and change device preferences.