¶¶Òõ

Skip to main content

Add Tip Screen

Portal4-Dot MenuDigital Menu BoardContent 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:

  1. From the Screens homepage, select Create Screen.

  2. From the left pane of the Content Designer, select Component.

  3. From the Component dropdown, select Tip Screen.

  4. From the Layers pane, select Tips Component.

    Tips_Component.png
  5. From the right pane, define the Tips Component settings.

  6. From the Layers pane, select Select Tips.

    Select_Tips.png
  7. From the right pane, define the Select Tips settings.

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

    Select_Tips_Elements.png

    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.

  9. From the Layers pane, select Custom Tips.

    Custom_Tips.png
  10. From the right pane, define the Custom Tips settings.

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

    Custom_Tips_Elements.png

    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.

  12. 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

Tips_Component.png
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.

Color_Toggle.png - 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

Select_Tips.png
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.

Color_Toggle.png - 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.

Color_Toggle.png - 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

Logo.png
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:

  1. From the Order Total section of the Layers pane, select Order Total.

    Order_Total.png
  2. From the Text section on the right, type a name for the Order Total element in the provided field.

  3. Select Primary Text and use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.

  4. Select Secondary Text and use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.

  5. Select Custom and use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.

  6. From the Order Total section of the Layers pane, select Amount.

    Amount.png
  7. From the Text section on the right, type a name for the Amount element in the provided field.

  8. Select Primary Text and use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.

  9. Select Secondary Text and use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.

  10. Select Custom and use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.

Add a Tip? Message

Add_a_Tip_Message.png

To define settings for the Add a Tip element:

  1. From the Text section on the right, type a name for the Add a Tip element in the provided field.

  2. Select Primary Text and use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.

  3. Select Secondary Text and use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.

  4. Select Custom and use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.

Tip Options

Tip_Options.png
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.

Color_Toggle.png - 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

Custom_Tip.png
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.

Color_Toggle.png - 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

No_Tip.png
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.

Color_Toggle.png - 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

Custom_Tips.png
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

Enter_Tip.png

To define settings for the Enter Tip header element:

  1. From the Text section on the right, type a name for the Enter Tip element in the provided field.

  2. Select Primary Text and use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.

  3. Select Secondary Text and use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.

  4. Select Custom and use the provided fields to specify the preferred Font, Style, Size, Justification, and Color.

Input

Input.png
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

Add_Tip_Button.png
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.

Color_Toggle.png - 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

Back.png
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.

Color_Toggle.png - 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

Keyboard.png

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