Web Push Notification webkul.com/blog/web-push-notification-for-magento2/ On - January 13, 2017 This impressive module allows you to send push notification messages directly to the web browser. The biggest advantage 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 assured content delivery feature ensures that the notifications are for sure delivered to the users. As long as the browser is running, a subscribed user will get a pop-up message even without opening your website. This improves the user 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 then select 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 named src, inside this folder, you will find app folder. Copy this app folder into root directory on the server as shown below. After copying app folder, you need to run two commands on the root directory. Please view the below screenshots: 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 admin configuration. Please visit this website https://console.firebase.google.com and create a new project with your Gmail account. 3/12
1. After opening Firebase page, please click CREATE NEW PROJECT button as shown in the above screenshot. 2. A small pop-up window will appear with the name of Create a project, here you have to enter your Project Name 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 view below 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 then select Configuration option as shown below. 5/12
Configuration page will be opened, click Push Notification option. Here you have to enter your Firebase project credentials. Enter the Server key and Sender Id as shown in below screenshot. Click Save Config button to apply changes. Once you have installed this module, you will find a new menu option on the left, PUSH NOTIFICATION. Click it and 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. Here you can find message information such as title, message, redirect URL, logo, tags, creation date and time. Here you can create new, edit or delete your notification messages. To create a new push notification message please click 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 the necessary information about your new notification message. Please click Save Template button to save your new 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 URL are 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 be seeing your new web push notification message. Go to PUSH NOTIFICATION menu on the left and select Registered Customers option as shown below. 8/12
On this setting page, you can manage all the Registered Users who have allowed to receive Web Push Notifications from your website, you can either delete or send them notification messages. Here you can find their 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. To select all users click the small drop-down menu and click Select All option. To select users individually use the multiple checkbox options as shown below. 9/12
After selecting the users click Actions drop down menu and select Send Notification and then select one of your 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 Notification Templates option page and select the particular message using the checkbox. After selecting the message to go to 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 popup message on top of their browser window. This pop-up message will ask users to show notifications from your website, 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 at http://webkul.uvdesk.com/ 12/12