Add Tip Screen

Portal → 4-Dot Menu → Digital Menu Board → Content Designs

Add a customizable, customer-facing Tip Screen component. The Tip Screen component includes a screen from which the customer can select a predefined tip, and a screen from which the customer can enter a custom tip.

To add a tip screen:

From the Screens homepage, select Create Screen.
From the left pane of the Content Designer, select Component.
From the Component dropdown, select Tip Screen.
From the Layers pane, select Tips Component.
From the right pane, define the Tips Component settings.
From the Layers pane, select Select Tips.
From the right pane, define the Select Tips settings.

From the Select Tips section of the Layers pane, select each of the following elements and define their respective settings:

Element	Description
Logo	Upload an image and specify its dimensions.
Order Total	Configure the text used to identify the order total and currency amount.
Add a Tip?	Configure the text used for the "Add a Tip?" prompt.
Tip Options	Configure the buttons that display a predefined tip amount.
Custom Tip	Configure the button the customer selects to access the Custom Tips screen.
No Tip	Configure the button the customer selects to leave no tip.

From the Layers pane, select Custom Tips.
From the right pane, define the Custom Tips settings.

From the Custom Tips section of the Layers pane, select each of the following elements and define their respective settings:

Element	Description
Enter Tip	Configure the "Enter Tip Amount" header.
Input	Configure the field that displays the custom tip amount entered by the customer.
Add Tip	Configure the Add Tip button.
Back	Configure the Back button the customer selects to return to the previous screen.
Keyboard	Configure the keypad that the customer uses to type their custom tip amount.

From the upper-right of the content builder, select Preview Screen to see a preview of the tip screen.

Tip

Select an element directly from the tip screen as an alternate method for accessing its respective settings.

Tips Component Settings

Table 1. Tips Component Settings

Setting	Description
Screen Name	Type a name for the tip screen.
Description	Type a description of the tip screen
Screen Size	From the dropdown, select the preferred screen resolution.
Background	Select a background color for the screen. - Use the toggle to select a solid or gradient color.
Theme	Select the preferred theme for the component: Light Theme or Dark Theme.

Select Tips Settings

Table 2. Select Tips Settings

Setting	Description
Tips Component	Type a name for the Select Tips component screen.
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.
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.

Logo Settings

Table 3. Logo Settings

Setting	Description
Image	In the provided field, type a name for the logo element. Type the preferred width (W) and height (H) for the logo. Select Select Image to upload the logo image.
Details	In the Description field, type a description of the logo element.

Order Total Settings

From the Layers pane, expand Order Total to access the following elements:

Order Total
Amount

To define Order Total settings:

From the Order Total section of the Layers pane, select Order Total.
From the Text section on the right, type a name for the Order Total element in the provided field.
Select Primary Text and use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.
Select Secondary Text and use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.
Select Custom and use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.
From the Order Total section of the Layers pane, select Amount.
From the Text section on the right, type a name for the Amount element in the provided field.
Select Primary Text and use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.
Select Secondary Text and use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.
Select Custom and use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.

Add a Tip? Message

To define settings for the Add a Tip element:

From the Text section on the right, type a name for the Add a Tip element in the provided field.
Select Primary Text and use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.
Select Secondary Text and use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.
Select Custom and use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.

Tip Options

Table 4. Tip Option Settings

Setting	Description
Name	From the Button section on the right, type a name for the Tip Options element in the provided field.
Button Type	Select the button type to configure: Button, Alternate, or Custom.
Size	Type the preferred width (W) and height (H) for the 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.

Custom Tip

Table 5. Custom Tip Settings

Setting	Description
Name	From the Button section on the right, type a name for the Custom Tip element in the provided field.
Button Type	Select the button type to configure: Button, Alternate, or Custom.
Size	Type the preferred width (W) and height (H) for the 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.

No Tip

Table 6. No Tip Settings

Setting	Description
Name	From the Button section on the right, type a name for the No Tip element in the provided field.
Button Type	Select the button type to configure: Button, Alternate, or Custom.
Size	Type the preferred width (W) and height (H) for the 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.

Custom Tips

Table 7. Custom Tips Settings

Setting	Description
Tips Component	Type a name for the Custom Tips component screen.
Background	Select a background color for the Custom Tips component screen.
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.

Enter Tip Header

To define settings for the Enter Tip header element:

From the Text section on the right, type a name for the Enter Tip element in the provided field.
Select Primary Text and use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.
Select Secondary Text and use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.
Select Custom and use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.

Input

Table 8. Input Settings

Setting	Description
Name	From the Input section on the right, type a name for the Input element in the provided field.
Background	Select a background color for the buttons.
Outline	Use the provided fields to specify the preferred thickness (weight) and color of the button outline.
Text	For the Text (Placeholder) and Text (User Input) values, use the provided fields to specify the preferred Font, Style, Size, Justification, and Color. Text (Placeholder) refers to the default text that appears in the field before the user enters a value. Text (User Input) refers to the value that the user types in this field.

Add Tip Button

Table 9. Add Tip Button Settings

Setting	Description
Name	From the Button section on the right, type a name for the Add Tip element in the provided field.
Size	Type the preferred width (W) and height (H) for the button.
Preview	Select the preferred preview type for the Add Tip button: Default State Disabled State
Default State	Define settings for the button in its default state. Background Select a background color for the button. - 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. Text For the button text, use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.
Disabled State	Define settings for the button when it is disabled. Background (Disabled) Select a background color for the button. Outline (Disabled) Use the provided fields to specify the preferred thickness (weight) and color of the button outline. Text (Disabled) For the button text, use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.

Back Button

Table 10. Back Button Settings

Setting	Description
Name	From the Button section on the right, type a name for the Back Button element in the provided field.
Button Type	Select the button type to configure: Button, Alternate, or Custom.
Size	Type the preferred width (W) and height (H) for the button.
Background	Select a background color for the button. - 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 button, use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.

Keyboard

In the provided field, type a name for the Keyboard element.

抖阴