Magento 2 Web Push Notification Extension – User Manual

1.0 Introduction

For online store owners, it is important to attract new visitor’s attention to their website and also engaging those who already visited it. One great tactic that look promising is web push notifications. Being a store owner, if you have not implemented push notifications for your website, then you are missing some great business opportunities. In order to integrate web push notifications for your site, Knowband offers Magento 2 Web Push Notification Module that will allow admin to send real-time push notifications to their existing and new customers. Web Push Notification module gives you constant power to engage your audience via different kind of push alerts like back in stock alert, price alert, order status alert, abandoned cart alert, etc.

Magento 2 Push Notification for web browsers like Chrome and Firefox displays welcome popup on the user’s device asking for their consent to send alerts on various events. Push notifications are delivered instantly to the users which build up their constant engagement on the store. Magento 2 Browser Notification extension allows admin to send personalized push messages. With this extension, the admin can create and send personalized product recommendations to their customers based on their individual browsing and purchase history. Push notifications are highly responsive over mobile and tablet devices so you can achieve easy interaction with your customers. Web push notifications implemented using Magento 2 Browser Notification extension helps you in delivering various alert messages in real time which has a higher response rate compared to an email which subsequently leads to higher marketing ROI.

1.1 Striking Features of Magento 2 Cart Reminder Push Notification Module

No hassles and coding efforts are involved in the integration of web push notifications to the website. Before that, quickly take an insight into the highlights offered by this Magento 2 Web Push Notifications extension.

1. Magento 2 Web Push Notification Module offers a direct, real-time marketing technique for sending tailored push notifications to dormant users like breaking news updates, notifying customers when items are back in stock or drop price alerts. No matter whether are accessing the site or not, the subscribers will receive timely alerts triggered by the admin.

2. Magento 2 Order Status Update Push Notification triggers a welcome notification popup on the site frontend as the user visits the site. This is a permission popup asking the user to allow or deny automatic updates.

3. Magento 2 Browser Notification extension sends automated notifications for different events like when a user places an order, order status is changed, product price is updated, product stock is updated, or the cart is abandoned.

4. The template and message can be personalized for price alert notifications, stock alert push notifications, abandoned cart alerts or other kinds of custom notifications with the help of this Magento 2 Website Push Notification extension.

5. The notification title, action buttons, popup image shown over the welcome notification popup can be configured from the back-office of this Magento 2 Cart Reminder Push Notification Module.

6. With Magento 2 Browser Notification extension, admin can test web push notifications right after sending them by registering with the send test feature. Push notifications can be tested immediately or at some scheduled time.

7. To integrate push notification service to the website, the admin needs to configure firebase settings from the backend of Magento 2 Web Push Notification Module.

8. Magento 2 Browser Notification extension offers five default push notification templates which can be customized or deleted from back-office. Admin can create multiple custom notification template if they require for their business for announcing offers and new arrivals.

9. Web push notifications are perfectly compatible with browsers like Google Chrome, Firefox, and other browsers as well.

10. Magento 2 Cart Reminder Push Notification Module allows admin to create any type of push notifications with a custom message, title, URL and images. The link can be added to the complete notification popup or to the popup button specifically.

11. Admin can view the list of notification subscribers and product subscribers from the backend of Magento 2 Web Push Notifications extension.

12. Magento 2 Web Push Notification Module allows admin to send the notifications immediately or on a particular time. This functionality can be handled using the cron job. Admin can run the cron job in order to send all scheduled notifications instantly.

13. Magento 2 Web Push Notifications extension lets admin test the promotional alerts before sending it to the actual subscriber base.

14. Web Push Notification For Magento 2 offers a responsive UI for desktop and mobile devices.

15. Magento 2 Order Status Update Push Notification plugin works on multiple store views.

16. Magento 2 Browser Notification extension provides a simple backend interface which can be effortlessly configured by the store admin.

2.0 Installation Guide of Magento 2 Browser Notification Extension

1. Once after purchasing Magento 2 Web Push Notification Module from the Knowband store, you will get the following files on your registered email:

• Source code file of Magento 2 Web Push Notification Module in zipped file format.
• User Manual of Magento 2 Website Push Notification Extension.

2. Unzip the extension package.

3. Create a folder{Magentoroot}/app/code/Knowband/Webpushnotification

