On - January 13, 2017

Web Push Notificationwebkul.com/blog/web-push-notification-for-magento2/

This impressive module allows you to send push notification messages directly to the web browser. The biggestadvantage of using push notification is its ability to deliver notification immediately to the subscribed users.Unlike emails that sometimes fail to deliver or go to the spam folder, web push notification’s prompt and assuredcontent delivery feature ensures that the notifications are for sure delivered to the users. As long as the browseris running, a subscribed user will get a pop-up message even without opening your website. This improves theuser engagement and retention.

Features of Web Push Notification

It is very well integrated with the platform.

It is compatible with Mozilla Firefox and Google Chrome web browser.

It is designed to work with the SSL certificate websites.

There is no monthly subscription required to notify customers.

There is no limitation on the number of subscribed users.

The admin can create, edit and delete notification messages in the back end.

The admin can add custom icon and target URL for their notification message.

The admin can either send a notification to all registered users or select multiple users in the back end.

Translation of Web Push Notification

For module translation, please navigate through Store > Configuration > General > Locale Options and thenselect your desired language from the Locale drop-down menu.

1/12

Installation process of Web Push Notification

Download the zip file and extract its content on your computer. The extracted folder will have a folder namedsrc, inside this folder, you will find app folder. Copy this app folder into root directory on the server as shownbelow.

After copying app folder, you need to run two commands on the root directory. Please view the belowscreenshots:

First command – php bin/magento setup:upgrade

2/12

Second command – php bin/magento setup:static-content:deploy

After running both the commands, you need to flush the cache from the admin panel by navigating through ->System->Cache management as shown below.

After flushing the Cache storage you will get a confirmation message as shown below.

Creating Firebase Project Credentials of Web Push Notification

In order to use this module, you need to have Firebase Project Credentials, which will be used in the adminconfiguration. Please visit this website https://console.firebase.google.com and create a new project with yourGmail account.

3/12

1. After opening Firebase page, please click CREATE NEW PROJECT button as shown in the abovescreenshot.

2. A small pop-up window will appear with the name of Create a project , here you have to enter your ProjectName and then select your Country/Region.

3. After completing the details click CREATE PROJECT button.

4. After creating your new project click Settings menu icon and select Project Settings option. Please viewbelow screenshot. A new Settings page will be opened.

4/12

5. After entering the Settings page, click CLOUD MESSAGING tab, here you will find your Project Credentials,copy and save your Sender ID and Server Key as displayed below.

These credentials will be used in the next step of admin configuration.

Admin Configuration of Web Push Notification

After successfully installing this module please log in to your admin account and go to STORES menu and thenselect Configuration option as shown below.

5/12

Configuration page will be opened, click Push Notification option. Here you have to enter your Firebaseproject credentials. Enter the Server key and Sender Id as shown in below screenshot. Click Save Configbutton to apply changes.

Once you have installed this module, you will find a new menu option on the left, PUSH NOTIFICATION. Click itand you will have two menu options to select i.e. Notifications Templates and Registered Customers.

6/12

Creating a New Notification Template

After clicking Notification Templates option you will find all the push notification messages on this page. Hereyou can find message information such as title, message, redirect URL, logo, tags, creation date and time. Hereyou can create new, edit or delete your notification messages. To create a new push notification message pleaseclick Create New button as shown in below screenshot.

After clicking Create New button you will arrive at Template Fieldset page where you need to fill out all thenecessary information about your new notification message. Please click Save Template button to save yournew template message.

Template Title – This will be your title of your notification message.

Template Message – This is where you have to enter the content of your message.

Redirect URL – The web page link will be displayed on the notification message.

7/12

Template Tags – Add tags to your messages to identify them.

Template Logo – You can upload any customised logo for the notification.

Please see an example of web push notification below. In the front-end, template title, message, logo, and URLare visible to users.

Selecting Users for the New Web Push Notification

After creating your new template message in the previous step, you need to select your audience who’ll beseeing your new web push notification message. Go to PUSH NOTIFICATION menu on the left and selectRegistered Customers option as shown below.

8/12

On this setting page, you can manage all the Registered Users who have allowed to receive Web PushNotifications from your website, you can either delete or send them notification messages. Here you can findtheir user Id, user token, the total number of records, browser information, creation date and time.

Send Web Push Notification

After creating a new notification template you can either select all registered users or select users individually. Toselect all users click the small drop-down menu and click Select All option. To select users individually use themultiple checkbox options as shown below.

9/12

After selecting the users click Actions drop down menu and select Send Notification and then select one ofyour messages to be sent.

Final confirmation will be asked, click OK button.

10/12

Delete Notification Message

To delete a notification message go to PUSH NOTIFICATION menu on the left and then select NotificationTemplates option page and select the particular message using the checkbox. After selecting the message to goto Actions drop down menu and click Delete. A confirmation message will appear, click OK.

User Front-End of Web Push Notification

After successfully installing Web Push Notification module in your store, the users of the website will get a pop-up message on top of their browser window. This pop-up message will ask users to show notifications from yourwebsite, the users will have to click either Allow or Block option. Please refer from the below screenshot:

11/12

Sample Push Notification

Please see below screenshot to see how your push notification will appear on the front-end. Template Title,Template Logo, Template Message and the Redirect URL are visible to the users.

For any further query or more information about this module please feel free to contact athttp://webkul.uvdesk.com/

12/12