Read More
Read More
Menu Close

    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 that it delivers the message immediately.

    Unlike emails that sometimes fail to deliver or go to the spam folder. Moreover, the 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 user engagement and retention.

    Check the updated plugin overview and backend configuration as well in the video mentioned below –



    • It is very well integrated with Magento 2 Platform.
    • Compatible with Mozilla Firefox, Google Chrome web browser and mobile browsers.
    • 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

    Initially, 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.

    Searching for an experienced
    Magento 2 Company ?
    Read More

    Installation Of Magento2 Accordion FAQ

    After the successful installation, you have to run these commands in the Magento 2 root directory.

    First command- php bin/magento setup:upgrade

    run first command via terminal

    Second Command – php bin/magento setup:di:compile
    run second command via terminal

    Third Command – php bin/magento setup:static-content:deploy
    run third command via terminal
    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.

    Installation Of Magento2 Accordion FAQ

    Multi-Lingual Configuration

    Further, for Multilingual support, please navigate to Store>Configuration>General >Locale Options. And select your desired language from the Locale option.change language-magento 2 locale

    Language Translation

    Moreover, 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.

    Magento2 Change CSV language file

    Once you have opened the file for editing. Replace the words after the†comma(,)†on the right with your translated words.

    Magento2 Change Language

    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.

    Magento2 Change CSV Language file

    How to Get API Credentials?

    To use Magento 2 Web Push Notification, you need to have Firebase Project Credentials. Meanwhile, 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.create firebase project initially

    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 the firebase project to move further

    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 project settings

    4. After entering the Settings page, go to Cloud Messaging tab. Further, from here you will find your Project Credentials. Copy and save your Server Key and Sender ID as shown in the snapshot below.copy the keys for sending the notification over cloud arcitecture

    5. Moreover, 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.module_configuration_settings_admin_webstore_backend

    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.

    push notification menu options for configuration at admins end

    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.

    Further, the admin can add, edit or delete notification messages. To create a new push notification message, please click Create New.create new notification

    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. After that, 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.

    create new template as required

    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. Meanwhile, the admin can view subscribed user ID, name, browser, and subscribed time & date.registered users section with details

    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.sending web push notifications when required

    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.

    delete selected templates as required

    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:

    visible webstore fronetnd notification

    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.sample push notification

    Sample Push Notification (Mobile browser)

    For any further query or more information please feel free to contact us by creating a ticket at our HelpDesk system.

    Current Product Version - 5.0.2

    Supported Framework Version - Magento 2.0.x, 2.1.x, 2.2.x,2.3.x, 2.4.x

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


  • Brad Smith
    Great Blog. Thank you for sharing the valuable information about Push notification.
    • Raahim Salmani (Moderator)
      Thank you for sharing your views
  • Anonymous
    how to develop this module custom.
    • Subhangi (Moderator)

      Kindly elaborate on your requirement for better assistance. Also, you can mail us at [email protected] with your detailed requirement. So that our team can assist you in a better way.

      Thanks and Regards,
      Webkul Team.

  • 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 (Moderator)
      Hi Douglas,

      Please elaborate your query. What do you mean by ‘events’?. You can share your complete requirements on [email protected]


  • Back to Top

    Table of Content