QloApps Progressive Web App is an add-on for QloApps that will bring two functionalities to your website. The first one is the web app and the other is push notifications.
As we know the hotel industry is shrinking not in terms of business but in terms of screen size. Today, bookings happen from mobile phones majorly.
A Progressive Web App (PWA) uses modern web capabilities to deliver an app-like experience to users. In progressive web apps, you can access the content that you have already explored in online mode.
So more you explore the website through the app more you explore in offline mode.
Web apps are websites that, in many ways, look and feel like native applications with push notifications.
The Progressive Web Application is fast compared to the website and supports push notifications.
With the use of this feature, the website works faster on a slower internet connection. Due to the faster performance, user engagement increases on the website and results in a very high conversion rate.
Features of QloApps Progressive Web App
- QloApps Progressive Web App will give a user-friendly user experience.
- Slow internet speed will not affect its potential.
- Users can access the visited page in an offline mode also.
- Increases user engagement thereby increasing the conversion rate.
- Set the Application name which shows up on mobile phones.
- Enter the Application’s Short name which shows up on the home screen.
- Enter the Splash Screen Background Colour.
- With PWA one can upload the App Icon.
- Upload the Push Notification Icon.
- Edit/Delete/Send Push Notifications.
- Attach a Target URL when a user clicks on Push Notification received.
- Admin can attach a separate Notification icon for each Push Notification.
- Admin can create five types of push notifications.
i. Manual Push Notification- Now admin can schedule the push notification.
ii. Product Notification- Admin can send the room type notification from the room type edit page.
iii. Order Status Notification- Order status notification if the admin changes the order status
iv. Welcome Notification- Admin can send the welcome notification to the users (the user needs to allow the notification).
v. Cart Reminder Notification- Admin can set the cart reminder notification with a specific number of days.
- Admin can manage the subscribers from the “Manage Subscribers” tab.
- Track the live status of notifications while sending them to customers.
- Admin can view/delete the list of notification history from the “Manage Notification History” tab.
- Max. the character limit for the short name of the app is 12.
- The connectivity status(i.e offline/online) of the app appears at the end of the screen of mobile.
- Now, the room type URL is automatically attached to the product push notification.
Installation Of QloApps Progressive Web App
The installation of any module is very simple in QloApps.
- Go to the Module and Services tab
- Click on Add a New Module
- Now upload the Zip file of the Module and click on Install
Now You Have Installed The Module. So Let Us Check The Module Configuration.
How to Set up the Progressive Web Application
A user can select the ‘Add to home screen” option to add the progressive web application to the home screen available at the footer of the web page on your mobile browser window.
Once added to the home screen, you can see the PWA on your phone home screen with the selected icon, favicon, and splash screen color.
Configuration Of QloApps Progressive Web App
To configure the module go to Module and Services Section and search for the PWA module. There you will have the configuration button.
The Configuration page of the QloApps Progressive Web App is divided into sections. So let us discuss each section one by one.
PROGRESSIVE WEB APP CONFIGURATION
The first section has the App settings. It will allow you to decide the look and feel of your App.
Now let us check where we find these fields in the App.
Click on the App to open it and then you will see the splash screen first and then the App will open.
PUSH NOTIFICATION CONFIGURATION
This section will allow you to set up your push notifications by entering the credentials.
How To Obtain Push Notification Credentials
To use this module, you need to have Firebase Project Credentials, which will be used in the Module configuration. Please visit this link and create a new project with your Gmail Account.
- After opening the Firebase website, please click the CREATE NEW PROJECT button as shown in the above screenshot.
- A small pop-up window will appear with the name of Create a project, here you have to enter your Project Name and then select your Country/Region.
- Click the CREATE PROJECT button.
After creating your new project click Settings menu icon and select Project Settings option. A new Settings page will be opened.
After entering the Settings page, click the CLOUD MESSAGING tab, here you will find your Project Credentials, copy and save your credentials as displayed below.
Use these credentials in the Module Configuration to enable the Push Notification service.
GENERAL CONFIGURATION
This section will have the general configurations of your push notifications.
CRON JOBS
To send Notifications that are sent automatically at a particular time like schedule notifications and cart reminders we will have to set a Cron Job on our server.
Manual Push Notification
This is the section from where we can send push notifications.
As we know that we have 5 types of Push Notifications in the system. So let us understand each of them one by one.
Manual Push Notification
This type of notification allows you to send any content you want to send with a single click or you can also schedule it.
Adding a New Notification:
Frontend when you send a Notification.
Room Type Notification
This type of notification will send the details of a room type. It will have the name, price, and image of the room type.
So you will enable and edit the notification from here and then send it from the particular room type for which you want to send the content.
Now to send the notification you will have to go to the specific room type edit page.
Front End Notification
Order Status Notification
In this type of notification, the user will get the notification his order status gets updated.
Welcome Notification
This notification is sent when a user allows a notification in his browser.
Frontend Notification
Cart Reminder Notification
When a user comes to your website add a room to his cart and abandon the website. Then this notification will remind him about his cart.
Manage Subscribers
On this page, you will find all your subscribers listed in the table.
A subscriber is a person who has allowed the notification in his browser and app. On this page, you can also delete a subscriber.
Notification History
This section has the history of the notifications that you have sent from your system.
The history will be recorded for the type of notifications you selected in the configurations.
This section will also show the percentage of the notifications that were clicked on.
Conclusion
This was all from the QloApps Progressive Web App. I hope I was able to clarify the functioning of the module for you.
If you want to learn about the functionality of QloApps then you can visit this link: QLO Reservation System – Free Open-Source Hotel Booking & Reservation System
In case of any query, issue, or requirement please feel free to raise it on QloApps Forum
Lastly, do not forget to drop your thoughts in the comments.
Be the first to comment.