Enabling Web-Push Notification

Web push notifications are clickable rich content messages sent to your device by a website or a web app. Push notifications are delivered to your mobile device or desktop, even when your browser is closed. These notifications can only be sent to users who have subscribed to these notifications from a specific website on Chrome, Firefox, and Safari.

Here is how they look across different devices and browsers.

Sending web push notification is easy with iZooto. Click on Sign up for Free on https://www.izooto.com/, add the website and account details and follow the integration instructions. 

Ready to use plugins are available for   ShopifyMagento, and  Wordpress

 

For Websites on HTTPS

1. Insertion of the JS Code

The below code (sample) needs to be placed before the </head> tag on all the website pages.

<script> window._izq = window._izq || []; window._izq.push(["init"]); </script><script src="https://cdn.izooto.com/scripts/abc123def456.js"></script>
 
You can avail this by logging into your iZooto dashboard and clicking on Settings >> Integration Instructions. This code using Google Tag Manager too. Click here to know how.
 
You can also add this code asynchronously in case you are worried about the load time of your website. 
 
<script> window._izq = window._izq || []; window._izq.push(["init"]); </script><script async="true" src="https://cdn.izooto.com/scripts/abc123def456.js"></script>
 
 
2. Uploading of files
 
Two files - manifest.json and service-worker.js need to be uploaded to the root folder of your website. They should be accessible as https://yourwebsite.com/manifest.json and https://yourwebsite.com/service-worker.js
 
 
2. 1 Root Folder Not Accessible
 
If, in case you do not have access to the root folder, upload both files to any other folder on the same domain. Example: https://yourwebsite.com/apps/thirdparty/izooto/manifest.json 
 
Additionally, create a .html file by the name of izooto.html as below and upload it to the same folder as the other two files.
 
<html>
<head>
<script> window._izq = window._izq || []; window._izq.push(["init"]); </script>
<script src="https://cdn.izooto.com/scripts/123456abcdef78.js"> <!--Change this to your pixel mentioned under Integration Instructions-->
</script>
</head>
</html>
 
After all three files have been placed, drop a mail to [email protected] with the exact URL for each of them so that changes can be made to accommodate your website and enable web push notifications on it.
 
Some platforms like Blogger, do not have any provision for uploading files. In such cases, please follow the HTTP implementation given below.

Here is how the subscription prompt would look like after the integration is done.

For Websites on HTTP

Web Push Notifications work only on SSL websites (HTTPS). However, HTTP websites can avail web push notifications by creating a sub-domain on HTTPS. Unlike HTTPS websites, the subscription process is of 2 steps and involves the visitor clicking on 2 CTAs (Click to Action) before getting subscribed to a particular website.
 
In the first step, websites can set up the context with an interactive message on a custom dialog box while the actual subscription prompt appears in the second step on the HTTPS sub-domain.
 
Despite the above possibility, we recommend our customers whose website is on HTTP to migrate to HTTPS at the earliest. Click here to know why.
 
 
Insertion of the iZooto JS Code
The below code (sample) needs to be placed before the </head> tag on all the website pages.
 
<script> window._izq = window._izq || []; window._izq.push(["init"]); </script><script src="https://cdn.izooto.com/scripts/abc123def456.js"></script>
 
You can avail this by logging into your iZooto dashboard and clicking on Settings >> Integration Instructions. This code using Google Tag Manager too. Click here to know how.
 
You can also add this code asynchronously in case you are worried about the load time of your website. 
 
<script> window._izq = window._izq || []; window._izq.push(["init"]); </script><script async="true" src="https://cdn.izooto.com/scripts/abc123def456.js"></script>
 

 

In case you wish to migrate your existing implementation from HTTP to HTTPS because your website has moved, check the FAQs here.

 

How do I Integrate PWA?

In the iZooto dashboard, head to Settings and select ‘General settings’ on the drop-down menu, select ‘PWA settings’ and fill in the details.

 

How can I integrate AMP?

As Google doesn't allow external pixels to be added, you can not integrate AMP as of now. 

Do I need to integrate my Mobile site on a sub-domain such as m.yourstore.com again?

You do not have to integrate it separately on mobile but if your mobile codebase is separate to your desktop codebase, the integration would have to be done separately. Please note that if your desktop website is https://yourwebsite.com and your mobile site is https://m.yourwebsite.com, the same set of pixels and files would work. DO NOT add the mobile website as a separate website on the iZooto panel.


Did this help answer your question?

thumbs up
thumbs down

Thanks for the feedback! 🙏🏽