Are you looking for ways to re-engage your website visitors and keep them coming back? One effective strategy is to leverage web push notifications. In this tutorial, we'll show you how to add web push notifications to your Wix website using Pushpad.

Setting Up the Service Worker

To receive and display notifications on your Wix website, you need to install a service worker. Since Wix doesn't allow direct uploads of files to the root directory, we'll use a workaround to install the service worker. Follow these steps:

  1. Open your Wix website and click "Edit Site" to enter the website editor.
  2. Turn on the "Dev Mode" (Velo) to enable editing.
  3. In the "Backend" section, add a new file named exactly "http-functions.js".
  4. Using the code editor, add the following code to that file:

`javascript

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);

}

`

This code sets up the service worker for your Wix website. You can verify that it's working by typing "https://example.com/_functions/ServiceWorker" (replace example.com with your domain) in your browser address bar and seeing a page with the text "importScripts('https://pushpad.xyz/service-worker.js');".

Adding JavaScript Code to Your Website

Next, you need to add some JavaScript code to all pages of your website. This code will install the service worker and the Pushpad JavaScript SDK.

  1. Open your Wix dashboard and click "Settings" followed by "Custom code".
  2. Add the following "Code snippet" to "All pages":

`javascript

`

Remember to replace PROJECT_ID with the actual ID of your project. You can find this in the project settings in the Pushpad dashboard.

Collecting Subscribers and Sending Push Notifications

Now that you've installed the service worker and Pushpad JavaScript SDK, you're ready to collect subscribers and send push notifications. When you visit your website, you should see a prompt asking if you want to receive notifications. You can also customize this prompt (text and appearance) in the Pushpad dashboard.

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

With these steps complete, you're now able to re-engage your users with web push notifications!