Categories

Push Notification Extension is a Magento 2 extension developed by Pits Solutions to boost user engagement by integrating Firebase Cloud Messaging. This tool delivers quick and relevant updates, improving user experiences. Even during user inactivity, it keeps the communication alive with real-time updates. This is crucial for time-sensitive info, breaking news, or important events. In a world where attention is scarce, push notifications grab it, reviving user interest. The direct communication they offer significantly increases the chances of users coming back. Installing this extension in your online store is a breeze, promising to open new doors for refining your business strategies.

The Push Notification extension grants customers the authority to choose whether they wish to receive push notifications. This opt-in or opt-out decision is presented via a prompt box, enabling them to indicate their preference. After a customer place an order, the extension send customers updates about their orders directly to their devices.

On the administrative front, the extension equips administrators with a powerful toolset. This toolset enables them to dispatch tailored push notifications to the entire customer base. For instance, if there's a fresh discount offer, store owners can quickly send offer to all their customers. This functionality is seamlessly executed via a user-friendly form within the administrative section of the website. Such capabilities facilitate effective and streamlined communication, enabling the establishment to maintain a strong connection with customers while efficiently sharing significant updates or offers.

In summary, the Push Notification extension for Magento 2 gives customers control over push notifications and let store owners easily connect with their customer base. This tool boosts customer engagement and makes it simple to share information, leading to better relationships between businesses and their customers.

Push Notification extension is compatible with Windows (Chrome, Firefox, Opera), macOS (Safari -on macOS may limit silent push notifications to 3 per hour per origin. Excessive background notifications may be suppressed.), and Android devices. However, please note that our extension is not supported on iOS devices.

Now you have created your web app for push notification.

In web app setting open general tab and scroll down now you can see all required keys.

Generate a Key Pair:

Scroll to Web Push certificates section. Click Generate Key Pair to generate your VAPID key pair. Copy the Public Key .

• Create a Service Account for HTTP v1:
  Go to Project Settings > Service Accounts tab. Click Generate new private key for the Firebase Admin SDK. This will download a .json file containing your service account credentials.

Now we have all the keys, now you only need to add this value into pits store configuration.

Login to the Admin panel and navigate to Pits Push Notification-> Push Notification Configuration.

In push notification configuration there are 5 sections.

The first section is for enabling / disabling push notification, configure FCM and to set push notification position

Push notification FCM configuration fields

Push notification FCM configuration fields

Here you need to fill up the fields with FCM configuration values. In Notification Position in frontend option you can select the position where push notification should appear in the frontend. If the website is running in the background then position will not change and the notification it will appear in the default position.

There are four options available in Notification Position in frontend (bottom left, bottom right, top left and top right) if we select top right position then push notification will appear in top right position. 

Push notification in the top right position of the website.

If the site is running in the background then the custom positioning will not work and it will have the default position which is bottom-right.

Push notification appears in its default position and design as the website was running in the background.

This section is for configuring the push notification permission pop up text and icon. Here we can see two fields: one for entering the permission pop-up message and the other for uploading image for the permission pop-up. 

Configuration for permission pop-up.

Permission pop appearing in front end.

By default, “Get custom notification from the site” message will appear in the permission pop-up box. After allowing the permission pop-up, you will also need to allow notification permission from the browser.

Permission pop up from the site.

Push notification for order update has 4 sections

This section is used to handle push notification while placing an order.

Fields for push notification while placing an order.

Push notification while placing an order.

“Push Notification for Invoice”, “Push Notification for Shipment” and “Push Notification for Creditmemo” sections are used to configure push notification for order updates like invoice, shipment and creditmemo creation. Admin can enable/disable push notification for each section. 

Invoice Sections and its fields for push notification.

Push notification for invoice generation.

Shipment sections and its fields for push notification.

Push notification for shipment creation.

Creditmemo sections and its fields for push notification.

Push notification for creditmemo creation. 

In this section we have three sub sections for product notification. 

Three sub sections of “push notification for product” 

Push notification for new product config values 

In this section, we can add configuration values for push notifications for new products. The notification image will be used only if the product image is missing, and the action URL for the product will be the product URL. After configuring the store settings, you need to check the box in the push notification section of the product edit/add form for the product you want to send a new product alert for, and then save the product. After saving the product with selected checkbox for “New product alert”, the notification will be sent to all customers who have enabled push notifications. If you want to send the push notification again, you need to repeat the process. The new product alert is only applicable if the product is enabled and visible on the storefront.

New product alert check box in product edit/add form

Configuration filed for push notification for price drop

Here we can configure the fields for product price drop alert push notifications. The "Enable price drop alert" setting is used as the default value for all products. The notification image will be used only if the product image is missing, and the action URL for the product will be the product URL.

After saving the store configuration, you can individually select each product and decide whether to enable the product price drop alert, disable it, or use the default "Enable price drop alert" setting from the store configuration. To do this, navigate to Catalog -> Products, click the edit action link for the product you want to edit, and go to the "Push Notification" section to configure "Product Price Drop Alert” field.

Product price drop alert field in Push notification section of product edit form

If you select a product for a price drop alert, customers will receive a notification each time the price of that product drops.

Product price drop alert in store front

Configuration field for product stock alert

Here we can configure the field for stock alert push notifications. In this section, we have the “Threshold quantity for stock,” where we can assign the threshold quantity. This means that if the product quantity decreases below this threshold, a stock alert will be triggered. All other fields in the stock alert configuration are the same as the price alert configuration.

After saving the store configuration, you can individually select each product and decide whether to enable the product stock alert, disable it, or use the default "Enable stock alert" setting from the store configuration. To do this, navigate to Catalog -> Products, click the edit action link for the product you want to edit, and go to the "Push Notification" section to configure the "Product Stock Alert” field.

Product stock alert filed in Push notification section of product edit form

A stock alert is triggered when someone places an order from the storefront and the salable stock decreases below the threshold quantity.

Product stock alert Push notification in front end

Admin can send custom push notification to all the customers through custom form in backend. Navigate to Magento Admin -> Pits Push Notification -> Send push notification.

Custom form to send push notification.

In the Push Notification configuration, there is an "Action Link for push notification" field where a URL can be provided. When the user clicks on the push notification, they will be redirected to the specified link, enabling deep linking to specific pages (e.g., product, promotion, or order detail pages).

Custom form to send push notification.

Custom push notification in frontend.

In mobile device push notification design have changes in both frontend and background. Push Notification image is hidden in frontend. In background push notification appear in notification bar.

Background push notification in notification bar.

Frontend push notification in mobile device.

• iOS devices will not support firebase push notification.
• Safari on macOS may limit silent push notifications to 3 per hour per origin. Excessive background notifications may be suppressed.

If you have questions, use our contact form at webshopextension.com or email at support@webshopextension.com