Magento 2 Push Notifications

Magento 2 Push Notification extension help increase customer engagement by sending real time push notifications to subscribed customers for quick notifications.

 

Table of Content

  1. Extension Installation Guide
  2. Firebase API Registration
  3. Configuration
  4. Manage Push Notifications
  5. Give Push Notification Consent from Frontend
  6. Manage Subscribers
  7. Push Notifications to Subscribers

 

  1. Extension Installation
  • For Magento Marketplace Customers
  • Create a folder structure in Magento root as app/code/Meetanshi/PushNotification
  • Download and extract the zip folder and upload our extension files to the app/code/Meetanshi/PushNotification via FTP.
  • Login to your SSH and run below commands step by step:
  • php bin/magento setup:upgrade
  • For Magento version 2.0.x to 2.1.x - php bin/magento setup:static-content:deploy
  • For Magento version 2.2.x & above - php bin/magento setup:static-content:deploy –f
  • php bin/magento cache:flush
     
  • For Meetanshi Customers
  • Extract the zip folder and upload our extension to the root of your Magento 2 directory via FTP.
  • Login to your SSH and run below commands step by step:
  • php bin/magento setup:upgrade
  • For Magento version 2.0.x to 2.1.x - php bin/magento setup:static-content:deploy
  • For Magento version 2.2.x & above - php bin/magento setup:static-content:deploy –f
  • php bin/magento cache:flush

 

  1. Firebase API Registration
    The extension uses Firebase API to send push notifications.

 

    • Enter the project name, accept the Firebase terms and click Continue.

 

    • Enable or disable Google Analytics for the project and click Continue.

 

    • Once the settings are done, you can see the message, “Your New Project is Ready”. Click “Continue” to view the project details.

 

    • Click on the gear icon and move to the “Project Settings”.

 

    • In the “General” tab, under the “Your Apps”, click </> to create a new web app.

 

    • Add the app nickname and click “Register App”.

 

 

    • From the console, move to “Cloud Messaging” tab and find the server key, copy it and paste the same in the Magento 2 push notifications extension configuration under the respective field.

 

  1. Configuration
    For configuring the extension, login to Magento 2, move to Stores à Configuration à Meetanshi > Push Notifications where you can find various settings to enable the extension.
  • Push Notifications: Enable the Push Notifications extension from here.
  • Web API Key: Enter the web API key you got while registration with the Firebase API.
  • FCM Auth Domain: Enter the Auth domain you got while registration with the Firebase API.
  • FCM Database URL: Enter the database URL you got while registration with the Firebase API.
  • FCM Project ID: Enter the project ID you got while registration with the Firebase API.
  • Messaging Sender ID: Enter the messaging sender ID you got while registration with the Firebase API.
  • FCM App ID: Enter the App ID you got while registration with the Firebase API.
  • Server Key: Enter the server key you got while registration with the Firebase API.

 

  1. Manage Push Notifications
    The admin can manage and add push notification templates from a separate grid at Push Notifications > Manage Push Notifications. Here, all the already added push notification templates seen enlisted.

  • Add New Push Notification
    Click “Add New Notification” button to add new notification template. Add the details and click to save the notification template.
    • Status: Enable the push notification template from here.
    • Title: Enter the title of the new push notification to show in the notification dialog.
    • Description: Enter the description of the push notification to show in the notification dialog.
    • Redirect URL: Enter URL where you want users to get redirected on click of the notification dialog.
    • Logo: Upload the brand logo to show in the notification dialog.
    • Tags: Enter the tags to identify and filter the push notifications.

   

  1.  Give Push Notification Consent from Frontend
    Once the extension is enabled, whenever the users visit the website, push notification dialog will open up and ask them to allow or block notifications. The users have to click the “Allow” button to receive web push notifications from the website. 

 

  1. Manage Subscribers
    Immediately after the users have subscribed to receive the push notifications, a backend grid at Push Notifications > Manage Subscribers list them with the details like name of the subscribers, browser from which they have subscribed, and time and date of the subscription. 


    The admin can multi select subscribers, select the mass action “Send Notification” and select one of the notification templates to send push notifications to the selected subscribers. The admin can also delete the subscriber from here.

 

  1. Push Notifications to Subscribers
    Once the admin sends push notification to the subscribers, they immediately receive the push notification having the details like title, description, logo and redirect URL. Users can click the notification to get redirected to the URL specified from the backend.

​​​​​​​