Add web push notifications to Wix

In this tutorial we'll see how you can send push notifications from your Wix website.

In particular we'll use Pushpad to collect the subscribers and to send the notifications.

On a normal website you could simply follow the Getting Started Guide, however for Wix we need a few extra steps: in particular, since Wix doesn't allow to upload files directly in the website root, we need to use a workaround to install the service worker. Don't worry, we'll see the exact steps together.

Add the service worker

The service worker is a JavaScript file that is necessary to receive and display the notifications.

1. Open your Wix website
2. Click "Edit Site" (open the website editor)
3. Turn on the "Dev Mode" (Velo)
4. In the "Backend" section add a file named exactly "http-functions.js"
5. Using the code editor, add the following code to that file

import { ok, badRequest } from 'wix-http-functions';

export function get_ServiceWorker(request) {
  let options = {
    "headers": {
      "Content-Type": "application/javascript",
      "Service-Worker-Allowed": "/"
    },
    "body": "importScripts('https://pushpad.xyz/service-worker.js');"
  };
  return ok(options);
}

Now you have a service worker for your Wix website.

You can also verify that: if you type "https://example.com/_functions/ServiceWorker" (replace example.com with your domain) in the browser address bar you should get a page with this text: "importScripts('https://pushpad.xyz/service-worker.js');".

Add a JavaScript code to your website

Now we need to add some JavaScript code to all the pages of the website. The following code will install the service worker and the Pushpad JavaScript SDK.

1. Open your Wix dashboard
2. Click "Settings" and then "Custom code"
3. Add the following "Code snippet" to "All pages"

<script>
  // register the service worker in a custom way
  navigator.serviceWorker.register('/_functions/ServiceWorker', { scope: '/', updateViaCache: 'none' });

  // then include Pushpad
  (function(p,u,s,h,x){p.pushpad=p.pushpad||function(){(p.pushpad.q=p.pushpad.q||[]).push(arguments)};h=u.getElementsByTagName('head')[0];x=u.createElement('script');x.async=1;x.src=s;h.appendChild(x);})(window,document,'https://pushpad.xyz/pushpad.js');

  pushpad('init', PROJECT_ID, { serviceWorkerPath: null });
  pushpad('widget');
</script>

Remember to replace PROJECT_ID with the actual ID of your project: you can find it in the project settings in the Pushpad dashboard. If you don't have a project you need to create a new one.

In general, the above code is similar to a standard installation. The only difference is that we install the service worker in a custom way: first we use navigator.serviceWorker.register to install the service worker and then we pass the option serviceWorkerPath: null to pushpad('init'), in order to inform Pushpad that it doesn't need to install a service worker (because we have already done that).

Collecting subscribers and sending push notifications

Now the installation is complete. When you visit your website you should see a prompt asking if you want to receive notifications.

You can also customize the prompt (text and appearance): visit the Pushpad dashboard, open the project, click "Settings" and then "Widget settings".

Finally you can use the Pushpad dashboard to send notifications to all your subscribers. Open your project, click "New notification" and try to send your first notification.

Done! Now you can easily re-engage your users with web push notifications!