Modifying Opt-in Prompt

Web push notification is a permission-based communication channel and visitors need to opt-in to start receiving the notifications. When visitors visit your website they are shown an opt-in prompt asking for their permission and once they allow, they get subscribed to your website.

You can customize your opt-in prompt according to your website and audience to create a better user experience.

Prompts for device types and GDPR compliance

You can configure opt-in prompts for desktop and mobile separately. You can configure following opt-in prompts:

  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. Please note that iZooto doesn't capture any personally identifiable information (PII).

📘

We recommend you to keep the toggle button on for all - desktop and mobile devices and GDPR compliance to ensure maximum reach within your visitors.

Anatomy of Opt-in prompt

This is an example of how an opt-in prompt can look like:

Setting up your subscription and GDPR compliant prompt

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

📘

Read

You can read more about GDPR Compliancehere

  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 which prompt you have to customize - Desktop, Mobile or GDPR Compliance and tap to see the design options.
  1. Select opt-in 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

  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 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 prompt design will modify the content for 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

Subscription Prompt designs for Mobile Devices

What can you customize in your opt-in prompt?

You have the freedom to customize the following elements of your opt-in 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 opt-in 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 native opt-in thrice, the browser will not allow you to show the prompt again.

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

Customize your opt-in prompt content

You can work on the following content elements of your opt-in:

  • 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 opt-in prompt appearance

You can work on the following appearance elements of your opt-in 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 opt-in prompt timing

You can work on the following Timing elements of your opt-in 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 native opt-in prompt thrice, the browser will not allow you to show the prompt again.

📘

We recommend that you time the opt-in prompt to come up only after the visitor has spent some time on your website.

How will your opt-in prompt look?

  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 "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.

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 opt-in

Design the opt-in 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'.

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 18 days ago



Modifying Opt-in Prompt


Suggested Edits are limited on API Reference Pages

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