Skip to main content

Add Order Confirmation

Xenial Cloud Portal4-Dot MenuDigital Menu BoardScreens

An Order Confirmation Unit (OCU) is a customer-facing screen that displays order details to the customer.

To add an OCU component:

  1. From the left pane of the Screen Designer, select Component.

  2. From the Component dropdown, select Order Confirmation.

  3. From the Layers pane on the left, select Order Confirmation.

    The OCU component includes the following pages:

    Page

    Description

    Ordering Page

    Displays the Item List and an optional Summary Area:

    • The Item List displays the order item details.

    • The Summary Area displays the order subtotal, tax, and applied discounts and/or tips.

    Add optional elements to the page including groups, carousels, and/or other media.

    Thank You Page

    Displays a "Thank You" message to the guest with the order total. This page opens after the order is paid.

    Configure the message text, the order total label, and the number of seconds to display the page.

    Note

    From the Layers pane:

    • Toggle the Lock icon next to a component to lock/unlock the component properties.

    • Toggle the Eye icon next to a component to hide/show the component.

  4. From the right pane, define the following:

    Field

    Description

    X and Y

    Type the desired X and Y coordinates for the component.

    When the position of the component is manually adjusted on the screen, the X and Y field values are updated automatically.

    W and H

    Type the desired width and height of the component.

    When the width and height of the component are manually adjusted, the W and H field values are updated automatically.

    Show Thank You Page

    Select this option to include a "Thank You" page on the OCU.

    The "Thank You" page is automatically displayed on the OCU after the order is paid by the guest.

    Inactivity Time (s)

    Type the desired number of seconds of inactivity before the OCU times out.

  5. From the Layers pane on the left, select Ordering Page.

    From the right pane, define the following:

    Field

    Description

    Show Summary Area

    Select this option to include a Summary Area on the Ordering page.

    The Summary Area displays the order subtotal, tax, and applied discounts and/or tips.

  6. From within Ordering Page on the Layers pane, select Item List.

    Note

    It may be necessary to expand the Ordering Page element to access the Item List.

    From the right pane, define the following:

    Field

    Description

    X and Y

    Type the desired X and Y coordinates for the component.

    When the position of the component is manually adjusted on the screen, the X and Y field values are updated automatically.

    W and H

    Type the desired width and height of the component.

    When the width and height of the component are manually adjusted, the W and H field values are updated automatically.

    Modifier Display

    Select the desired option:

    • List - Item modifiers are listed vertically.

    • Comma Separated - Item modifiers are listed horizontally and separated by a comma.

    Item Spacing (px)

    Type the number of pixels of blank space in between each listed order item.

    Indent Size (px)

    Type the number of pixels of blank space to indent each listed order item.

    Show Single Item Quantities

    Select this option to display "1" next to each order item with a quantity of one (1).

    If this option is not selected, a quantity is not displayed next to each order item with a quantity of one (1).

  7. From the right pane, define the following settings for each of the elements inside the Item List, including Parent Item, Parent Item Modifier, Child Item, and Child Item Modifier.

    These settings determine how the respective quantity, name and price for these elements are formatted on the screen.

    Setting

    Description

    Text

    From the Text section, select formatting options:

    Option

    Description

    Font

    From the dropdown, select a font to apply to the text.

    Style

    From the dropdown, select a style to apply to the text.

    Size

    In the provided field, type the desired font size.

    Color

    From the color field, select a font color. The HEX# for the selected color is displayed.

    Price

    Define the following settings for the displayed price of the element:

    Option

    Description

    Decimal Places

    Type the number of decimal places to display in the product price.

    Show Currency Symbol

    Display the currency symbol with the product price.

    Show Decimal

    Display the decimal values in the same font size as the integer value.

    If this option is NOT selected, decimal values are displayed in a smaller font size.

    Show Zero Integer

    Display the leading zero (0) in the product price (e.g. 0.99).

    Show Zero Decimal

    Always display the decimal value even when the decimal value is zero (0) (e.g. $1.00).

  8. From within Ordering Page on the Layers pane, select Summary Area.

    Note

    This element is only available when Show Summary Area is selected for the Ordering Page.

    It may be necessary to expand the Ordering Page element to access the Summary Area.

    From the right pane, define the following:

    Field

    Description

    X and Y

    Type the desired X and Y coordinates for the component.

    When the position of the component is manually adjusted on the screen, the X and Y field values are updated automatically.

    W and H

    Type the desired width and height of the component.

    When the width and height of the component are manually adjusted, the W and H field values are updated automatically.

    Show Balance Summary

    Display a Balance Summary in the Summary Area on the screen.

    The Balance Summary lists the applied payment types and Amount Due for the order.

  9. From within Summary Area on the Layers pane, select the Order Summary element.

    From the right pane, define the following:

    Setting

    Description

    Text

    From the Text section, select formatting options:

    Option

    Description

    Font

    From the dropdown, select a font to apply to the text.

    Style

    From the dropdown, select a style to apply to the text.

    Size

    In the provided field, type the desired font size.

    Color

    From the color field, select a font color. The HEX# for the selected color is displayed.

    Summary Options

    Select the desired options:

    Option

    Description

    Show Sub Total

    Display the order sub total in the Summary Area.

    Show Tax

    Display the tax on the order in the Summary Area.

    Show Tips

    Display the guest tips applied to the order in the Summary Area.

    Show Discounts

    Display applied discount details in the Summary Area.

    From the right pane, define the following settings for each of the elements inside Order Summary, including the Subtotal, Tax, Tips, Discounts, and Total:

    Setting

    Description

    Text

    From the Text section, select formatting options:

    Option

    Description

    Font

    From the dropdown, select a font to apply to the text.

    Style

    From the dropdown, select a style to apply to the text.

    Size

    In the provided field, type the desired font size.

    Color

    From the color field, select a font color. The HEX# for the selected color is displayed.

    Value

    For Value elements, define the following:

    Option

    Description

    Decimal Places

    Type the number of decimal places to display in the value.

    Show Currency Symbol

    Display the currency symbol with the value.

    Show Decimal

    Display the decimal values in the same font size as the integer value.

    If this option is NOT selected, decimal values are displayed in a smaller font size.

    Show Zero Integer

    Display the leading zero (0) in the value (e.g. 0.99).

    Show Zero Decimal

    Always display the decimal value even when the decimal value is zero (0) (e.g. $1.00).

  10. From the right pane, define the following settings for the Balance Summary element in the Summary Area (if applicable):

    Note

    This element is only available when Show Balance Summary is selected for the Summary Area.

    Field

    Description

    Text

    From the Text section, select formatting options:

    Option

    Description

    Font

    From the dropdown, select a font to apply to the text.

    Style

    From the dropdown, select a style to apply to the text.

    Size

    In the provided field, type the desired font size.

    Color

    From the color field, select a font color. The HEX# for the selected color is displayed.

    Show Payments

    Display a Payments section in the Balance Area on the screen.

    The Payments section lists the applied payment types and the respective values.

    From the right pane, define the following settings for each of the elements inside Balance Summary, including the Payments (if applicable) and Amount Due:

    Field

    Description

    Text

    From the Text section, select formatting options:

    Option

    Description

    Font

    From the dropdown, select a font to apply to the text.

    Style

    From the dropdown, select a style to apply to the text.

    Size

    In the provided field, type the desired font size.

    Color

    From the color field, select a font color. The HEX# for the selected color is displayed.

    Value

    For Value elements, define the following:

    Option

    Description

    Decimal Places

    Type the number of decimal places to display in the value.

    Show Currency Symbol

    Display the currency symbol with the value.

    Show Decimal

    Display the decimal values in the same font size as the integer value.

    If this option is NOT selected, decimal values are displayed in a smaller font size.

    Show Zero Integer

    Display the leading zero (0) in the value (e.g. 0.99).

    Show Zero Decimal

    Always display the decimal value even when the decimal value is zero (0) (e.g. $1.00).

  11. From the Layers pane on the left, select Thank You Page.

    From the right pane, define the following:

    Field

    Description

    Duration (s)

    Type the number of seconds to display the Thank You page on the OCU.

    Text

    From the Text section, select formatting options:

    Option

    Description

    Font

    From the dropdown, select a font to apply to the text.

    Style

    From the dropdown, select a style to apply to the text.

    Size

    In the provided field, type the desired font size.

    Color

    From the color field, select a font color. The HEX# for the selected color is displayed.

  12. From within Thank You Page on the Layers pane, select Thank You Text.

    From the right pane, define the following:

    Field

    Description

    Thank You Text

    In the provided field, type a label for the Thank You Text.

    X and Y

    Type the desired X and Y coordinates for the component.

    When the position of the component is manually adjusted on the screen, the X and Y field values are updated automatically.

    W and H

    Type the desired width and height of the component.

    When the width and height of the component are manually adjusted, the W and H field values are updated automatically.

    Text

    From the Text section, select formatting options:

    Option

    Description

    Font

    From the dropdown, select a font to apply to the text.

    Style

    From the dropdown, select a style to apply to the text.

    Size

    In the provided field, type the desired font size.

    Color

    From the color field, select a font color. The HEX# for the selected color is displayed.

    Justification

    From the right of the color field, select a justification option.

  13. From the Layers pane on the left, select Total Label.

    From the right pane, define the following:

    Field

    Description

    Total Label

    In the provided field, type a label for the Total Label.

    X and Y

    Type the desired X and Y coordinates for the component.

    When the position of the component is manually adjusted on the screen, the X and Y field values are updated automatically.

    W and H

    Type the desired width and height of the component.

    When the width and height of the component are manually adjusted, the W and H field values are updated automatically.

    Text

    From the Text section on the right pane, select formatting options:

    Option

    Description

    Font

    From the dropdown, select a font to apply to the text.

    Style

    From the dropdown, select a style to apply to the text.

    Size

    In the provided field, type the desired font size.

    Color

    From the color field, select a font color. The HEX# for the selected color is displayed.

    Justification

    From the right of the color field, select a justification option.

  14. From the Layers pane on the left, select Order Total.

    From the right pane, define the following:

    Field

    Description

    Order Total

    In the provided field, type the text label for the order total.

    X and Y

    Type the desired X and Y coordinates for the component.

    When the position of the component is manually adjusted on the screen, the X and Y field values are updated automatically.

    Text

    From the Text section on the right pane, select formatting options:

    Option

    Description

    Font

    From the dropdown, select a font to apply to the text.

    Style

    From the dropdown, select a style to apply to the text.

    Size

    In the provided field, type the desired font size.

    Color

    From the color field, select a font color. The HEX# for the selected color is displayed.

    Justification

    From the right of the color field, select a justification option.

    Pricing Format

    Define the following formatting options for price values:

    Option

    Description

    Decimal Places

    Type the number of decimal places to display in the value.

    Show Currency Symbol

    Display the currency symbol with the value.

    Show Decimal

    Display the decimal values in the same font size as the integer value.

    If this option is NOT selected, decimal values are displayed in a smaller font size.

    Show Zero Integer

    Display the leading zero (0) in the value (e.g. 0.99).

    Show Zero Decimal

    Always display the decimal value even when the decimal value is zero (0) (e.g. $1.00).

To preview the OCU:

  1. From the upper-right of the Screen Designer, select Preview Screen.

  2. From the preview screen, use the following key combinations to view specific OCU elements:

    • Cmd/Ctrl + H - View the Ordering page.

    • Cmd/Ctrl + J - View the Thank You page.

    • Cmd/Ctrl + K - Hide the Ordering and Thank You pages.