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.

Available Plugins

Ready to use plugins are available for Shopify, Magento, and Wordpress.

For integration on specific platforms like Hubspot, SquareSpace, StoreHippo, WooCommerce, etc. Check this out for more.

If you wish to migrate from another provider to iZooto, check this article.

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, here is how you can integrate.

Step 1: Upload both files to any other folder but on the same domain.

Placing the files in your CDN will not work as the domain/URL would become different

These files need to be accessible over the internet as (for example):

Step 2: Additionally, create an HTML file by the name of izooto.html as below (replace the dummy JS code with your actual JS code available under Integration Instructions) and upload it to the same folder as the other two files.

This too needs to be accessible over the internet as (for example):

<html>
<head>
<script> window._izq = window._izq || []; window._izq.push(["init"]); </script>
<script src="https://cdn.izooto.com/scripts/123456abcdef78.js"> 
<!--Change this to the actual JS code mentioned under Integration Instructions-->
</script>
</head>
</html>

Step 3: After all three files have been placed, drop a mail to support@izooto.com with the exact URLs 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.

The subscription flow on HTTP websites

The subscription flow on HTTP websites

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.

Enabling Web-Push Notification


Suggested Edits are limited on API Reference Pages

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