Web Push Notification for Magento 2 allows you to send real-time push notifications to your customers. The subscribed users can see the push notifications on their web browser. The advantage of using push notifications is thamagentot it delivers the message immediately.
Unlike emails that sometimes fail to deliver or go to the spam folder. Web push notifications are always delivered and seen by the users.
As long as the browser is running, a subscribed user will get a message even without opening up your website. This improves the user engagement and retention.
- It is very well integrated with Magento 2 Platform.
- Compatible with Mozilla Firefox and Google Chrome web browser.
- Designed to work with the SSL(Secure Sockets Layer) certificate websites.
- There is no monthly subscription required to notify customers.
- The admin can view the subscribed users list.
- There is no limitation on the number of subscribed users.
- The admin can create, edit and delete notification messages in the back end.
- A custom icon and target URL for their notification message can be set.
- Notifications can be sent to either all registered users or selected users.
Download the zip file and extract its content on your computer. The extracted folder will have a folder named as src, inside this folder, you will find app folder. Copy this app folder into Magento 2 root directory on the server as shown below.
After the successful installation, you have to run these commands in the Magento 2 root directory.
First command- php bin/magento setup:upgrade
Third Command – php bin/magento setup:static-content:deploy
After running both the commands, you need to flush the cache from the Magento admin panel. Navigate through System->Cache management as shown below.
After flushing the Cache storage you will get a confirmation message as shown below.
If you need to do the module translation, please navigate to the following path in your system app/code/Webkul/PushNotification/i18n.
Open the file named en_US.CSV for editing as shown in the below screenshot.
Once you have opened the file for editing. Replace the words after the†comma(,)†on the right with your translated words.
After editing and translating the CSV file, you need to save the translated file name according to your region language and country code such as – de_DE.CSV. Then upload the translated file to the same folder from where you have obtained it. Now your module translation is complete.
How to Get API Credentials?
To use Magento 2 Web Push Notification, you need to have Firebase Project Credentials. It is required during module configuration. Please click here and create a new project with your Google account.
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 and then click Create Project button.
3. After creating your new project, click Settings menu icon. And then select Project Settings option. Please view below screenshot. A new Settings page will open.
4. After entering the Settings page, go to Cloud Messaging tab. From here you will find your Project Credentials. Copy and save your Server Key and Sender ID as shown in the snapshot below.
5. Now, navigate through General->Settings to generate a new service and you will receive the required data for configuring the rest of the module backend settings.
Module Configuration – By Admin
After installing this module, log in to the Magento 2 backend admin panel and navigate through Stores>Configuration>Push Notification.
Here, you have to make use of the credentials that you have generated as shown under the section – “How to Get API Credentials?“.
Here, enter the –
- Web API Key
- FCM(Firebase Cloud Messaging) Auth Domain
- FCM Database URL
- FCM Project Id
- Messaging Sender Id
- FCM App Id
- Server Key
- Public Key
After entering the required values, tap the Save Config button at the top right-hand corner.
Once you have installed this module, you find a Push Notification menu option on the left side admin panel. Tap it and you will have two sub-menu options to configure –
- Notifications Templates
- Registered Users.
Creating a New Notification Template
After clicking Notification Templates option, you will find all the push notification messages already created. Here, you can find the template title, message, redirect URL, logo, tags, creation date and time. The admin can add, edit or delete notification messages. To create a new push notification message, please click Create New.
After clicking Create New button you will arrive at Template Field set page. Here you need to fill out all the necessary information about your new template. Please click Save Template button to save your new template message.
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.
Template Tags – Add tags to your messages to identify them.
Template Logo – You can upload any customized logo for the notification.
How to Select Users for the New Web Push Notification?
After creating the template in the previous step, you need to select your recipients. Go to Push Notification>Registered Users option.
On this page, you can manage all the Registered Users. These are the subscribed users of your website. You can either delete or send them notification messages. The admin can view subscribed user ID, name, browser, and subscribed time & date.
After creating a template the admin can select all or few subscribed users. To select all users click the small drop-down menu and click Select All option. To select few users use the checkbox option. After selecting the users. Go to Actions>Send Notification, then select the template.
Click OK button to send the notification.
For deleting template go to PUSH NOTIFICATION menu and select Notification Templates option. Then 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 view
After the installation of the module when a user visits your website, it will see a push notification. This first push notification will ask users whether to allow or block notifications. The users have to click the Allow button to receive notifications from your website. Please refer from the below screenshot:
Sample Push Notification
For any further query or more information please feel free to contact us by creating a ticket at our HelpDesk system.
Current Product Version - 3.0.1
Supported Framework Version - 2.0.x, 2.1.x, 2.2.x, 2.3.x