Setup Webpushify

Webpushify is a service to send push notifications for Web and mobile. It supports the Push API (Chrome, Firefox, Edge, Opera, etc.) and APNs (Safari).

Webpushify is low-cost, very fast, GDPR compliant and easy to use. Just a few steps to start using Webpushify platform.

Let's walk through the steps to set up Webpushify for your website.

Note: Web push notification requires HTTPS to work. So, you need to set up your website to be served over HTTPS.
Please notice that HTTPS certificates are free these days. Please, take a look at let's encrypt .
We also have a solution if your website can not be upgrade to HTTPS. Please, read more in the Create Notification Domain section .

Firstly, create a new website associated to your domain.

After the website is created, a new website id is auto generated. Write down this website id because it will be used later.

Secondly, we need to register a service worker in your website top-level root (filename: webpushify-service-worker.js).
You can copy and paste the content of the file webpushify-service-worker.js or just upload a copy of it.
Once you've setup the service worker, the following URL (https://www.mydomain.com/webpushify-service-worker.js) should be publicly accessible. Remember to replace mydomain.com with your own domain.

webpushify-service-worker.js
importScripts('https://cdn.on.webpushify.com/webpushify-service-worker.js?v0.0.1');

Thirdly, in order to enable Webpushify on your site, copy and paste the following code on your website.

<script>
(function(url) {
  window.webpushify = window.webpushify || function() {
    (window.webpushify.q = window.webpushify.q || []).push(arguments);
  };
  var container = document.body ? document.body : document.head;
  stag = document.createElement('script');
  stag.async = 1;
  stag.src = url;
  container.appendChild(stag);
})('https://cdn.on.webpushify.com/webpushify-sdk.js?v.0.0.1');

webpushify('init', 'YOUR_WEBSITE_ID');
</script>

Note: Please, replace the string YOUR_WEBSITE_ID for your website id.
The website id is automatically generated by the system.
You can find your website id in the Edit Website screen. For example, 01DZ91SZPH2NCJHMQB14P7JK3S

React Webpushify Loader

Note: If you want to use Webpushify inside your React application, you can use our react-webpushify-loader library. Even if you use our loader module, it's required to register a service worker as explained above.

You need to install the react-webpushify-loader library.

$ npm i react-webpushify-loader --save

And then, you're ready to use the libary.

import WebpushifyLoader from 'react-webpushify-loader';
function() {
 return(
 <div>
  <WebpushifyLoader
    uniqueId="webpushifyLoaderTag"
    websiteId="YOUR_WEBSITE_ID"
  />
 <div>
 );
}

Finally, in order to get users to subscribe to push notifications, we can use the native prompt provided by the browser or one of the available widgets provided by Webpushify.

1. Code for the native prompt provided by the browser. (It appears under the pages determined by you)

<script>
webpushify('subscribe');
</script>

2. Code for the customized confirm box widget provided by Webpushify. (It appears under the pages determined by you)

<script>
webpushify('showConfirmBox');
</script>

3. Code for the customized bell widget provided by Webpushify. (It appears under the pages determined by you)

<script>
webpushify('showBell');
</script>