Menu Close
    Start a Project Request quote Reading list Switch to dark mode
    magento-marketplace-mod

    Web Push Notification for Magento 2

    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.

    Features

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

    Installation process

    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

    Second Command – php bin/magento setup:di:compile

    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.

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

    1.  After opening Firebase page. Please create a project by clicking Add project button.

    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.

    Template Fieldset:

    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.

    Send Web Push Notification

    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.

    Delete Template

    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

    You can check how the sent push notification will appear on the webstore front-end. Template Title, Template Logo, Template Message and the Redirect URL are visible to the users.

    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

    . . .

    Comments (4)

    Add Your Comment

  • Kiran
    I can see that this module requires the firebase service for sending push notification.
    Is this service free or it required to me purchase?

    Are there any limitation on how many notification in a day/hour we can send and any limit of user subscription etc

  • Douglas
    This module works with events?
    • Rohit Kashyap
      Hi Douglas,

      Please elaborate your query. What do you mean by ‘events’?. You can share your complete requirements on support@webkul.com

      Thanks.

  • Back to Top
    css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again
    Close

    Table of Content

    Hide Index