Loyalty Program Advanced Component

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 the card can be redeemed for a reward.

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 Advanced Loyalty Program component has more design flexibility than the basic Loyalty Program.

  • The Advanced Loyalty Program can have any number of stamps and each can have their own custom graphics and design.
  • The Advanced Loyalty Program also lets you have multiple rewards on a single card. For example; you might have a total of 10 stamps on the card, but configure a small reward after 5 stamps and a major reward after 10 stamps.

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. It also has 4 pre-defined presets you can load and use. You can design and save your own custom presets for use across projects.

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.

Loyalty Program Advanced Tutorial

Properties for the Advanced Loyalty Program Component

The Advanced Loyalty Program Component automatically sets itself up with the following components; A Text component- renamed Store Name, A Button component- renamed Stamp Button and 5  default Loyalty Program Items (Stamps), created as sub-components of the Loyalty Program Advanced component.
You may only insert 1 Advanced Loyalty Program component for each app.

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
State Dropdown to select either Loyalty Card state or Card List state.
Test Add Stamp Button On click will test stamping buttons.
Clear Stamps Button On click will clear stamped buttons.
Item Properties Set the properties for the items(stamps) in the loyalty program.
Scale Slider with a scale of 0 to 4000 units. Sets the size of loyalty card items.
Default image Select background image or graphic from the App’s image folder for the empty/unused loyalty item.
Stamped image Select background image or graphic for the loyalty item when it is stamped as a reward. Select from the App’s Image Folder.
Width Set the width of all loyalty items from 0 (thinnest) to 200.
Height Set the height of all loyalty items from 0 (flattest) to 200.

Item Layout Properties

Left padding Sets the padding from the left edge of the loyalty card to the row of stamps/loyalty items from 0 to 100 pixels
Right padding Sets the padding from the right edge of the loyalty card to the row of stamps/loyalty items from 0 to 100 pixels
Top Padding Sets the padding from the top edge of the loyalty card to the row of stamps/loyalty items from 0 to 100 pixels
Bottom padding Sets the padding from the bottom edge of the loyalty card to the row of stamps/loyalty items from 0 to 100 pixels
Horizontal Item gap Sets the horizontal space between stamp/loyalty items from 0 to 100 pixels
Vertical Item gap Sets the vertical space between stamp/loyalty items from 0 to 100 pixels
Scan Instructions
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.
Cancel button default Select the image from the App’s image folder for the default state of the cancel button.
Cancel button down Select the image from the App’s image folder for the down state of the cancel button.
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.
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 allows you to link your data as you wish.
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 Predefined Preset it will automatically be loaded into your app as the default 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.

Within the Loyalty Program Advanced you have child components such as a Text Component (Store Name), Button Component (Stamp Button) and Loyalty Program Items or stamps.

Properties for Text Component – Store Name

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.
Appearance Set content and placement/arrangement of store name text.
Text Press the edit (A) button to enter text in a larger panel.
Resize Type Options are:

  • Millimeters – Sets the size of the font to a specific millimeter measurement.The font will stay the same size regardless of the device size.
  • Scale with screen – The font size is set to be proportional to the size of the device screen. Works like a percentage.
Rich Text If checked will display rich text.
Multiline Checkbox If checked will display text over multiple lines.
Ellipsis Checkbox This checkbox will only work if you turn off the ‘Resize text to box’ option. When this is off and there is no space for the text an ellipsis (three dots) is used at the end of the text to indicate there is more text which cannot be shown.
Center vertical Centers text vertically in the text box.
Resize to Content Checkbox. If checked the text box will resize to fit content.
Line Spacing Adjusts spacing between lines of text in lines of text where 1 is normal.
Text Style Set the text style for store name. 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 Set alignment of text – Left, Center, Right, Full justify .
Preset This property lets you use the default setting or create custom settings that you can save for use across projects.

Properties Button Component – Stamp Button

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 on order to create a button that will be viable for use across devices.
Appearance Set the look of the button on the page.
Text Default text is ‘Scan Code’ but text can be entered into text editor as you wish..
Default Image Image that will display on the button when it is in the normal/unused display state.
Down Image Image that will display on the button when it is pressed.
Disabled Image Image that will display on the button if it is disabled.
Nine Slice Values Available to refine the shape of this image for the button. It affects all 3 image states.Slice top: Stop the top of the image from being stretched.Slice bottom: Stop the bottom of the image from being stretched.Slice left: Stop the left of the image from being stretched.Slice right: Stop the right of the image from being stretched.
Text scaling Dropdown options are Scale with screen or Fixed size.
Scale border with screen Slider to scale border.
Text X Position Set the horizontal placement of the text on your button on a scale of 0 to 1.
Text Y Position Set the vertical placement of the text on your button on a scale of 0 to 1.
Hide Text Checkbox to toggle text visibility on or off.
Keep aspect ratio Checkbox.
Icon Image Sets the icon you select from the Image folder to show on your button.
Icon Scale Adjust the size of your icon on the button – you can set it from 0 (invisible) to 1 (full size).
Icon X Position Set the horizontal position of the icon on your button on a scale of 0 to 1
Icon Y Position Set the vertical position of the icon on your button on a scale of 0 to 1
Opacity Set how opaque all imagery/text on buttons will display on a scale of 0 to 1, with 0 being totally translucent.
Text style: Set the text style for button label. 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 This property lets you use the default setting or create custom settings that you can save for use across projects.

Properties for Loyalty Program Items

Appearance
Redeemable Checkbox. If this box is checked it allows you to set the imagery for the Redeemable state and the state when the Loyalty Item has been redeemed/fulfilled as the last 2 properties on this component.
Default image Select the background image or graphic for your Loyalty Program Item from the Image Folder – the cross deletes the image.
Stamped image Select the image, graphic or icon from the Image Folder that will populate the Loyalty Program Item when a loyalty stamp is earned – the cross deletes the image.
Redeemable image If the Redeemable box is checked you can select imagery from the Image Folder for the redeemable state of the item.
Redeemed image If the Redeemable box is checked you can select imagery from the Image Folder for the redeemed state of the item.