Menu Close
    Start a Project Request quote Reading list Switch to dark mode

    Web Push Notification for Magento

    This module allows you to send push notification messages to users on the browser. The advantage of using push notification is its ability to deliver messages immediately. It can contain any information such as new product launch, new offers, important news. Unlike the emails, which users might not read. Or land up in the spam/junk folder. The users always see the push notification on their screen. As long as the browser is running, the user will see the push notification. A subscribed user will get a pop-up message on top of the screen even without opening up your website. This improves the user engagement and retention.

    Features of Web Push Notification

    • The module is very well integrated with the Magento platform.
    • Compatible with Mozilla firefox and Google chrome desktop browsers.
    • It even works with the SSL certificate websites.
    • There is no monthly subscription required to notify customers.
    • No limitation on the number of subscribed users.
    • The admin can create, edit and delete notification templates in the back end.
    • Remove any subscribed user from the list to disable any further notifications.
    • Add a custom icon and redirect URL with the push notification.
    • Send push notifications to either all registered users or selected users.
    • Find any specific template or subscribed users using search option

    Installation process

    Installation of the module is very easy. Extract the downloaded zip and then move the app and skin folder into magento root directory.

    After moving both the folder flush the cache from magento admin module. Under System > Cache management.

    Module Translation

    After the module installation, the user will unzip the folder and click on src folder. Inside that folder, you will find app folder. Click on the app folder and you will get locale and inside that, you will find the language folder in the English language as en_US. Now follow the same path and open the locale folder where you have installed the Magento and go inside the locale folder and create a new folder and name with the language for which you want to convert your module content. Now edit the translate.csv and then upload to your server inside the locale folder.

    Before uploading the CSV file, open and edit it with the translated keywords.

    Creating Firebase Project Credentials

    In order to use this module, you need to have Firebase Project Credentials. Please visit this link and create a new project with your Gmail account.

    1.  After opening Firebase website, 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. After creating your new project click Settings menu icon and select Project Settings option. Please view below screenshot. A new Settings page will be opened.

    5. After entering the Settings page, click CLOUD MESSAGING tab, here you will find your Project Credentials, copy and save your Server Key and Sender ID as displayed below.

    These credentials will be used in the next step of Magento configuration.

    Admin Configuration for web Push notification

    After successfully installing this module please log in to your Magento Admin Panel and go to System menu and then select Configuration option as shown below.

    Configuration page will be opened, click Push Notification option on the left. Here you have to enter your Firebase Project Credentials. Enter the Server key and Sender Id as shown in below screenshot. Click Save Config button to apply changes.

    Once you have configured this module, you will find a new menu option on top, Push Notification in Magento Admin Panel. Click it and you will have two menu options to select i.e. Manage Templates and Send Notification.

    Manage Templates

    After clicking Manage Templates option you will find all the notification templates on this page. Here you can find information about the templates such as ID, Title, Message, Redirect URL, Logo, Tags, Creation Date and Time. Here you can create new, edit or delete your notification template. To create a new push notification template please click Add New button as shown in below screenshot.

    Search option can be used to find any specific notification template from the list.

    To delete a notification template, select template using the checkbox. Now, go to Actions drop down menu and choose Delete option and then click Submit button.

    After clicking Create New button you will arrive at Template information page where you need to fill out all the necessary information about your new notification message. Please click Save Template button to save your new template message.

    Template Information:

    Title – This will be your title of your notification message which will appear on top.

    Message – This is where you have to enter the content/body of your message.

    Redirect URL – Enter the web page link for the notification.

    Tags – Add tags to your messages for searching and filtering them from the list.

    Logo – You can upload any supported image file for your notification logo, click the Browse button.

    Send Notification

    Now to send a new notification message or manage your subscribed users you need to navigate through Push Notification > Send Notification. On this page, you can find some information about your subscribed users such as ID, Subscribed From (browser), Subscriber Name, Subscribed At.

    Use search option to find any particular subscribed user from the list.

    To send a notification, either click Select All or use multiple checkboxes, then go to Actions drop down menu and select Send Notification. Now you need to Select Template from the menu and then click Submit button as shown in below screenshot.

    To remove any subscribed user(s), use the Actions drop down menu and select Delete option, then click Submit button.

    Notification Sent Successfully

    When you have successfully sent a new push notification to your users, you will get a small message on top as “Push notification(s) has been sent”


    User Front-End of web push notification

    After successfully installing Web Push Notification module in Magento, the users of the website will get a pop-up message on top of their browser window. This pop-up message will ask users whether 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

    Please see below screenshot to see how your push notification will appear on the front-end. Title, Logo and Message elements are visible to the subscribed users.

    Thank you for reading this blog, if you have any further query or require more information about this module please feel free to reach

    . . .


    Add Your Comment

    Be the first to comment.

    Back to Top
    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

    Table of Content

    Hide Index