Features of Web Push Notification<\/h3>\n<\/div>\n<\/div>\n\n\n- \nThe module is very well integrated with the Magento platform.<\/span><\/span><\/div>\n<\/li>\n
- \nCompatible with Mozilla firefox and Google chrome desktop browsers.<\/span><\/span><\/div>\n<\/li>\n
- \nIt even works with the SSL certificate websites.<\/span><\/span><\/div>\n<\/li>\n
- \nThere is no monthly subscription required to notify customers.<\/span><\/span><\/div>\n<\/li>\n
- \nNo limitation on the number of subscribed users.<\/span><\/span><\/div>\n<\/li>\n
- \nThe admin can create, edit and delete notification templates in the back end.<\/span><\/span><\/div>\n<\/li>\n
- \nRemove any subscribed user from the list to disable any further notifications.<\/span><\/span><\/div>\n<\/li>\n
- \nAdd a custom icon and redirect URL with the push notification.<\/span><\/span><\/div>\n<\/li>\n
- \nSend push notifications to either all registered users or selected users.<\/span><\/span><\/div>\n<\/li>\n
- \nFind any specific template or subscribed users using search option<\/span><\/span><\/div>\n<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n
Installation process<\/h3>\n<\/div>\n<\/div>\n\nInstallation of the module is very easy. Extract the downloaded zip and then move the app<\/strong> and skin<\/strong> folder into magento root directory.<\/p>\n![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/02\/13-1.png\")
<\/a><\/p>\nAfter moving both the folder flush the cache from magento admin module. Under System > Cache management<\/strong>.<\/p>\n![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/02\/24-1.png\")
\n<\/a><\/p>\n<\/div>\n<\/div>\n\n\n\nModule Translation<\/h3>\n<\/div>\n<\/div>\n\nAfter 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\u00a0English 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.<\/p>\n
![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/02\/quote-1.png\")
<\/a><\/p>\nBefore uploading the CSV file, open and edit it with the translated keywords.<\/p>\n<\/div>\n<\/div>\n
\n\n\nCreating Firebase Project Credentials<\/h3>\n<\/div>\n<\/div>\n\nIn order to use this module, you need to have Firebase Project Credentials.\u00a0<\/strong>Please visit this<\/a> link\u00a0and create a new project with your Gmail account.<\/p>\n![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/02\/2017-02-06_11-44-31.png\")
<\/a><\/p>\n1.<\/strong>\u00a0 After opening Firebase<\/strong>\u00a0website, please click CREATE NEW PROJECT<\/strong> button as shown in the above screenshot.<\/p>\n2. <\/strong>A small pop-up window will appear with the name of Create a project<\/strong>, here you have to enter your Project Name<\/strong> and then select your Country\/Region<\/strong>.<\/p>\n3<\/strong>. After completing the details click CREATE PROJECT<\/strong> button.<\/strong><\/p>\n![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/02\/2017-02-06_11-45-30.png\")
<\/a><\/p>\n4.<\/strong> After creating your new project click Settings<\/strong> menu icon and select Project Settings <\/strong>option. Please view below screenshot. A new Settings page will be opened.<\/p>\n![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/02\/2017-02-06_11-46-58.png\")
<\/a><\/p>\n5.<\/strong> After entering the Settings<\/strong> page, click CLOUD MESSAGING<\/strong> tab, here you will find your Project Credentials<\/strong>, copy and save your Server Key <\/strong>and Sender ID\u00a0<\/strong>as displayed below.<\/p>\nThese credentials will be used in the next step of Magento configuration.<\/p>\n
![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/02\/2017-02-06_11-48-01.png\")
<\/a><\/p>\n<\/div>\n<\/div>\n\n\n\nAdmin Configuration for web Push notification<\/h3>\n<\/div>\n<\/div>\n\n\nAfter successfully installing this module please log in to your Magento Admin Panel<\/strong> and go to System\u00a0<\/strong>menu and then select Configuration<\/strong> option as shown below.<\/p>\n![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/02\/Screenshot-from-2017-02-06-11-26-15.png\")
<\/a><\/p>\nConfiguration<\/strong> page will be opened, click Push Notification<\/strong> option on the left. Here you have to enter your Firebase Project Credentials<\/strong>. Enter the Server key<\/strong> and Sender Id<\/strong> as shown in below screenshot. Click Save Config<\/strong> button to apply changes.<\/p>\n![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/02\/Screenshot-from-2017-02-06-12-07-07.png\")
<\/a><\/p>\nOnce you have configured this module, you will find a new menu option on top, Push Notification\u00a0<\/strong>in Magento Admin Panel<\/strong>. Click it and you will have two menu options to select i.e. Manage\u00a0Templates <\/strong>and\u00a0Send Notification<\/strong>.<\/p>\n![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/02\/Screenshot-from-2017-02-06-11-27-05.png\")
<\/a><\/p>\n\nManage Templates<\/div>\n<\/div>\nAfter clicking Manage Templates<\/strong> 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<\/strong> button as shown in below screenshot.<\/p>\nSearch option can be used to find any specific notification template from the list.<\/p>\n
To delete a notification template, select template using the checkbox. Now, go to Actions<\/strong> drop down menu and choose\u00a0Delete\u00a0<\/strong>option and then click Submit <\/strong>button.<\/p>\n![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/02\/Screenshot-from-2017-02-06-11-34-34.png\")
<\/a><\/p>\n<\/div>\nAfter clicking Create New<\/strong> button you will arrive at Template information<\/strong> page where you need to fill out all the necessary information about your new notification message. Please click Save Template<\/strong> button to save your new template message.<\/p>\nTemplate Information:<\/h3>\n
Title<\/strong> – This will be your title of your notification message which will appear on top.<\/p>\nMessage<\/strong> – This is where you have to enter the content\/body of your message.<\/p>\nRedirect URL<\/strong> – Enter the web page link for the notification.<\/p>\nTags<\/strong> – Add tags to your messages for searching and filtering them from the list.<\/p>\nLogo<\/strong> – You can upload any supported image file for your notification logo, click the Browse<\/strong> button.<\/p>\n![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/02\/Screenshot-from-2017-02-06-11-28-34.png\")
<\/a><\/p>\n\nSend Notification<\/div>\n<\/div>\nNow to send a new notification message or manage your subscribed users you need to navigate through\u00a0Push Notification<\/strong>\u00a0>\u00a0Send Notification<\/strong>.<\/b> On this page, you can find some information about your subscribed users such as ID, Subscribed From (browser), Subscriber Name, Subscribed At.<\/p>\nUse search option to find any particular subscribed user from the list.<\/p>\n
To send a\u00a0notification, either click Select All<\/strong>\u00a0or use multiple checkboxes,<\/strong> then go to\u00a0Actions<\/strong> drop down menu and select Send Notification. <\/strong>Now you need to Select Template<\/strong> from the menu\u00a0and then click Submit<\/strong> button as shown in below screenshot.<\/p>\nTo remove any subscribed user(s), use the Actions<\/strong> drop down menu and select Delete<\/strong> option, then click Submit<\/strong> button.<\/p>\n![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/02\/Screenshot-from-2017-02-06-11-35-25.png\")
<\/a><\/p>\n\nNotification Sent Successfully<\/div>\n<\/div>\nWhen you have successfully sent a new push notification to your users, you will get a small message on top as\u00a0“Push notification(s) has been sent”<\/em><\/p>\n![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/02\/Screenshot-from-2017-02-06-11-40-26.png\")
<\/a><\/p>\n<\/div>\n <\/p>\n
\n\n\nUser Front-End of web push notification<\/h3>\n<\/div>\n<\/div>\n\n\nAfter 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<\/strong> or Block <\/strong>option. Please refer from the below screenshot:<\/p>\n![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/02\/Screenshot-from-2017-02-06-13-36-04.png\")
<\/a><\/p>\n\nSample Push Notification<\/div>\n<\/div>\nPlease 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.<\/p>\n
![\"\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/02\/Screenshot-from-2017-02-06-11-40-07.png\")
<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\nThank you for reading this blog, if you have any further query or require more information about this module please feel free to reach http:\/\/webkul.uvdesk.com\/<\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
- \n
- \nThe module is very well integrated with the Magento platform.<\/span><\/span><\/div>\n<\/li>\n
- \n
Compatible with Mozilla firefox and Google chrome desktop browsers.<\/span><\/span><\/div>\n<\/li>\n- \n
It even works with the SSL certificate websites.<\/span><\/span><\/div>\n<\/li>\n- \n
There is no monthly subscription required to notify customers.<\/span><\/span><\/div>\n<\/li>\n- \n
No limitation on the number of subscribed users.<\/span><\/span><\/div>\n<\/li>\n- \n
The admin can create, edit and delete notification templates in the back end.<\/span><\/span><\/div>\n<\/li>\n- \n
Remove any subscribed user from the list to disable any further notifications.<\/span><\/span><\/div>\n<\/li>\n- \n
Add a custom icon and redirect URL with the push notification.<\/span><\/span><\/div>\n<\/li>\n- \n
Send push notifications to either all registered users or selected users.<\/span><\/span><\/div>\n<\/li>\n- \n
Find any specific template or subscribed users using search option<\/span><\/span><\/div>\n<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\nInstallation process<\/h3>\n<\/div>\n<\/div>\n
\nInstallation of the module is very easy. Extract the downloaded zip and then move the app<\/strong> and skin<\/strong> folder into magento root directory.<\/p>\n
<\/a><\/p>\nAfter moving both the folder flush the cache from magento admin module. Under System > Cache management<\/strong>.<\/p>\n
\n<\/a><\/p>\n<\/div>\n<\/div>\n\n\n\nModule Translation<\/h3>\n<\/div>\n<\/div>\n
\nAfter 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\u00a0English 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.<\/p>\n
<\/a><\/p>\nBefore uploading the CSV file, open and edit it with the translated keywords.<\/p>\n<\/div>\n<\/div>\n
\n\n\nCreating Firebase Project Credentials<\/h3>\n<\/div>\n<\/div>\n
\nIn order to use this module, you need to have Firebase Project Credentials.\u00a0<\/strong>Please visit this<\/a> link\u00a0and create a new project with your Gmail account.<\/p>\n
<\/a><\/p>\n1.<\/strong>\u00a0 After opening Firebase<\/strong>\u00a0website, please click CREATE NEW PROJECT<\/strong> button as shown in the above screenshot.<\/p>\n
2. <\/strong>A small pop-up window will appear with the name of Create a project<\/strong>, here you have to enter your Project Name<\/strong> and then select your Country\/Region<\/strong>.<\/p>\n
3<\/strong>. After completing the details click CREATE PROJECT<\/strong> button.<\/strong><\/p>\n
<\/a><\/p>\n4.<\/strong> After creating your new project click Settings<\/strong> menu icon and select Project Settings <\/strong>option. Please view below screenshot. A new Settings page will be opened.<\/p>\n
<\/a><\/p>\n5.<\/strong> After entering the Settings<\/strong> page, click CLOUD MESSAGING<\/strong> tab, here you will find your Project Credentials<\/strong>, copy and save your Server Key <\/strong>and Sender ID\u00a0<\/strong>as displayed below.<\/p>\n
These credentials will be used in the next step of Magento configuration.<\/p>\n
<\/a><\/p>\n<\/div>\n<\/div>\n\n\n\nAdmin Configuration for web Push notification<\/h3>\n<\/div>\n<\/div>\n
\n\nAfter successfully installing this module please log in to your Magento Admin Panel<\/strong> and go to System\u00a0<\/strong>menu and then select Configuration<\/strong> option as shown below.<\/p>\n
<\/a><\/p>\nConfiguration<\/strong> page will be opened, click Push Notification<\/strong> option on the left. Here you have to enter your Firebase Project Credentials<\/strong>. Enter the Server key<\/strong> and Sender Id<\/strong> as shown in below screenshot. Click Save Config<\/strong> button to apply changes.<\/p>\n
<\/a><\/p>\nOnce you have configured this module, you will find a new menu option on top, Push Notification\u00a0<\/strong>in Magento Admin Panel<\/strong>. Click it and you will have two menu options to select i.e. Manage\u00a0Templates <\/strong>and\u00a0Send Notification<\/strong>.<\/p>\n
<\/a><\/p>\n\nManage Templates<\/div>\n<\/div>\nAfter clicking Manage Templates<\/strong> 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<\/strong> button as shown in below screenshot.<\/p>\n
Search option can be used to find any specific notification template from the list.<\/p>\n
To delete a notification template, select template using the checkbox. Now, go to Actions<\/strong> drop down menu and choose\u00a0Delete\u00a0<\/strong>option and then click Submit <\/strong>button.<\/p>\n
<\/a><\/p>\n<\/div>\nAfter clicking Create New<\/strong> button you will arrive at Template information<\/strong> page where you need to fill out all the necessary information about your new notification message. Please click Save Template<\/strong> button to save your new template message.<\/p>\n
Template Information:<\/h3>\n
Title<\/strong> – This will be your title of your notification message which will appear on top.<\/p>\n
Message<\/strong> – This is where you have to enter the content\/body of your message.<\/p>\n
Redirect URL<\/strong> – Enter the web page link for the notification.<\/p>\n
Tags<\/strong> – Add tags to your messages for searching and filtering them from the list.<\/p>\n
Logo<\/strong> – You can upload any supported image file for your notification logo, click the Browse<\/strong> button.<\/p>\n
<\/a><\/p>\n\nSend Notification<\/div>\n<\/div>\nNow to send a new notification message or manage your subscribed users you need to navigate through\u00a0Push Notification<\/strong>\u00a0>\u00a0Send Notification<\/strong>.<\/b> On this page, you can find some information about your subscribed users such as ID, Subscribed From (browser), Subscriber Name, Subscribed At.<\/p>\n
Use search option to find any particular subscribed user from the list.<\/p>\n
To send a\u00a0notification, either click Select All<\/strong>\u00a0or use multiple checkboxes,<\/strong> then go to\u00a0Actions<\/strong> drop down menu and select Send Notification. <\/strong>Now you need to Select Template<\/strong> from the menu\u00a0and then click Submit<\/strong> button as shown in below screenshot.<\/p>\n
To remove any subscribed user(s), use the Actions<\/strong> drop down menu and select Delete<\/strong> option, then click Submit<\/strong> button.<\/p>\n
<\/a><\/p>\n\nNotification Sent Successfully<\/div>\n<\/div>\nWhen you have successfully sent a new push notification to your users, you will get a small message on top as\u00a0“Push notification(s) has been sent”<\/em><\/p>\n
<\/a><\/p>\n<\/div>\n<\/p>\n
\n\n\nUser Front-End of web push notification<\/h3>\n<\/div>\n<\/div>\n
\n\nAfter 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<\/strong> or Block <\/strong>option. Please refer from the below screenshot:<\/p>\n
<\/a><\/p>\n\nSample Push Notification<\/div>\n<\/div>\nPlease 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.<\/p>\n
<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\nThank you for reading this blog, if you have any further query or require more information about this module please feel free to reach http:\/\/webkul.uvdesk.com\/<\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
- \n