Hi. In this post, I will share an interesting and useful project with you all.
Project name: Customer live chat system
Project Reason: We are trying to make it easy to add a live support system on Kodular apps.
In this project, we made a Kodular Screen for the customer side. So that we can use it on any Kodular Project fast and easily. It will save you all of the time to add a live support system to your Kodular Apps. This Live chat system allows you to chat with your customer in real-time.
A live chat system allows you to support your customers and solve their problems. It also helps you to improve your app’s reputation among customers.
Let’s Jump to our project details! (Live chat system in Kodular):
We divide this project into two parts.
First, we made a full chat system on one screen. So that we use it by importing the screen on any Kodular Project. We haven’t used any extensions and assets files to make our screen simple and easy to use. So now we don’t need to worry about Kodular extension limits.
Second, we made an admin panel to support customers, maintain the chat system, and customize the chat page. By this admin app admin can chat with his customers. Admin can block a user and also can unblock that user. Admin also can delete users with all messages.
We add an option to change Cloudinary API keys from this admin panel.
In both of the parts, we made it easy to set up the Firebase real-time database. Now we need to just replace Firebase Url and token only once in the block section. No need to add any URL on the Design part. So now it also saves us time whenever we use it on our projects and we don’t need to worry about where we need to set our Firebase database link.
Let’s see our Live chat system in Kodular Screens.
Screens:
Please set up the admin Side first.
Open your Kodular Project and click Import Screen (.ais). Select “customer_screen.ais” from your project files.
After Importing the screen file Please refresh the Kodular to prevent unwanted errors. Now open the screen and find
out the blocks bellowed. And replace your Firebase details with yours.
Now your customer side setup is complete. Now you need to make a button to open this chat screen. Here is two way to
open customer support screen.
| |
Setup is fully complete
To set up the admin Side just import admin.aia On Kodular form files. Then you need to open the home screen of the aia. Open the block section find the bellowed blocks and replace them with your Firebase Details.
After adding your Firebase details now build the app. Then go to the app settings of the admin app and Update your Wellcome message, Chat screen title, and Cloudinary API keys to complete the connection with Firebase.
Make sure Your Firebase Real-time database rules are properly edited. For basic uses, you need to edit your rules like this.
Now you need to set up the Customer Side.
Now we talk about some major features of absence.
We have not added any notification system on the customer side and admin side. Reason: we don’t want to use any extension on the customer side and also now the Kodular default notification extension is not working. So we skipped it.
We also have not added a lock system in the admin app. So we need to be careful about your admin app.
Before you Purchase!
With this project, you get a Kodular Screen (Customer side) and Admin App AIA.
Before you purchase this project please read the post carefully.
Thank you!
