Add Tip Screen
→ → →
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
Upload an image and specify its dimensions.
Configure the text used to identify the order total and currency amount.
Configure the text used for the "Add a Tip?" prompt.
Configure the buttons that display a predefined tip amount.
Configure the button the customer selects to access the Custom Tips screen.
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
Configure the "Enter Tip Amount" header.
Configure the field that displays the custom tip amount entered by the customer.
Configure the Add Tip button.
Configure the Back button the customer selects to return to the previous screen.
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
![]() |
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.
|
Theme | Select the preferred theme for the component: Light Theme or Dark Theme. |
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.
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.
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
![]() |
Setting | Description |
---|---|
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
![]() |
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.
|
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
![]() |
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.
|
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
![]() |
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.
|
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
![]() |
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
![]() |
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
![]() |
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 | Define settings for the button in its default state. Background Select a background color for the button.
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
![]() |
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.
|
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.