Web Push notifications (triggered Messaging)

setting up web push notifications abandonment messages

Nir avatar
Written by Nir
Updated over a week ago

What are Web Push notifications

Web push notifications are messages which appear on your visitor's browser when they visit any website and look like this:

In order to get permission to send these messages. The visitors click on an authorization message shown by the browser. It looks like this:

Barilliance allows adding a popup or message bar offering the user to subscribe before showing the browser authorization message.

Only visitors who opted-in will receive messages. Note that the visitor is not required to submit any personal details and there is no signup procedure. It is also easy to cancel at any time which makes Web notifications very attractive communication channel.

Barilliance Web Push capabilities

Barilliance currently use web push as channel for abandonment messages. We send notifications showing the latest product the user engaged with, after the visitor abandoned items in her cart, browsed some items or bought.

Setting up web push requires two parts. One is the permission request and the other is sending of the messages.

Setting up web push permission request

For security reasons and in order to make sure the sender of the messages is indeed the website in which the visitor gave permission there are some requirements for web push setup:

  • Only https web sites are supported

  • The code for the web-worker (javascript code which handles subscriptions) must be hosted under your web site domain.

Step 1 - downloading and hosting the JS file -
To setup web push for the first time create a rule with Web Push Permission Request action. Follow the instructions by downloading the js file which your IT people will need to place on your servers in a location under your domain.

Step 2 - Showing popup or messagebar suggesting subscrition (optional)
Select whether you want to show popup or messagebar and change their design per your requirements.

Step 3 - Testing the message

Preview the rule to see the permission request with/without the popup.

Setting up specific messages

Create a new rule under triggered messaging and select the type of action you would like to set up you will find it under Web Notifications in the actions menu.
In this example we will show Cart Abandonment

Note that tokens are used in some of the fields such as %product_img% - they will be replaced with the real product image url when the notification is created.

You can change the wording if needed.


How to test web push messages

In order to test the messages you need to know the user id of a user which authorized sending.
1. Authorize sending to your browser - If you have authorized sending when testing the authorization request action, you dont need to do anything. If you have not, go to the authorization request rule, Preview it and allow sending to your browser.

2. Copy your user id - To get your user id, preview the authorization request rule. you will see your user id in the preview message. It looks like this:

Copy the user id number.

2. Send test notification - Return to the Cart abandonment rule and enter the user id in the testing box. Click 'send test notfication' . The notification will appear in your browser.
If no notification appears in your browser - please check the troubleshooting section below.

Note: When previewing a permission request rule, the request is shown again on each page refresh to allow testing. Real site visitors, once they click allow/block will not see the notification again.

Running the rules

Once you're happy with the result, activate the permission request and any notifications sending rules.

Troubleshooting

Here is a list of the things you should check if no notification arrives on the testing phase:

  • On your PC (windows 10) - Go to settings - Notifications and Actions
    Make sure Notifications are ON and that the browser (chrome for example) is set to On

  • Go to the website where you approved receiving notifications - click the lock icon near the website address (chrome used in this example) and set notification permission 'ask' . Then try the permission request routine again.

Did this answer your question?