The proper push notification can have high open rates, but sending too many irrelevant notifications will backfire and make users stop using your application. PageSense provides you the option to create a customized opt-in message that enables visitors to either allow or disallow notifications to their browser. Once the users choose to allow notifications, their information will be tracked and saved under the subscriber repository, and they'll start sending and receiving future messages from your website. This is one of the easiest ways to explain the value of your notifications before prompting with unwanted alerts that might leave your customers annoyed.

Make sure you have enabled the 'Allow users to subscribe' option and selected your preferred opt-in type under the Project Settings before launching your push notifications in PageSense. Users can't subscribe to and view your website's push notifications without enabling this option. 

To allow users to opt-in or opt-out of notifications:
1. Click Project Settings at the top-right corner, and choose Web Push Notification.

2. Enable the Allow users to subscribe toggle, and select one of the opt-in types:

1. One-Step Opt-In (HTTPS only): With this method, the browser displays a native browser prompt asking the user to subscribe to web push notifications with a single button click. The visitor just has to click Allow to subscribe and start receiving notifications from your website.
   
   

   Important: Works for only HTTPS websites/ sites that have SSL Certificate.
   
   What is a native browser prompt?
   The native browser prompt will appear on the top left corner under the search bar of the browser and will contain options to Allow or Deny web push notifications from your website. Your users will need to click on the Allow button in it to subscribe to your web push notifications.

   To do this: 
   
   a.1. Under the Display Opt-In Box, specify whether the prompt should show up after a time delay or immediately after users land on your website.
   
   

a.2. Click Copy to copy the script inside the text box, and paste it in the service-worker.js file under the root directory of your website. 

If you're using Zoho Sites to create your website, then follow the steps below to easily add the service-worker.js file to your site:
1. Copy the JS code from the One-step opt-in (PageSense) and save it on your computer's text editor with name as 'service-worker.js'
2. Log in to your Zoho Sites account and choose your website to enable the opt-in.
3. Click on the Settings option in the top bar, go to Content section and click on Files.
4. Next, click upload and select the server-worker.js file saved on your computer.
5. Finally, click Publish.

As shown below, the one step opt-in will display the native browser prompt at the top left corner of your browser window with the options to Block and Allow notifications from your website. 

1. Two-Step Opt-In: With this method, a custom notification prompt is first shown to the visitor that convey why you user should subscribe to your web push notifications. Once the user clicks Allow, the browser displays a native prompt asking the user to subscribe to web push notifications.
   

   

   Important: Works for both HTTP & HTTPS websites. 
   

PageSense will throw a default banner when you select any web push opt-in method.

Default PageSense banner looks like this:

A browser consent pop-up will accompany your chosen web push opt-in.

If and when you want to make any changes to your push notification banner, you have to make them in the two-step opt-in and then enable the opt-in of your choice.

1. To do this: 
   

   b.1. Within the Subdomain text box, enter the name of your domain that should be displayed to users in the native browser's prompt. 
   

   

   Note: Adding a subdomain name lets users know that the notification was sent from your business site. For example, if you add the subdomain name as Zylkerfashion, then once the user clicks on the 'Allow' button, you will see the prompt opt-in box displays the zylkerfashion.cdn.pagesense.io on it as shown below. 
   
   
   
   
   
   b.2. Under the Display Opt-In Box, specify whether the prompt should show up after a time delay or immediately after users land on your website. 
   
   
   
   
2. 3. Upload an icon that will be used as the default icon for your notifications (this can be changed during the notification creation process).
   b.4. Fill in the required fields, such as notification title, description, and the allow/disallow button texts that you want to show visitors. You can also preview how these notifications will appear on your desktop and mobile browsers under the Preview section at the right.
   
   
   As shown below, users will first see a custom notification prompt at the top center of their screen, asking permission to display notifications from your website. If the user clicks the Allow button on the prompt, they will be shown the child window.
   

               

b.5. Enable the Allow Notification on Mobile button to show your notification banner on a visitor's mobile browser.
b.6. Enable the Child Window Setting button to add a customized notification message to users, nudging visitors to subscribe to your notification:

1. Under the Opt-in Text field, enter the title text asking visitors to click to subscribe to push notifications from your website. For example, it could say something like, "Click on 'Allow' to receive notifications from us."
   
2. Under the Offer Text field, enter the text that will appear in the body of the opt-in. For example, you could say, “Stay updated with our latest news and offers. Subscribe to learn more!” 
   
   
   
   
   
   
   

Once the user clicks the Allow button in the custom notification prompt, they will be shown the child window on your website page with the native browser prompt containing the subdomain name that you entered as shown below and from there:

1. The user will need to confirm their subscription by clicking the Allow button on the native prompt.
   
2. If a user clicks Allow on the Box Prompt and Don't Allow on Native Browser Prompt, then they will remain unsubscribed.
   

c. Custom Opt-In: This method will trigger the opt-in box when the user clicks a button or link placed on your website. You can customize the name, color and position of your button and link text as required.

To do this:

c.1. Within the Subdomain text box, enter the name of your with domain that should be displayed to users in the native browser's prompt. 

Note: By adding a subdomain name, you let users know that the notification was actually sent from your business site. For example, if you add the subdomain name as Zylkerfashion, then once the user clicks on the 'Allow' button, you will see the prompt opt-in box displays the zylkerfashion.cdn.pagesense.io on it as shown below. 

c.2. Click Copy to copy the button or link code and paste it within your website's HTML. You can further style your code snippet as required using CSS.

As shown below, in custom opt-ins, users will first see the GET NOTIFICATION button on your website. If they click this button, they will get a custom notification prompt at the top center of their screen, asking permission to display notifications from your website.

​

 
Once the users click the Allow button on the prompt, they will be  shown the Native Browser Prompt in the child window containing the subdomain name you entered, and from there:

1. The user must confirm their subscription by clicking the Allow button on the native prompt.
   
2. If a user clicks Allow on the Box Prompt and Don't Allow on the Native Browser Prompt, then they will remain unsubscribed.
   
   
   

Web push notifications will only be delivered to your desktop or mobile device when you have enabled the notification settings on your web browser and operating system. So, before you start sending or receiving notifications from a website, please make sure that you check and turn on these settings on your device.

We hope this documentation helps make the process easy for you. Please email us anytime at support@zohopagesense.com if you need more explanation or have any questions.