Loyalty Component
The following identifies the steps to add and configure a customizable, customer-facing Loyalty component for the Digital Menu Board (DMB).
The Loyalty component enables users to add a loyalty experience to Customer Facing Display content. Using this component, customers can:
Sign Up / Login to Loyalty
View Point Balance
View and Redeem Rewards
Register for a loyalty program.
The Loyalty component is fully integrated with the point of sale (POS) data feed and adapts automatically based on configured loyalty settings and available identification methods.
Add Loyalty Component
To add a Loyalty component:
From the left pane of the Content Designer, select Component.
From the Component dropdown, select Loyalty Screen. The Loyalty component is added to the canvas automatically.
After the Loyalty component has been added, it automatically creates the following nested groups:
Log In
View Rewards
Sign Up
Nota
These nested groups cannot be:
Deleted
Reordered
Moved
Copy and paste actions are disabled for these nested groups.
From the left pane, select Layers to view the component details.
From Layers, select a nested group, such as Log In, and define the following:
Setting
Description
Theme
Select the preferred theme for the component: Light Theme or Dark Theme.
Background
Select a background color for the component.
Text
For the Primary Text and Secondary Text on the screen, use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.
Buttons
Background
Select a background color for the buttons.
- Use the toggle to select a solid or gradient color.Outline
Use the provided fields to specify the preferred thickness (weight) and color of the button outline.
Primary and Secondary Text
For the Primary Text and Secondary Text on the buttons, use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.
Nota
Buttons are presets and can be applied to any button of the Loyalty component along with a Custom option if the button needs a custom configuration.
Buttons (Alternate)
Background
Select a background color for the buttons.
- Use the toggle to select a solid or gradient color.Outline
Use the provided fields to specify the preferred thickness (weight) and color of the button outline.
Primary and Secondary Text
For the Primary Text and Secondary Text on the buttons, use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.
Nota
Buttons (Alternate) are presets and can be applied to any button of the Loyalty component along with a Custom option if the button needs a custom configuration.
Nota
The Log In screen allows customers to identify themselves using supported loyalty identification methods. Supported methods depend on the Data Management configuration and may include:
Loyalty ID
Coupon Code
Phone Number
Email Address
First and Last Name
For additional Data Management configuration instructions, see Customer Identification Methods.
Repeat step 6 for View Rewards and Sign Up to configure each nested group.
Important Loyalty Component Rules
When working with the Loyalty component, the following rules apply:
The Loyalty component can only exist as a root element in the Layers panel.
The Loyalty component cannot be added inside:
Groups
Carousels
Additional elements cannot be added inside the Loyalty component.
Copy and paste actions are disabled for the Loyalty component.
The entire Loyalty component can be deleted, if needed.
The Loyalty component adjusts automatically to the current Content Design resolution. If the Content Design resolution changes:
All Loyalty screens resize automatically.
Nested groups are fitted automatically to the new resolution.
Add Loyalty Button
To add a Loyalty button:
From the left pane of the Content Designer, select Component.
From the Component dropdown, select Order Confirmation.
From the left pane, select Layers to view the component details and select Ordering Page.
Nota
The Loyalty button is available only if the Order Confirmation - Ordering Page is selected.
From the left pane of the Content Designer, select Component.
From the Component dropdown, select Loyalty Button. The Loyalty button is added to the Layers panel and to the workspace. The Loyalty button is movable on the workspace.