4. Upload the extracted content in the above folder via FTP manager (like Filezilla or WinSCP – download here: https://filezilla-project.org/).

5. Add the following dependencies in the Magento root composer.json file:
“mobiledetect/mobiledetectlib”: “^2.8”,
“geoip2/geoip2”: “^2.9.0”
And below command to install the above dependencies:
composer update

6. Now run below commands to install the plugin:
php -f bin/magento module:enable –clear-static-content Knowband_Webpushnotification
php -f bin/magento setup:upgrade
php -f bin/magento setup:di:compile
php bin/magento setup:static-content:deploy

The Magento 2 Web Push Notifications extension is now installed and ready to use.

3.0 Admin Interface of Magento 2 Web Push Notifications Extension

Just after successful installation of Magento 2 Web Push Notification extension on your website, you can create and activate web push notifications for your store in accordance with business requirements. Navigate the settings in the given order: Admin Panel > Knowband > Web Push Notifications

The simple to understand admin interface of Magento 2 Browser Notification extension is divided into eight main sections namely:

1.General Settings
2.Templates
3. Send Push Notifications
4.Delay Push Notifications
5.Subscribers
6.Product Subscribers
7.History
8.Statistics

Each of these sections has been discussed in detail below.

3.1 General Settings

The general settings of Magento 2 Web Push Notification extension is further sub-divided into four sections namely:

1.Configurations
2.Firebase Settings
3.Product Sign Up Box Settings
4.Welcome Notifications Settings

3.1.1 Configurations

• Enable the Extension: This option enables or disables the whole functionality of Magento 2 Web Push Notification Module with the help of toggle button. On enabling this, customer will see a push notification request popup box on their screen.
• Enable/Disable Order Place Notification: This setting enables or disables the notifications after the customer places an order. Admin can send order status notification to the customer after enabling this option.

• Enable/Disable Notification on Order Status Update: This setting will enable or disable the notifications on order status update.
• Enable/Disable Abandoned Cart Notification: This setting will enable or disable the notifications when the customer abandons their cart. This notification only triggers if the customer has abandoned the cart.
• Enable/Disable Product Price Alert Notification: This setting will enable or disable the notification alert for the product price. As there is a drop in product price, product subscribers will receive a notification alert.
  Note: These settings are only applicable when the users subscribe for the product notification.
• Enable/Disable Product Back In Stock Alert Notification: This setting will enable or disable the notification alert for the product stock. When the out-stock product comes back in stock, product subscribers will be notified.
  Note: These settings are only applicable when the user subscribes for the product notification.

3.1.2 Firebase Settings

Firebase works in the backend as a service responsible to push mobile and desktop notifications to users while they are accessing a particular website. These settings are usually set one time during initial module setup.

• API Key: This option allows you to specify the Firebase API key.
• Auth Domain: This option allows you to set Firebase auth domain value.
• Database URL: Using this option you can set the Firebase database URL.
• Project ID: This option lets you set the Firebase project ID.
• Storage Bucket: With this option you can specify Firebase storage bucket.
• Messaging Sender ID: This option sets the Firebase messaging sender ID.
• Server Key: This option will set the Firebase server key.

3.1.3 Product Sign Up Box Settings

In this tab of the Magento 2 Cart Reminder Push Notification Module, the admin can edit the sign-up box settings for the product. Customers who will subscribe to the product will receive its price and stock related alerts. Under this tab, you will get the following options:

• Enable/Disable: This option enables or disables the product signup alerts. If enabled, module will show the Subscription box in the front-end of the store where the customer can subscribe for product price alert or back in stock product alert.
• Sign Up Price Alert Heading: This field allows you to set a heading for the price alert notification box.
• Price Alert Message: You can set a desired push notification message flashed on Price alert subscription box.
• Sign Up Back In Stock Alert Heading: This field allows you to set a custom heading for the back-in-stock notification box.
• Back In Stock Alert Message: You can set a desired push notification message flashed on Back-in-stock alert box.

• Sign Up Button text: You can modify the text shown on the product subscription or signup popup.
• Sign up Heading Background color: You can change the background color for the sign up box heading.
• Sign up Heading Font color: This option allows you to change the subscription box heading font color as per requirement using color picker tool.
• Sign up Content Background color: You can change the Subscription box background color using this option.
• Sign up Content Font color: The admin can change the font color of subscription box text with this option.
• Sign up Block Border color: This field of Web Push Notification module allows you to set the border color for the signup notification box.
• Sign up Button Background color: This option lets you set the background color for the product subscription button shown in sign-up box.
• Sign up Button Font color: This option lets you set the font color for the product subscription button text.

3.1.4 Welcome Notification Settings

Under this section of Magento 2 Web Push Notification module, the admin can customize the look and feel of the Welcome notification box. This Welcome Notification box will be shown in the front-end of the store when the customer enters the store. The users can click on approve button for getting the site notifications or can cancel the option. This section contains the following options:

• Enable/Disable: Admin can enable/disable this Permission Box on the frontend. If enabled, the permission box will be shown in the front-end of the store.
• Action Message: This option sets the display text for the welcome notification popup.
• Approve Button Text: You can enter the display text for the Approve button shown over welcome notification popup box.
• Cancel Button Text: You can enter the display text for the Cancel button shown over welcome notification popup box.
• Disapprove Cookie Expiration Time: This option sets the time for cookie expiration if user disapprove the notification. Like if this value is set to 2, and the user clicks on Cancel/Disapprove button then the welcome notification permission box will be shown to that user after two days.
• Display Logo: This option allows you show/hide the display logo for the welcome notification popup.
• Upload Logo: Using this option, you can browse and upload a desired logo image for the welcome notification popup.
  Note: Web push notification module allows the admin to run cron to send the push notification immediately or after a fixed time.

3.2 Templates

Web Push Notification For Magento 2 offers five default ready-made templates which are fully-customizable and gives flexibility to create new templates as per business needs. Under this section, you can customize or add a new Web Push notification template. The five default notification templates offered include:
1. Order Place Notification Alert
2. Product Back In Stock Alert
3. Product Price Alert
4. Abandoned Cart Alert
5. Order Status Update Alert

Note: The default notification templates can be modified but cant be deleted by the admin. While the new created templates can be modified or deleted from this section.

3.2.1 How to add Custom Notification Template?

An option to add templates of Push Notification for web browsers is provided at the back-office. Simply click on “Add New” button for creating a custom notification template. Fill the following fields in order to create a new notification template for the store.

• Notification Title: With this option, admin can set a title for web push notification.
• Message: Using this option, you can set a custom message for the web push notification.
• Upload Icon: This field allows you to choose a desired icon for the custom push notification.
• Primary Link: With this option, you can set a primary link for the push notification. When the user clicks on the notification popup, they are redirected to this specific link.
• Action Button: You can add as multiple action buttons to display on the push notification popup box. These buttons can be set with different text and action button link.
• After the successful entry of details, the new custom template would be added in the “Push Notification Template” table.
  Note: The Admin can add the N no of Custom template for a various promotional offer like Flash Sale, Buy 2 Get 1, Happy hours and more.
  The other default notification template include:
• Product Back In Stock Alert: When the admin changes the status of the Product quantity to in-stock from the back-end of the module, back in stock push alerts are sent to the customer.
• Product Price Alert: When the admin changes the product price and they offer a discount price then the price alert push notification is sent to the customer.
• Abandoned Cart Alert: This Magento 2 Browser Push Notification module sends an abandoned cart notification to the customer when they leave their cart.
• Order Status Update Alert: When the admin changes the status of the order, this order status push notification is sent to the customer.
• Order Place Notification Alert: As the customer will place an order, this alert is automatically sent to them.

3.3 Send Push Notifications

Magento 2 Cart Reminder Push Notification Module allows admin to send push notifications manually. For this, you have they have to select the template and send time for the push notification. Once the notification is set, you can test it in two ways:

1.Admin can register as admin and then test the push notification. This notification alert is only send to the registered admin not the subscribers.
2.If the admin finds no issue in the push notification, they can send push notification directly to all the subscribers.

• Select Template: This option allows admin to choose the template for notification from the existing ones.
• Send Notification: Admin can send the notification immediately or on a scheduled time.

When the admin sends push notification at a particular time, then the cron has to run manually. Here are the cron instructions:

1. Delay Push Notification CRON
https://www.example.com/ma212/kbwebpush/index/delayPushCron/?SID=dgaqkeauhluhn4cmtaug3gahl2
2. Abandoned Cart Notification CRON
https://www.example.com/ma212/kbwebpush/index/abandonedCartCron/?SID=dgaqkeauhluhn4cmtaug3gahl2

3.4 Delay Push Notifications

Web Push Notification for Magento 2 allows the admin to schedule the notification for a particular time. All the scheduled notification will be displayed in the Push Delay Notification tab along with their status.

 

3.5 Subscribers

Under this section of Magento 2 Web Push Notifications extension, admin can view the total list of subscribers who have allowed the push notifications. Records of users who deny the push notification are not shown in this panel.

The admin can keep a track on the subscribers along with their details like browser name, browser version, platform, device type, country, subscription time and user type.

3.6 Product Subscribers

Web Push Notification For Magento 2 also gives a detailed view to the product subscribers along with their subscription type detail. Admin can see which product is subscribed along with its name, product image, product SKU, Price, Subscription type and subscription date.

 

3.7 History

Magento 2 Web Push Notification Module allows the store admin to view the overall history of web push notifications generated for different events like order place, order status update, price alert, abandoned cart and others. Admin can filter the results based on push notification type or date created. From this section, they can even view the total customers who received a particular push notification.

3.8 Statistics

Magento 2 Website Push Notification extension provides a simple interface to understand the subscription analytics. Admin can easily view the number of desktop subscribers and mobile subscribers. Additionally, you can view particular subscribers coming through Chrome and Firefox browsers.

Note:

• Total Subscribers are the users who have approved the push notifications for their system or device. This includes both desktop and mobile subscribers.
• Total Campaigns are the total push notifications sent for different events.

Report analysis can also be done using graphical statistics as shown in the below image with the help of filter option.

These graphical stats provide information about the total number of subscribers and the total number of push notifications sent to those subscribers.

4.0 Front Interface of Magento 2 Browser Notification extension

A)Welcome Notification Box
This welcome notification box contain buttons to approve or disapprove the alert subscriptions. As the user visits the site, this subscription popup is shown on their front, which they have to either approve or deny. If they “Deny” they will not get any site or product related notifications. If they “Approve”, they will receive sale alerts, offers information and product related updates like back in stock, price drops and abandoned cart.

B)Order Place Notification Alert

C)Order Status Update Alert

D)Product Price Alert

E)Product Back In Stock Alert

F)Abandoned Cart Notification Alert