Loyalty - User Rewards and Retention Template

Template page link: https://zeroqode.com/template/loyalty---user-rewards-and-retention-template-1595162551498x615781337928814000​
Introduction
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.
Features
Fully responsive pages
Integrated admin panel
Company dashboard
Subscription system via Stripe
Integrated chat
Rewards system
Integrated reviews
QR code generator
Unique design
Data Structures
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.
Pages
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
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.
Things to Note
This template has some specific design solutions and features that need to be analyzed for a better understanding for future customization.
Coupons
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 customer page 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 the login page 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.
Staff's side of generating the qr code for scanning
Customer's side of collecting and redeeming a bonus
Stripe
Setting up the Stripe plugin and Stripe account
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.
1.Create a stripe account and submit all the necessary information to make it "complete"
2.Follow our zeroqode documentation regarding stripe to fully setup the Stripe plugin inside the template.
3.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)
4.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)
Products tab
Setting up a plan for a product
Setting up the Stripe subscription workflows inside the template
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).
Subscribe user to a plan
Admin panel restrictions
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:
1.Go to database -> App data -> Variables and modify the WriteRights from "no" to "yes".
2.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
Add Category restriction
Demo to preview the template
Live Demo: https://loyaltytemplate.bubbleapps.io/​