Web push notifications are instant, fully customizable messages that a contact receives on their device. This instant, one-on-one communication allows you to reach users at the right time and in the right places, even when they aren’t visiting your website, to increase conversion rates
In this article, you’ll learn how to set up web push notifications.
Implementation time: 10 minutes.
Difficulty: Medium
When to use it: When you want to integrate your web push notification activity with Connectif.
Web push notifications launched from Connectif work in browsers and versions that support the PUSH API. This includes the most widely used browsers on the market: Chrome, Firefox or Edge (Chromium). However, web push notifications are not supported on Safari or iPhone devices.
To see the complete list, click here.
Prerequisites
For contacts to receive a web push notification, several prerequisites must be met:
- In the browser, the contact must have authorized the sending of notifications. Web push notifications launched from Connectif work in browsers and versions that support the Push API. See the list at this link.
- The contact must have granted permission to receive push notifications from your web domain. To do this, the contact must click the Allow button in the pop-up window that appears at the top-left of the web.
This window can be inserted through Connectif's web content. You can find how to do this in this article. It can also be shown through any other means on your website.
- The contact must have notifications enabled on their desktop and/or mobile device.
STEP 1. Configuring the ServiceWorker
1. Go to "Integrations > Web". Click on the Push notifications tab.
2. In the tab selector, go to "Channels > Web Push Notifications".
3. Click Download.
A ServiceWorker file (such as "service-worker.js" in the download) is a sequence of JavaScript commands executed by the browser in the background. When using it, certain web processes continue to run even if the contact has closed the browser or not yet opened it.
4. Upload the file to your server and copy the route.
5. Add the route to the ServiceWorker in the ServiceWorker URL section.
For web push notifications to work correctly, your shop or website domain must be HTTPS.
6. Click Update.
STEP 2. Check configuration
1. In a new tab or window, access the ServiceWorker URL.
If the path is correct, the browser will display the code fragment that defines the ServiceWorker.
2. Open the browser's (DevTools) console.
All browsers have a link in the menu to open DevTools. Here are the instructions to open it in Google Chrome (browser used in our example), Mozilla Firefox, Microsoft Edge y Safari.
Alternatively, if you are in Chrome, Firefox or Edge, you can use the F12 shortcut key.
3. In the development tools window, click Application.
4. From the menu in the left column select Service Workers.
5. Check that the status of the ServiceWorker is "active and running". In addition, the traffic light accompanying Status will be green.
Success!
Web push notifications are ready to be used in your strategies.
Keep learning!
To make the most of your Connectif account, we recommend reading these articles next:
- Web push notification editor, to design the content of your web push notifications.
- Push subscription with browser notification, to trigger the browser web push subscription notification without sending web content.
-
Ask for subscription to web push notifications with a popup, to create a strategy that subscribes contacts by means of a popup.
-
Push subscription with slide-in, to create a strategy that subscribes contacts by means of a slide in.