New Gen App: Widgets

The new Home Screen presents only widgets—containers of data, images and buttons. Clicking on components of the widget will open other relevant screens. 

Article Topics:

Add Widgets
Profile Widget
Welcome Message
Point Shop Widget
Auto-Redeem Points Widget
Tiles Widget
Catalog Widget

 

Add Widgets

From Content > Layout > Home Screen (NEW), add up to 10 widgets in the order you want them to appear. Add only the number of widgets you want and leave the rest empty. You can add the same widget more than once.

widget1.png 

 

Profile Widget

The Profile Widget displays member details, benefit count and a custom button (optional). If the user isn’t logged into the app, a Login Now button is displayed instead.

widget2a.png    widget3.png 


Tapping on a section of the widget opens relevant screens:

  • Gifts opens Gift List
  • Cards opens Punch Card List
  • Points opens screen you specify
  • Credit opens screen you specify
  • Name/identifier/image opens Profile
  • Custom button opens screen you specify  

 

STEP 1 – Add Widget

From Content > Layout > Home Screen (NEW), select Profile Widget and then select what to display:

profile_widget.png

Note: If you select credit, points, punch cards and gifts, then 4 benefit buttons will appear instead of 3.

Component

Description

Image

Member image (when member connects with Facebook), otherwise a (customizable) icon

Name

First and last name

Phone/Email

Phone or email (based on which field we have for this member)

Points

Points balance

Note: You can choose to display both points and credit in the profile widget, but only one balance in the Profile Screen (by default, points are displayed). You can display the credit balance there instead by changing the app text parameter. Learn More

Credit

Credit balance

Gifts

Number of active gifts

Punch Cards

Number of active punch cards (including cards that aren’t yet fully punched)

 

STEP 2 – Add Custom Button (Optional)

You can add a custom button to your profile widget to appear in the top-right corner. If you display points and/or credit, you also need to specify which screen to open when the user taps Points (or Credit) since different screens may be relevant for different businesses. For example, you can open the Point Shop, the Point Verification Code screen used for payment, or My Activity screen to show the member’s point transactions. Both these buttons can be specified using a special custom screen. Learn more

 

Welcome Messages


widget5.png   


STEP 1 – Create Welcome Messages

Create welcome message from Content > Information > Welcome Messages. All the settings still apply, but the button action will only work if it’s supported by the new app. See Graphic Guidelines


STEP 2 – Add Widget

From Content > Layout > Home Screen (NEW), select Welcome Messages and specify these settings:

widget6.png

Field

Description

Width (px)

Image width and height in pixels

Note: The image will be adjusted proportionally for different screen sizes. Learn more

Height (px)

Width Adjustment

Image width can be fitted to the standard widget width (A), or to the screen width (B)

A: widget7.png    B: widget8.png

Autoplay Interval (Milliseconds)

How long to show each message before automatically sliding to the next (if Autoplay on)
Note
: To start, the first message will be displayed for an additional 1.5 seconds

Autoplay

Whether or not to automatically slide to the next welcome message

 

Point Shop Widget

Encourage members to accumulate more points so they can buy the next reward—the next Point Shop item they will be able to afford (but is now above their current balance).

widget9.png

 

STEP 1: Create Point Shop

Create your Point Shop from Benefits > Point Shop (after creating your gifts).


STEP 2: Add Widget

From Content > Layout > Home Screen (NEW), select Point Shop Widget.

Then specify how many next rewards to show in the widget (i.e. Point Shop items that cost more than the member’s current balance).

widget10.png

For example, suppose the Point Shop has items with the following prices: 50, 100, 150, 200, 300 and the member has 100 points. If you select to show the 2 next rewards, then items with these prices will be shown: 50, 100, 150, and 200 (since the member can already afford the first 2 items, it presents an additional 2 “next reward” items).

Note: These items are displayed in an animation, starting from the most expensive.

 

Auto-Redeem Points Widget

You can encourage members to accumulate more points by automatically redeeming their points for a reward once they reach a certain number (such as a free hamburger for 1000 points). You can now add a new widget to your Home Screen to show members their progress towards their reward.

new_widget2.png

Step 1: Create Redeem Rule

To automatically redeem points for a gift when members reach a certain balance, create a rule:

When Member

Receives points

Conditions

New balance is greater than or equal to 1000

Action

Redeem Points (1000 Points)

Action

Send Gift (the reward)

Action

Send Push (or another message to notify the member of their new gift)


redeempoints1.png

Step 2: Add Widget

From Content > Layout > Home Screen (NEW), add Auto-Redeem Points Widget (see Widgets):

 

Field

Description

Wallet

Which wallet is redeemed in the rule (points or credit)

Layout

Direction that the image is filled to indicate the progress:

·         Vertical – from bottom to top

·         Horizontal – from side to side

Points Needed for Redeem

Number of points needed to receive the gift (same as the rule)

 

redeempoints2a.png

Step 3: Add Images

Progress is indicated in the widget using an image that fills up gradually. The image is empty when the member has no points and full when the member has enough points to redeem for their reward.

 

From Content > Branding (NEW) > Custom Icons (NEW), add images for the following icons:

[NEW] Auto-Redeem Points - Empty

An image representing the empty state

[NEW] Auto-Redeem Points - Full

An image representing the full state

Note: When choosing your images, keep in mind that they will be overlapped and the “full” one will be revealed gradually to indicate progress. So the empty image must represents an empty version of the full one.

autoredeem.png

Note: Instead of showing “to get my reward” on the widget, you can specify the reward from the app texts (for example, change it to “to get my hamburger”). Learn More

 

Tiles Widget

Each tiles widget can contain 1-3 tiles, and you can add up to 3 tiles widgets with different tiles.

widget11.png   

widget12a.png

widget13a.png

 

STEP 1 – Create Custom Screen

All buttons (including icons, titles and actions) are specified using a special custom screen. Since you can add up to 3 different tiles widgets for your app (where each widget can have 1-3 buttons), you can create up to 3 different custom screens for tiles widgets (each defining the buttons for a different widget). Learn more

 

STEP 2 – Add Widget

From Content > Layout > Home Screen (NEW), select Tiles Widget. Then select the custom screen you created containing your tiles (ex: Tiles Widget Buttons 1), and the layout (text and icons, icons only or text only).

widget14.png 

 

Catalog Widget

You can add a catalog widget to share your specials, news & updates, photo gallery, coupons, and more. You can fill them with items and add them to your home screen.

Note: It is recommended to use to for catalog with up to 7-8 items.

    

STEP 1 – Create a catalog

From Content Information Catalog

 mceclip0.png

Notes:

  1. Only items are displayed.
  2. Each item has one button.
  3. If items have tags (displaying specific content for matching users)- make sure to have at least one item with no tags to make widget displayable.
  4. Optionally- item can have an action when pressing the image (Custom action when category / Item is tapped).

 

STEP 2 – Add Catalog Widget

From Content Layout Home Screen (NEW)

  • Image height (px)
  • Catalog name (the catalog you created in step 1)

 mceclip1.png

 

 

 

 

Updated
Was this article helpful?
0 out of 0 found this helpful