How to Build the Loyalty Feature

Last Updated: Feb 28, 2018 12:56PM PST

Description

The following article has been updated for our new March 2018 source code. Learn more here

The Loyalty feature allows users to have an in-app version of a traditional stamp card. Rather than pulling out the hole-puncher or scribbling an easy-to-forge symbol, the vendor punches the secret code into the customer’s phone to add a “stamp.” Once users have reached the required number of “stamps,” they’ll unlock the deal. This deal can be redeemed immediately or saved for later.

*Note: Updating apps that were last updated before April 2014 will cause users to lose their stamps.
Great for these industries:

  • Restaurants
  • Shops
  • Salons & Spas

Monetization ideas:

  • Incentivize customers to return to your business by offering rewards in exchange for purchases (ex. buy 9 cups of coffee and get the 10th free).
  • Incentivize customers to spend more money by offering rewards in exchange for spending a certain amount of money (ex. spend $200 and receive 20% off your next purchase).

Setup

Navigate to the Build tab to begin the setup process, then follow the steps below.

1. Click Add Feature.

2. Choose the Loyalty feature from the menu, then click Select.

3. Name your feature, then click Add. Your new feature will now appear in the left-side menu.

4. Select the your newly added Loyalty feature on the left to enter it.
If you wish to build out this feature without having it appear yet in your app you can turn the toggle off to inactivate it.

Content

Here you can rename the feature and add your stamp loyalty or tiered loyalty stamp cards.

1. Under Screen Info, change your Screen/Feature Name or leave as-is. This is the name that will appear in the app’s feature menu (e.g. “Stamp Card” as opposed to “Loyalty”).
Here you can also select the feature icon that will be displayed in your app. You can also leave this blank.

2. Under Loyalty, click Add Stamps Loyalty or Add Tiered Loyalty. Complete the fields below, then click Add. Repeat this process for each loyalty card.

Stamp Loyalty:

  • Loyalty Title: Give your loyalty card a name.
  • Description: This is an optional field for you to describe your loyalty program.
  • Terms of Service or Instructions: This is another optional field. If you wish to add additional instructions or terms to your program, this will add an (i) button to your loyalty card to view this.
  • Header Image: These images are optional. The header image will also be used as the thumbnail image on the list view of your loyalty feature (if you have more than 1 loyalty program).
  • Display Mode: Pick between the traditional ‘Stamp’ look or a gauge that displays progress by fractions or percentages.
  • Can this loyalty Program be Repeated?: With this option turned off, your loyalty card becomes a one time use. Even if the user deletes and reinstalls the app they will still not be able to use this card again.
  • Stamps Needed to Unlock Reward: Choose how many stamps are required for a user to receive a reward.
  • Stamps Earned by Select the action taken by the end user to earn and redeem their loyalty.
    • Secret Code: Here you can enter a secret code, similar to a pin number that is used by your staff to enter on the customer’s device in order to earn a stamp.
    • QR Code: Enter some text here to have a QR code generated for your loyalty. This will be presented at time of purchase by your staff for the customer to scan with their device’s camera.
    • GPS Checkin: Select the size of the radius you wish to have active around all your locations. We allow control on accuracy here due to some congested areas having poor GPS accuracy. If you have multiple locations in your contact feature, each location will be an active zone for this GPS Checkin feature.
  • Minimum Time Between Stamps: Set the number of hours you require in between stamps. If you wish to allow for repeated stamps, enter ‘0’ here.
  • Require GPS for Added Validation: For Secret Code and QR Code options above, you can enable this option to add another layer of fraud protection. In addition to the selected action to earn a stamp, the customer will also need to be at one of your locations in order to earn their stamp.
  • Custom Time Zone: If this loyalty should be a separate time zone than that of your global settings, you can set it here.
  • Apply Time Limits: If you wish to only offer your loyalty program for a set time, you can do so with this option. The loyalty will also clearly display that its either ‘Not Started’ or ‘Expired’. This will allow you to educate your clients about upcoming promotions etc.
  • Push Notes Award: Choose if you want to reward users for accepting push notes with a free stamp. You can also adjust the reward message that is displayed to those who accept.

Tiered Loyalty:

