Loyalty - User Rewards and Retention Template
Template page link: https://zeroqode.com/template/loyalty---user-rewards-and-retention-template-1595162551498x615781337928814000​
Loyalty - User Rewards and Retention Platform is a no-code template for sellers that want to have better long term relations with their customers. With Loyalty, customers can enjoy products from sellers they love and get bonuses for doing so while sellers can improve an already established network of customers by making them more loyal and rewarding them in the process. Overall both sides are being rewarded.
Fully responsive pages
Integrated admin panel
Company dashboard
Subscription system via Stripe
Integrated chat
Rewards system
Integrated reviews
QR code generator
Unique design
The database for this template mainly consists of the following datatypes:
Users (contains details of the platform's users)
Products (represents the available products for customers to buy)
Coupons (this object contains available discount codes)
Transactions (contains details about customers's transactions)
Subscriptions (contains details about users's subscriptions)
Blog (object containing blog post's content)
Conversations (contains messages between users)
Messages (contains the text of a message)
Reviews (contains user reviews for companies)
Variables (here we can store data used for the system to work better)
Data type | Field | Type | Notes |
User | ​ | ​ | This datatype contains all the details about the users. |
​ | userCompany | Company | The company that is attached to the user. The data type for it is Company. |
​ | ​userConversation | ​List of Conversations | ​The conversations that the user has with other users. The datatype for it is Conversation and it is a list. |
​ | ​userFirstName | ​text | ​The user's first name. |
​ | ​userLastName | ​text | ​The user's last name. |
​ | userPoints | number | The amount of bonus points the user has. These points are obtained by redeeming QR codes. |
​ | userProfilePhoto | image | Profile picture of the user. |
​ | userPurchasedProducts | List of Purchased Products | The products that the user bought. The data type for it is Purchased Product and it is a list. It is used to see the user's purchase history. |
​ | userSubscritpion | Subscritpion | The subscription the user subscribed to. The data type for it is Subscription. |
​ | userTransactions | List of Transactionses | The transactions of points that were redeemed by the user. The data type for it is Transaction and it is a list. It represents the QR codes that where scanned and redeemed. |
​ | userType | User Type | The type of the user. It is of the data type User Type. Based on this field we can check if the user is a client, staff, company or admin. |
​ | userWishlist | List of Products | Contains the products that where added to be bought later. It is of the data type Product and it is a list. |
​ | ​ | ​ | ​ |
User Type | ​ | ​ | This datatype is used for creating user roles. |
​ | userTypeID | number | A number used to identify this User Type. It can be used when doing a search. |
​ | userTypeName | text | The name of this User Type. |
​ | ​ | ​ | ​ |
Category | ​ | ​ | This datatype contains the domain of activities for companies. |
​ | categoryIcon | image | The icon for this specified category. |
​ | categoryImage | image | The image for this specified category. |
​ | categoryName | text | The name for this category. |
​ | ​ | ​ | ​ |
Company | ​ | ​ | This datatype contains details about each company. |
​ | companyAddress | text | The physical address of the company. |
​ | companyBlogs | List of Blogs | List of blog posts created by a specific company. |
​ | companyCategory | Category | The domain of activity of the company. |
​ | companyConversation | Conversation | The conversation of the company with the app owner. |
​ | companyDescription | text | Description of the company. |
​ | companyDistributedPoints | number | The amount of bonus points that were redeemed by customers using QR codes generated by the staff of this specific company. |
​ | companyLogo | image | The company's logo. |
​ | companyMarketPoints | number | The amount of points that were spent by customers on the products of this company. |
​ | companyName | text | The name of the company. |
​ | companyPhone | text | The phone number of the company. |
​ | companyProducts | List of Products | The products that company offers for sale. |
​ | companyReviews | List of Reviews | The reviews that company got from the customers. |
​ | companyZip | text | The Zip code of the company. |
​ | ​ | ​ | ​ |
Product | ​ | ​ | This datatype contains all the products that are for sale. |
​ | productDescription | text | Description of the product. |
​ | productImage | image | Image of the product. |
​ | productName | text | Name of the product. |
​ | productPrice | number | The price for the product. |
​ | productSales | number | The number of times this product was sold. |
​ | ​ | ​ | ​ |
Purchased Product | ​ | ​ | This datatype contains all the purchased products. When a product is purchased we create a new object of this type that contains the details of the purchase as well as the product (of datatype Product) so we can access all the details about it. |
​ | purchasePrice | number | Amount of points spent on the purchase. |
​ | purchaseProduct | Product | The product that was purchased. Used to get access to the details of the product that is for sale. |
​ | purchaseProductCompany | Company | The company that owns the product. |
​ | purchaseReviewed | yes/no | Boolean field that tells if the customer left a review for the purchase of the product. |
​ | purchaseUser | User | The customer that bought the product. It is of type user. |
​ | ​ | ​ | ​ |
Review | ​ | ​ | This datatype contains all the customer reviews. |
​ | reviewContent | text | Content of the review. |
​ | ​ | ​ | ​ |
Blog | ​ | ​ | This datatype contains all the blog posts on the app. |
​ | blogContent | text | This field contains the text content of the post. |
​ | blogImage | image | This field contains an image of the post. |
​ | blogTitle | text | This is the title of the blog post. |
​ | blogViews | number | This is the amount of views the post has. |
​ | ​ | ​ | ​ |
ContactMessage | ​ | ​ | This datatype contains the messages send by users to app owner. |
​ | contactMessageBody | text | The text content of the message. |
​ | contactMessageEmail | text | The email of the sender. |
​ | contactMessageTitle | text | The subject of the email. |
​ | ​ | ​ | ​ |
Testimonial | ​ | ​ | This datatypes contains the testimonials for the app. |
​ | testimonialAuthor | text | Name of the person of this testimonial. |
​ | testimonialAuthorCompany | text | Name of the company of this testimonial. |
​ | testimonialAuthorImage | image | The profile image of this testimonial. |
​ | testimonialContent | text | The text content of this testimonial. |
​ | testimonialRating | number | The rating for this testimonial (up to 5). |
​ | ​ | ​ | ​ |
Subscription | ​ | ​ | This datatype contains all the details of the subscriptions that users have. It contains the active subscription as well as canceled ones. |
​ | SubscriptionActive | yes/no | Boolean field that shows if the subscription is active or not. If the user still pays for the subscription then it's active, if he canceled it but the current end billing period is not exceeded then it's still active otherwise it's not active. |
​ | SubscriptionCanceled | yes/no | Boolean field that shows if the subscription was canceled. Tho the subscription will be still active until the end billing period. |
​ | SubscriptionID | text | The stripe ID of the subscription. |
​ | SubscriptionNextBilling | date | The next billing period. It is of type date. When canceling a subscription bubble actually deletes the details form it including the date of the next billing period (bubble has inaccessible fields where it store details about a subscription). This is why we store this info so in case the subscription is cancelled we can know when the subscription is supposed to become inactive. |
​ | SubscriptionPlanName | text | The name of the plan. |
​ | ​ | ​ | ​ |
Conversation | ​ | ​ | This datatype contains all the conversations between users. |
​ | conversationMesages | List of Mesages | The list of messages that are related to this conversation. |
​ | conversationNewMesage | yes/no | Using this we can show the users of this conversation a visual notification if there is an unread message. |
​ | ​ | ​ | ​ |
Message | ​ | ​ | This datatype contains all the messages between users. This messages are attached to the Conversation datatype. |
​ | messageBody | text | The text content of the message. |
​ | ​ | ​ | ​ |
Transactions | ​ | ​ | This datatype contains the details about all the bonus points transactions between customers and staff. |
​ | Customer | User | The user this transaction is attached to. |
​ | Points | Number | The amount of bonus points that were spent on this transaction. |
​ | Staff | User | The staff user that generated the QR code for the customer. |
​ | ​ | ​ | ​ |
Coupon | ​ | ​ | This datatype contains all the active coupons. Those are created when scanning a QR code and when redeemed, they automatically deleted. |
​ | Amount | number | The amount of bonus points the customer will receive when redeeming a coupon. |
​ | Code | text | The code of the coupon. |
​ | Staff | User | The staff that generated the QR code from which the coupon was created by scanning it. |
​ | ​ | ​ | ​ |
UserTotalPoints | ​ | ​ | This datatype contains all the points spent by a specific customer on products of a specific company. |
​ | Company | Company | The company where customer spent bonus points. |
​ | Customer | User | The customer that spent bonus points. |
​ | TotalPoints | number | The amount of bonus points that a customer spent on products from a specified company. |
​ | ​ | ​ | ​ |
Variable | ​ | ​ | This datatype contains constants that are used for some calculations or to speed up the system. |
​ | BonusAmount | number | The percent amount that is taken from each purchase and offered as bonus points to the customer trough a QR code. |
​ | WriteRights | yes/no | The ability to create, delete and modify things in admin panel. Set it to yes to have full access as admin. |
​ | ​ | ​ | ​ |
Log | ​ | ​ | This datatype contains information about different events that happen in the app. |
​ | logAction | text | Contains the text description of the event. |
​ | logType | text | Contains a text that represents the type of the event. Currently we are using these types: Purchases, Bonus, Bonus Card and Signup. |
For a better understanding of the database's structure let's just describe some processes that can take place on this template.
For example there is a store that is selling clothes. When a customer buy something he get to scan a QR code that is generated by the staff, based on the amount the customer spent. The customer then scans the QR code and lands on the platform having the option to collect the bonus points instantly, if he is logged in or after logging in/creating an account. He also can copy the discount code and redeem it later on the customer page or he can give it to someone else.
The Variables datatype consists of parameters used to speed up the work of different workflows and elements or just for storing constants. The parameter WriteRights is used for limitations on the admin page. There is also BonusAmount which is used for calculating the bonus for a discount code. Right now it is set to 10 which means 10% of the amount customers spend on products.
This template consists of the following pages:
index
customer
staff
business-dashboard
admin-dashboard
login
about
partners
terms
404
Page | States | Notes |
staff | ​ | The staff page provides the necessary tools for the staff to manage products, manage transactions, changing profile info and generating QR codes that are scanned by customers to receive bonus points. |
​ | code | This is the discount code that is generated after entering the amount in the Input Purchase amount. |
​ | VisibleGroup | This type text state contains the name of the block that should be visible on the page. The values that are used are: Profile, Transactions, Products and Code. Depending on these values groups: Profile container, Transactions container, Products container and GenerateCode container have their visibility condition set to off. |
admin- dashboard | ​ | The admin-dashboard provides the tools for the admin to manage the platform. Here he have access to create product categories, add testimonials, change personal info and view companies, statistics and users. |
​ | pagePosition | This type number state is used to check if the page is being scrolled and hides the GroupFocus All Conversations if that is visible. This tho occurs only on mobile. |
Index page greets the users with a minimalist and modern design and has the navigation necessary to access the other pages.
The customer page has all the features and elements designed for the customer. It's structure consists of tabs for: browsing products by categories, purchase history, wishlist, code redeem and the option to edit profile info.
The business-dashboard page provides the necessary tools for the companies to manage the account, projects and users. Under account tab you can modify personal info and change the billing settings. Under the projects tab you can add blogs, products and view reviews, transactions and statistics. There is also the users tab that provides the ability to add staff members, chat with the platform owner and view customers.
Login page is used for login and signup.
The about page contains information about the platform and it's partners.
Partners page is used to display all the partners affiliated to the platform.
The terms page is used to display platform's terms and conditions.
Page 404 was not found.
Reusable elements description provides information details about reusable elements inside the application.
Reusable Element | States | Type | Notes |
Footer | ​ | ​ | Default Footer |
Header LogOut | ​ | ​ | Contains two styles for header : one being default and another light which is used in conditions for respective pages. |
This template has some specific design solutions and features that need to be analyzed for a better understanding for future customization.
Template has an integrated coupon system that rewards customers when they buy something. The process is rather simple:
The obvious first step is for a customer to buy something
Then the seller/staff uses the total amount spent to generate a qr code
The customer scans the qr code using his native camera app or any other third party qr code reader
After the qr code was scanned the customer will land on the
customerpage where he will be greeted with a popup to collect the bonus. If the user is logged in the bonus is instantly added when he clicks on the Collect button, if he is not logged in he will be redirected to theloginpage and the bonus will be added after he will log in/register. Also the user can just copy the code and close the popup and redeem it later or give it to a friend to redeem.
In this template we are using Stripe to give the companies the option to buy a subscription. If you already bought the template you will have to follow few steps in order to setup your own subscription products. For a more detailed step by step guide of the Stripe setup aspect of the template please visit our zeroqode stripe documentation.
Create a stripe account and submit all the necessary information to make it "complete"
Follow our zeroqode documentation regarding stripe to fully setup the Stripe plugin inside the template.
Go to Products tab (if you can't see it open the Billing tab). There click on "New" to create a new product (check image Products tab)
In the product creation window you just have to pick a name for your product. Then you will have to set a plan for your newly created product. You can later add additional plans for the same product (e.g. monthly and yearly plans for VIP subscription)
After you have created your Products and Plans and have setup the Stripe plugin you will have to make few adjustments to the workflows inside the template to work with the new plans. There are only 2 pages where you will have to do this: business-dashboard and index pages.
On the index page change the workfows for buttons Subscribe monthly and Subscribe yearly by picking a plan that you have previously created (Subscribe user to a plan workflow).
On the business-dashboard page change the workfows for buttons Subscribe monthly and Subscribe yearly which you will find inside the Buy Subscription popup by picking a plan that you have previously created (Subscribe user to a plan workflow).
For security reasons the ability to write on the admin-dashboard was disabled for the test version of the template. This means that you will be unable to modify/delete existing data from the admin panel. However it will still give you an overall idea on how it does work. Decisive buttons that lead to creation/deletion/editing of an object are disabled and the text "blocked" in their name. In order to remove this restriction you will have to make some changes in the workflow after you purchase this template. You can remove this restriction by following on of these steps:
Go to database -> App data -> Variables and modify the WriteRights from "no" to "yes".
The second option is a a bit harder than the first one but not too complicated. You will have to remove all the conditions from the buttons and texts that have this security check. The buttons that have this restriction will contain the "(blocked)" text in the caption but there are some clickable texts that don't have this distinction. Those are the delete texts from:
GroupFocus Category Action
GroupFocus Message Action
GroupFocus Testimonials Action
Live Demo: https://loyaltytemplate.bubbleapps.io/​