Plugins
Templates
Template Setup Guides

Loyalty - Customer Rewards and Retention Template

Template page link: https://zeroqode.com/template/loyalty---customer-rewards-and-retention-template-1595162551498x615781337928814000

Introduction

Loyalty - Customer 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 Structure

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.

Page Description

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: