Magento 2 Multi Vendor Web Push Notification

Magento 2 Marketplace Web Push Notification extension 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 prompt, and assured content delivery feature ensure 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 Magento 2 Marketplace Module module installed.

Features – Marketplace Web Push Notification

• The 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.
• Schedule notifications to send automatically to subscribed users.
• Sellers can also delete their subscribers.

Installation

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 the 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

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.

Multi-Lingual Configuration

For Multilingual support, please navigate to Store>Configuration>General >Locale Options. And select your desired language from the Locale option.

Language Translation

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 Magento 2 configuration.

Please visit this website firebase console 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 the Settings menu icon and select the Project Settings option. Moreover, please view the below screenshot. A new Settings page will be opened.

5. Once you enter the Project Settings page, click the 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 the Magento 2 configuration.

6. When you navigate through  Project Settings > General you will find the other Firebase Project Credentials under webapps. 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 include 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.

Push Notification Rule:

Here, the admin can enable the automatic push notification rule by enabling this option. The admin can add a new rule by setting up the time when the push notification will be sent out automatically to the subscribers and choosing the respective template for the same.

• 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: The server key 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 found in cloud messaging under the project setting as web push certificates as shown in the image below-

 

 

Admin management

After adding the credentials, click the 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:

Notification Templates

In the Notification Templates option, the admin can see all the lists of templates created. The admin can create a new template by clicking Create New button. To edit any template click the Edit button as shown 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 the above screenshot.

After that admin will arrive at the Template Fieldset page where the admin needs to fill out all the necessary information about the new notification message. Please click the Save Template button to save a 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 the 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 the Actions drop-down menu and click Delete. A confirmation message will appear, click OK.

Notification Subscribers

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 the Actions menu either to send a new push notification or to delete the user(s). The admin can use the 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 the Id column. Then go to the Actions drop-down menu and select any one template.

A final confirmation message will appear, click the 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 the Id column. Then go to the Actions drop-down menu and click the Delete option.

A final confirmation box will appear, click OK. Please refer to the screenshot below:

Seller End

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 the menu option Push Notification as per the below image

Notification Templates

To manage notification templates click the Notification Templates sub-menu option. Here the seller will find 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 the Action column. The seller can also search for its templates by entering the title or message in the search field and clicking 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 the Save button. Please refer to the screenshot below:

Template Information:

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 the 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.

Delete Template(s)

To delete template message(s) navigate to Notification Templates and select your desired template(s) using a checkbox.

After selecting click the Delete Template button at the top or click the delete icon under the Action column. A final confirmation message will appear on the screen and click the OK button.

Notification Subscribers

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 users’ details, and send a push notification or delete the subscribed user using the delete button. There is also a search option on top, where the seller can find users according to the web browser and subscription 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 the browser column and all the users will be selected. After that, select any one of the templates using the drop-down menu and click the Send Notification button.

Please refer to the screenshot below:

A final confirmation message will appear, click the OK button to send the notification message. Please see the below screenshot:

Front-end (Magento 2 Marketplace Web Push Notification)

After successfully installing the Marketplace Web Push Notification module in Magento 2, 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 to 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 selects 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. 

 

 

For any further query or more information about this module please feel free to contact us at [email protected] or raise a ticket at our HelpDesk system.