Loyalty Program Component

The Loyalty Program Component provides a simple loyalty card/voucher system.

Attract and reward your loyal customers with your own branded electronic loyalty program. This component scans QR codes to receive electronic stamps on the loyalty card. Once enough stamps have been collected a voucher will be created that can be redeemed for a reward.

The Loyalty Program component makes it simple to set up and customize your loyalty card. You can create a stamp grid of up to 20 stamps. The QR code can be scanned directly with the device’s camera. If it detects a valid code match it automatically places an electronic stamp on the card. Redeeming a reward follows the same process; scan the QR code and the app will notify the customer that they are receiving their reward. At the same time the card will be cleared to start afresh.

The Loyalty Program allows the designer to create a Voucher with their own branding that will replace the card stamps when a customer has collected all the required stamps on their card. This provides an opportunity to present a larger image, messaging and marketing to the customer, celebrating their pending reward.

This component also supports multiple store locations. Each store can be identified by name and have its own separate loyalty card. Individual store QR codes will ensure that stamps and rewards get allocated to the right stores.

When you place this component in your project it will load a sample Loyalty program. There are also has 4 pre-defined presets you can load and use. You can design and save your own custom presets for use across different Apps.

You may only insert 1 Loyalty Program component for each app.

Loyalty Program Tutorial

Please Note: This video was created using Umajin version 1.1.0.0. While there have been considerable changes to the UI and some of the naming conventions, we have left the video available. The Loyalty Card has a lot of properties, and how those properties are set remains basically the same.

Using the Loyalty Card component

  • The Loyalty Program component is selected from the Commerce Component section and loads with a set of default graphics. You can change these to your pre-saved graphics that you have created and saved in your App’s Resources Folder. The tutorial shows how to do this.
  • The Loyalty Program component automatically loads a ‘Stamp Button’ component as a subset. When the button is used to scan the QR code it will apply a stamp to the Loyalty card.This has all the properties of a button component and can be configured to your own design.
  • The tutorial also demonstrates the steps to create a Store List in the App’s Cloud/Dashboard, Commerce Section, and how to create a unique QR code that can be scanned by the user at each store.
Name When components are placed on a page they appear highlighted blue in the scene tree and can be renamed by double clicking in this panel and typing the new name. Components can also be set to be visible/invisible on the page, using the ‘eye’ icon on this panel.
Position and Size Sets position and size. As long as measurements are maintained as percentages it deals automatically with dynamic layout and resizing for different devices and orientations. You can use millimeters to control aspects of size like width or height in order to create text boxes that will be well positioned across devices.
Editing Editing the look of the Loyalty system and the Voucher.
State Drop down to select a either Loyalty Card or Voucher.
Test Add Stamp Clicking this button will test the add stamp functionality if you have the Loyalty card selected.
Clear Stamps Clicking this button will clear all the stamped buttons you have been testing if you have the Loyalty card selected.
Item Layout Properties Editing the size and arrangement of the items on the Loyalty card.
Scale Slider with a scale of 0.1 to 2. Sets the size of Loyalty card items.
# of Items Set the number of items from 0 to 20.
Columns Set the number of columns of cards from 1 to 10.
Item Properties Apply the graphics for the items in the Loyalty program.If you have created your own designs in another software program, store them in the App’s Resource/image folder.
Default image Select image or graphic from the App’s image folder for the empty/unused loyalty item.
Stamped image Select image or graphic for the loyalty item when it is stamped. Select from the App’s image Folder.
Reward image Select image or graphic for the reward notification. Select from the App’s Image Folder.
Reward Active image Select image or graphic for the reward showing as active. Select from the App’s Image Folder.
Voucher image Select image or graphic for the voucher. Select from the App’s Image Folder.
Scan Instructions Set the instructions for scanning.
Stamp There is default text ‘Scan for stamp’ but you can click the ‘A’ button and type your own message into the Text Editor.
Reward There is default text ‘Scan code for reward’ but you can click the ‘A’ button and type your own message into the Text Editor.
Instruction Style Set the text style for instructions on how to scan. It is automatically set to a default style.
Select Style This dropdown will offer all the styles you have set in the Styles Inspector. Whichever style you have selected will populate the properties below. If you alter any of the properties below for a specific use on this page, then clicking the refresh button will revert the style back to its starting state.
The Styles Inspector is accessed from the Files Menu ‘Styles’ or use the pencil icon beside the Select Style dropdown.
Base style The dropdown will display all the styles you have set in the Styles Inspector. Whichever style you have selected will populate the properties below. If you alter any of the properties below for a specific use on a page, then clicking the Refresh arrow will revert the style back to its original state.
Create Style – opens the Styles Inspector so you can create a new style. The new style will be added to the dropdown.
Organize Style – opens the Styles Inspector.
Font size Use plus and minus buttons to set size of font.
Font color Set color of font using color picker or type hex number in directly.
Opacity Use the slider to set text opacity, with 255 being the maximum.
Font Select font from the drop down of fonts available.
Alignment Set alignment of text – Left, Center, Right, Full justify .
Tracking Use this property to adjust the distance between your text characters.
Cancel button default Select the image for the default state of the cancel button.
Cancel button down Select the image for the down state of the cancel button.
Popup Messages
Camera error There is default text ‘ERROR: The camera is not working’ but you can also click the ‘A’ button and type your own message into the Text Editor.
Invalid code There is default text ‘QR code is invalid’ but you can also click the ‘A’ button and type your own message into the Text Editor.
Card refresh There is default text ‘Congratulations…’ but you can add text as you wish.

Store List Properties

Master Drop down to select your Master. You will need to have created a Master to act as a container for the different stores you have listed. You will bind the Store List data in your App’s Dashboard to this container.
Mapping The List Mapper accesses store data that you have entered in the Dashboard and enables you to link data as you wish.
Store Name Text Style Set the text style for the name of the store. It is automatically set to a default style.
Select Style This dropdown will offer all the styles you have set in the Styles Inspector. Whichever style you have selected will populate the properties below. If you alter any of the properties below for a specific use on this page, then clicking the refresh button will revert the style back to its starting state.
The Styles Inspector is accessed from the Files Menu ‘Styles’or use the pencil icon beside the Select Style dropdown.
Base style The dropdown will display all the styles you have set in the Styles Inspector. Whichever style you have selected will populate the properties below. If you alter any of the properties below for a specific use on a page, then clicking the Refresh arrow will revert the style back to its original state.
Create Style – opens the Styles Inspector so you can create a new style. The new style will be added to the dropdown.
Organize Style – opens the Styles Inspector.
Font size Use plus and minus buttons to set size of font.
Font color Set color of font using color picker or type hex number in directly.
Opacity Use the slider to set text opacity, with 255 being the maximum.
Font Select font from the drop down of fonts available.
Alignment Set alignment of text – Left, Center, Right, Full justify .
Tracking Use this property to adjust the distance between your text characters.
Preset A Preset is a pre-determined set of properties and files for a component. You can have a Predefined Preset (Umajin created) or a Custom Preset (custom designed by you). Where the component has a default Predefined Preset it will automatically be loaded into your app when you insert that component.
The ‘LOAD’ button  opens the Preset Selector, which has tabs for Predefined and Custom, so you can choose which preset to load for your component.
Create your own Preset by building your assets, putting them in your Image folder and then selecting them in the Properties panel. The ’SAVE’ button will enable you to name and save your preset under the Custom tab.
Stamp Button Component The stamp button component has all the properties for a button component.It can be configured as you wish. If you require help please see the Properties for the ‘Button’ component under the Basic section of the Component Selector.