Marketplace Web Push Notification add-on for Magento 2 allows the sellers and the admin to send push notification messages directly to the web browser. The advantage of using push notifications is its faster notification delivery.
This module delivers the notification immediately to the subscribed users.
However, 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 user interaction and retention.
Please Note – This is a marketplace add-on, in order to use this module you need to have the Magento2 Marketplace Multi-Vendor module installed.
Features – Marketplace Web Push Notification
- Web Push Notification module is very easy to configure and set up.
- Compatible with Mozilla Firefox, Google Chrome desktop browsers and mobile browsers.
- It is designed to work with the SSL (Secure Sockets Layer) certificate websites.
- There is no monthly subscription fee required to send the notifications.
- There is no limitation on the number of subscribed users, any number of users can be added.
- The admin can create, edit and delete notification templates from the back-end.
- The sellers can create, edit and delete notification templates from the front-end.
- That particular subscribed user can be removed from the list who doesn’t want to receive any further notifications.
- A custom icon and redirect URL link can be added with the web push notification.
- Notifications can be sent either to all or selected subscribed users.
- Search options can be used to find any specific template or subscribed users from the lists.
- The admin can manage all the subscribed users of the store from the backend.
- Web Push Notification supports multiple language translations.
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 the app folder.
Copy this app folder into Magento2 root directory on the server as shown below.
After the successful installation, you have to run these commands in the Magento2 root directory.
First command –
php bin/magento setup:upgrade
Second Command –
php bin/magento setup:di:compile
Third Command –
php bin/magento setup:static-content:deploy
After that, you need to flush the cache from the Magento 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.
For Multilingual support, please navigate to Store>Configuration>General >Locale Options. And select your desired language from the Locale option.
If you need to do the module translation, please navigate to the following path in your system app/code/Webkul/MpPushNotification/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.
Creating Firebase Project Credentials
In order to use this module, the admin needs to have Firebase Project Credentials, which will be used in the Magento2 configuration.
Please visit this website https://console.firebase.google.com and create a new project with the Gmail account. Open the Firebase page.
1. After that, 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. Click Settings menu icon and select Project Settings option. Moreover, please view below screenshot. A new Settings page will be opened.
5. Once you enter 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 Magento 2 configuration.
6. When you navigate through Settings > General you will find the other Firebase Project Credentials. You need to enter these credentials to the admin configuration.
Module Configuration – Settings
After the successful installation of the Marketplace Web Push Notification module, log in to the admin account and go to the STORES menu and then select the Configuration option as shown below.
Once the Configuration page appears, navigate to Webkul > MP Push Notification option.
After that, the admin has to enter the Firebase project credentials, which includes the fields: Web API Key, FCM Auth Domain, FCM Database URL, FCM Project id, Messaging Sender id, FCM App id, Server key, and Public key.
Click the Save Config button to apply changes.
- Web API Key: The admin can get the Web API key from the firebase in the General tab under the project setting.
- FCM Details
- Auth Domain: enter the auth domain name here from the firebase web app.
- Database URL: enter the FCM database URL here
- Project Id: enter the generated FCM Project ID here.
- Messaging Sender Id: enter the sender ID here.
- FCM App Id: enter the FCM App ID here.
- Server Key: Server key which is generated using the firebase web app and it can be found in cloud messaging under the project setting.
- Public Key: enter the public key here and it can be find in cloud messaging under the project setting as web push certificates as shown in the image below-
After adding the credentials, click Marketplace Management menu, the admin will find Push Notification Manager menu options i.e. Notification Templates and Notification Subscribers. Please refer to the below screenshot:
In Notification Templates option, the admin can see all the list of templates created. The admin can create a new template by clicking Create New button. To edit any template click Edit button as shown in below screenshot:
Create New Template
To create a new template Navigate to Marketplace Management > Marketplace Push Notification > Notification Templates and click Create New button as shown in above screenshot.
After that admin will arrive at Template Fieldset page where the admin needs to fill out all the necessary information about new notification message. Please click Save Template button to save new template message.
Please refer to the below screenshot:
New Template Information:
Template Title – This will be the title of your notification message.
Template Message – This is where you have to enter the content of your message.
Redirect URL – When the user clicks the notification message it will redirect to new web page link.
Template Tags – Add tags to your messages to identify them.
Template Logo – You can upload any supported image file for the notification logo.
Delete Notification Template(s)
Firstly, navigate to Marketplace Management > Push Notification Manager > Notification Templates. After that select the particular template(s) using the checkbox option.
Go to Actions drop-down menu and click Delete. A confirmation message will appear, click OK.
In the Notification Subscribers option, the admin will see a page where it will show information about all the users who have clicked Allow button and agreed to receive notification messages.
The admin can use Actions menu either to send a new push notification or to delete the user(s). The admin can use Filters option to search users using Id, User Token, Browser and Created at. Please refer to the screenshot below:
Send a New Web Push Notification
To send a new web push notification message, navigate to Marketplace Management > Marketplace Push Notification > Notification Subscribers.
After opening the Notification Subscribers page, select any notification subscribers using the checkbox or to select all users click the top checkbox near Id column.
Then go to Actions drop-down menu, click Notification Subscribers and select any one template.
A final confirmation message will appear, click OK button.
Delete Registered User:
To delete any of the registered user(s), navigate to Marketplace Management > Marketplace Push Notification >Notification Subscribers.
After opening the Notification Subscribers page select notification subscribers using the checkbox or to select all the users click the top checkbox near Id column. Then go to the Actions drop-down menu and click Delete option.
A final confirmation box will appear, click OK. Please refer to the screenshot below:
After logging in to the seller account, there will be two sub-menu options i.e. – Notification Subscribers and Notification Templates will be visible under menu option Push Notification as per the below image
To manage notification templates click Notification Templates sub-menu option. Here the seller will find all the list of templates, to create a new template message simply click on Create Template button.
To edit or delete an existing template click edit or delete icon under Action column. The seller can also search for its templates by entering the title or message in the search field and click Submit. Please refer to the screenshot below:
Create New Template
After clicking the Create Template button, the seller will see the Create New Template configuration page. Here the seller has to fill in the information and click Save button. Please refer the screenshot below:
Title – This will be the title of your notification message.
Message – This is where you have to enter the content of your message.
Redirect URL – When the user clicks the notification message it will redirect to new web page link.
Tags – Add tags to your messages to identify them.
Logo – The seller can upload any supported image file for the logo.
To delete template message(s) navigate to Notification Templates and select your desired template(s) using a checkbox.
After selecting click Delete Template button at the top or click delete icon under Action column. A final confirmation message will appear on screen, click OK button.
After clicking the Notification Subscribers menu option, the seller will see a page where it will show all the subscribed users of the website who have clicked Allow button and agreed to receive notification messages.
The seller can view registered user’s details, send a push notification. There is also a search option on top, where the seller can find users according to the web browser and subscribe date. Please refer to the screenshot below:
Send a New Push Notification
To send a push notification message, navigate to the Notification Subscribers menu option and select the Notification Subscribers using the checkbox menu option.
To select all users click the top checkbox near browser column and all the users will be selected. After that, select any one of the templates using the drop-down menu and click Notification Subscribers button.
Please refer to the screenshot below:
A final confirmation message will appear, click OK button to send the notification message. Please see the below screenshot:
After successfully installing the Marketplace Web Push Notification module in Magento2, the website users will get a pop-up 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:
Sample Push Notification
Here’s the sample web push notification message which will appear on the front-end.
Please note: – If a seller or the admin select all the users and sends a web push notification message, that message will be seen by all the Notification Subscribers of the website.
Sample Push Notification (Mobile browser)
Web push notification message will appear on the front-end.
Current Product Version - 5.0.0
Supported Framework Version - Magento 2.0.x, 2.1.x, 2.2.x,2.3.x, 2.4.x