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
  • Find the Composer name and version of the extension in the extension’s composer.json file.
  • Login to your SSH and run:
    • composer require meetanshi/magento2-push-notifications
  • Enter your authentication keys. Your public key is your username; your private key is your password.
  • Wait for Composer to finish updating your project dependencies and make sure there aren’t any errors.
  • To verify that the extension installed properly, run the command:
    • php bin/magento module:status Meetanshi_PushNotification
      • • By default, the extension is probably disabled.
        • Enable the extension and clear static view files:
    • php bin/magento module:enable Meetanshi_PushNotification --clear-static-content
    • 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

Note: Immediately after installing the extension, paste API Key, auth domain, database URL, project ID, storage bucket, sender ID, app ID and measurement ID to firebase-messaging-sw.js file and upload it to the Magento root folder to make the extension work.

 

2. Firebase API Registration
   The extension uses Firebase API to send push notifications.
   • To get the Firebase API details, go to https://console.firebase.google.com/ and click on “Create a Project”.

 

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

 

• • On registering the app, you can see various web app details. Copy web API key, auth domain, database URL, project ID, sender ID, app ID, and paste it in the Magento 2 push notifications extension configuration under the respective fields. Click “Continue to Console”.

 

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

 

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

 

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

   

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

 

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

 

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