Contents
| Table of Contents |
|---|
| Info |
|---|
Order-Level Content → Loyalty → Loyalty Configs → Feature Loyalty UI |
Contents
| Table of Contents |
|---|
Overview
What is Feature Loyalty UI?
This is where the Loyalty program visuals (UI) are configured. From the Loyalty logo, to background images, icons for progress bars, tier visuals, or the Loyalty QR Code page.
The level of customization allowed is big, meaning there are several configurations you can explore.
Examples
Editing Feature Loyalty UI
Rewards Logo
The Rewards Logo is the loyalty program logo that shows in various different places across the app.
When a customer is signed out, they see the logo in the home page, account page and sign up page:
When a customer is signed in, they see the logo in the home page, account page and loyalty history page:
Rewards Logo Inverted
No Reward Points Empty State
This empty state shows when a user logs in, has 0 loyalty points, and navigates to their loyalty account history page (/rewards/history)
Not Enrolled Empty State
This empty state shows when a user logs into the Web version of the app and his account is not enrolled into loyalty. An example is when a guest logs into a loyalty market (e.g. BK CH) with the user he had already used in the past for a different loyalty market (e.g. BK DE). In this case the user will see this empty state.
Not Enrolled Empty State Mobile
This empty state shows when a user logs into the App and his account is not enrolled into loyalty. An example is when a guest logs into a loyalty market (e.g. BK CH) with the user he had already used in the past for a different loyalty market (e.g. BK DE). In this case the user will see this empty state.
No Rewards Available Empty State
This empty state shows if the guest is logged in and navigates to the Rewards list and no rewards are available. This can happen if no Rewards are available to that specific restaurant.
Loyalty Banner Configuration
The component will edit the Loyalty Banner, as seen below
Call to Action Buttons
Button on the Homepage - Authenticated
| Info |
|---|
This configuration allows you to edit the button label and button path for the Loyalty Banner Button on the Homepage when a user is authenticated (logged into the app). |
Button on the Homepage - Unauthenticated
| Info |
|---|
This configuration allows you to edit the button label and button path for the Loyalty Banner Button on the Homepage when a user is unauthenticated (logged out of the app). |
Button on Rewards page
| Info |
|---|
This configuration allows you to edit the button label and button path for the Loyalty Banner Button on the Rewards page when a user is authenticated (logged into the app). |
Background Setting
Learn More Icon
Banner Progress Bar Icon
Opt In Modal
Opt In Modal - Error
Opt In Modal - Loading
Swap Modal Content
Short Code Confirmation Modal Content
Override Short Code Modal Content
Surprise and Delight Modal Content
Loyalty Dashboard
Loyalty
...
The component that will edit the In Restaurant screen redemption, as seen below
...
Loyalty QR Code
...
Loyalty QR Code and Short Code
...
Loyalty Text
...
Loyalty Marketing Tile Group Widget
...
Loyalty Legacy Short Code
...
...
Not Available at this Restaurant
Loyalty Not Available at Delivery Mode
Loyalty Not Authenticated
Featured Rewards
International Rewards Widget Type
...
Enabling the Loyalty Notifications Widget
This section will be a walkthrough on how you can enable the Widget on the Rewards Detail Page.
Navigate to the Feature Loyalty UI Tab on Sanity
Order-Level Content ➡️ Loyalty ➡️ Loyalty Configs ➡️ Feature Loyalty UIScroll Down to the Loyalty Dashboard Section where you will see a section for Widgets
This section is where you will add the Loyalty Notifications Widget. This is a Sorted Widget list, which means that the widgets will appear in the order in which they are configured.
To add the Loyalty Notifications Widget, Click on Add Item and then Select Loyalty Notifications
Next, you will simply complete the fields in the pop-up
Click on Enable Notifications Widget Radio Button
Enter Title of the Section - This is what the Name of the Section will be on the FE
And then Select the Incentives you would like to show in the section. NOTE: Only incentives with Notifications Turned On will be shown in the Drop Downs. (This is covered in the section below)
Once configured, you can hit Publish and the Widget will now show on the FE.