The Tiered Loyalty allows your customers to accrue a ‘bank’ of points, and they can exchange these points for different offers, normally ascending in value and required points. You can offer up to 10 offers.

  • Loyalty Title: Give your loyalty card a name.
  • Instructions: Describe how to use the tiered loyalty feature. Customize the text to your liking to communicate the abilities and offerings of this feature.
  • Award Per Stamp Amount: Choose how many awards the user will receive per each stamp.
  • Name Your Unit Type: Select a name for your unit type (ex. Points, Kudos, Credits).
  • Unity Type Abbreviation: Select an abbreviation for your unit type (ex. Pts, Kr, Cr).
  • Thumbnail Image: Upload an image to present your loyalty feature (140 x 140 px in PNG format).
  • Stamps Earned by Select the action taken by the end user to earn and redeem their loyalty.
    • Secret Code: Here you can enter a secret code, similar to a pin number that is used by your staff to enter on the customer’s device in order to earn a stamp.
    • QR Code: Enter some text here to have a QR code generated for your loyalty. This will be presented at time of purchase by your staff for the customer to scan with their device’s camera.
    • GPS Checkin: Select the size of the radius you wish to have active around all your locations. We allow control on accuracy here due to some congested areas having poor GPS accuracy. If you have multiple locations in your contact feature, each location will be an active zone for this GPS Checkin feature.
  • Minimum Time Between Stamps: Set the number of hours you require in between stamps. If you wish to allow for repeated stamps, enter ‘0’ here.
  • Require GPS for Added Validation: For Secret Code and QR Code options above, you can enable this option to add another layer of fraud protection. In addition to the selected action to earn a stamp, the customer will also need to be at one of your locations in order to earn their stamp.
  • Push Note Award: Choose if you want to reward users for accepting push notes and select how many points they should be awarded.

Tier Loyalty Offers:

The offers you add will automatically be spaced out appropriately on the gauge in the app. You can have offers that cost the same amounts to redeem.
Select ‘Add Offer’ under your already created Tiered Loyalty.

  • Offer Title: Give each offer a name.
  • Description: Describe each offer.
  • Points to Unlock Offer: Select how many points a user will need to unlock each award.
  • Can This Offer Be Reused: Choose if users can unlock/redeem it more than once.
  • Thumbnail Image: Upload a thumbnail image (140x140px in PNG format) for this loyalty card.
  • Meter Icon: Select a meter icon. You can choose from one of ours or upload your own.
  • Each perk has the option to have a thumbnail icon. If there is no icon selected, then the gauge icon and title will be left in its place.
  • Each perk will have an expandable description box (drop-down view). This dropdown will also show a REDEEM button. If this is unavailable the button will not exist. In the description, the needed number of points to redeem will be displayed.

Custom Design

If you’d like to create a custom design for this feature instead of using the Global Design, you’ll do so here. Skip over this section if not.

Activity

CMS: If you would like to check on user activity, track engagement, and monitor your top coupon users, you’ll do so here. Skip over this section if not.
In-App: Your app users will just see their own activity for the specific loyalty.

March 2018 Update:

The March 2018 source code (current PWA offering) has some UX improvements as well as the new Sign-up integration and customization options.

Sign-up integration
Previously we would show an option ‘link to social’ fly up on your app when a customer would make a stamp or redemption. Now, in an effort to give more control and improve the collection of customer data we have made improvements.

From the Sign-up screen whether it’s enabled or not you will see the new Loyalty Sign-up module.
In this module you will see 3 options, these allow you to configure the requirements for your customers needed to have created an account or not.
Due to the nature of a Progressive Web App and the many different browsers and browsing modes than can be used, its impossible to maintain loyalty progress for a customer without an account. That means that regardless of your selection here the ‘Always’ option will be what is used for PWAs.
Because every business will wish to gather as much information about their customers as possible, the Sign-up screen will display each time the stamp or scan button is tapped (until the user has signed in).
The way the settings work is by controlling when you offer a ‘Not Now’ button on the Sign-up screen. This means that depending on your selection, the ‘Not Now’ option will either be available or not.
For native iOS and Android applications, the options are:
– Always (User cannot skip Sign-up)
– Upon loyalty redemption
– Never (User can skip Sign-up)

The headline field allows you to customize the text on this screen to encourage your users to create an account.

Once your users create an account, they can switch devices, switch operating systems and switch platforms and maintain their loyalty progress.
That means someone with an iOS app can switch to Android, continue their progress, then switch to a PWA and redeem their loyalty!

UX improvements
Previously if you were to complete a stamp card, or return to the tiered loyalty with enough points to redeem one of your rewards it was not very clear (or exciting) to users that they had a shiny award awaiting them.
Now, we have taken our congratulations animation out of the pop-up and placed it directly on the screen. This means if your customers have completed their 10 stamps for a free smoothie, weeks later when they return to get their smoothie its just as exciting to them as the day the unlocked it.

Examples

Loyalty Sign-up options

List view, showing a variety of optional imagery, expired loyalty programs, and multiple types.

 

Loyalty Sign-up

Stamp Loyalty 

 

Tiered Loyalty