Order Confirmation Unit (OCU)
The following identifies the recommended steps to add and configure the following components for Digital Menu Boards (DMB):
Component | Description |
|---|---|
Order Confirmation Unit (OCU) | An OCU displays order details to the customer, including:
The benefits of an OCU include:
|
Media Carousel | A media carousel displays a collection of media files consecutively on an infinite loop where each file is displayed for a specified duration. A carousel can include any combination of images, videos, and/or price components. For example, a carousel might include two (2) promotional images (where each image appears for five (5) seconds), followed by an eight (8) second video. |
Create Content Design
鈫� 鈫� 鈫�
To create a new Content Design:
From the upper-right of the Content Designs homepage, select Create Content Design.
From Content Design Settings, define the following:
Field
Description
Content Design Name
Name for the Content Design.
Description
Description of the Content Design.
Content Design Size
From the dropdown, select the desired resolution for the Content Design.
Background Color
Select the color tile to select a background color for the Content Design.
Add Order Confirmation Unit (OCU)
To add an OCU:
From the left pane of the Content Designer, select Component.
From the Component dropdown, select Order Confirmation.
From OCU Settings, define the following:
Setting
Description
X and Y
Type the preferred X and Y coordinates for the component.
The default value for both coordinates is 0 (zero).
W and H
Type the preferred width and height of the component.
For full screen, set the width and height to 1920 and 1080, respectively.
Show Thank You Page
Select option to display "Thank You" page.
Inactivity Time (s)
Type the preferred length of inactivity (in seconds) before the OCU times out.
The default value is 50.
From the menu pane on the left, select Layers to view the OCU component details.
The OCU component includes the following pages:
Page
Description
Ordering Page
Includes the following sections:
Item List - Displays order item details.
Summary Area - Displays order subtotal, tax, discounts and/or tips.
Thank You Page
Displays "Thank You" message and order total after guest pays for their order.
Ordering Page
To configure the Ordering Page of the OCU component:
From the Layers pane, select Ordering Page.
From Ordering Page on the right, select Show Summary Area.
Item List
To configure the Item List of the Ordering Page:
From the Layers pane, expand Ordering Page, and then select Item List.
From Item List on the right, define the following:
Setting
Description
X and Y
Type the preferred X and Y coordinates for the component.
The default value for both coordinates is 0 (zero).
W and H
Type the preferred width and height of the component.
For this example, set the width and height to 960 and 790, respectively.
Modifier Display
Select the preferred option:
List - List item modifiers vertically.
Comma Separated - List item modifiers horizontally, separated by a comma.
Item Spacing (px)
Type the preferred amount of blank space (in pixels) between each listed order item.
The default value is 10.
Indent Size (px)
Type the preferred amount of blank space (in pixels) to indent each listed order item.
The default value is 50.
Show Single Item Quantities
If selected, "1" appears next to order items with a quantity of one (1).
If this option is NOT selected, the quantity is not displayed when the order item quantity is one (1).
From the Layers pane, expand Item List to access the following elements:
Parent Item
Parent Item Modifier
Child Item
Child Item Modifier
From the right pane, define formatting settings for each Item List element including the Quantity, Name, and Price.
In the following example, the Parent Item聽鈫捖燩rice element is selected:
Element
Settings
Text
Define the following settings for each element:
Font - Select the preferred text font.
Style - Select a text style.
Size - Type the preferred font size.
Color - Select a font color. The HEX# for the selected color is displayed.
Price
Define the following settings for each Price element:
Decimal Places - Number of decimal places to display in the price.
Show Currency Symbol - Display currency symbol with price.
Show Decimal Point - Display decimal point and display decimal values in the same font size as the integer value.
If this option is NOT selected, the decimal point is NOT displayed. The decimal values are displayed in smaller font to distinguish them from whole integer.
Show Integer When Zero - Display leading zero (0) in whole integer when zero (e.g. 0.99).
Show Decimal When Zero - Always display the decimal value even when the decimal value is zero (0) (e.g. $1.00).
Summary Area
To configure the Summary Area of the Ordering Page:
From the Layers pane, expand Ordering Page, and then select Summary Area.
Nota
Summary Area is only available when Show Summary Area is selected for the Ordering Page.
From Summary Area on the right, define the following:
Field
Description
X and Y
Type the desired X and Y coordinates for the component.
For this example, set the X and Y coordinates to 0 and 686, respectively.
W and H
Type the desired width and height of the component.
For this example, set the width and height to 960 and 394, respectively.
Show Balance Summary
Select option to display the Order Summary and Balance Summary in the Summary Area.
Order Summary
To configure the Order Summary of the Summary Area:
From within Summary Area on the Layers pane, select the Order Summary element.
From Order Summary on the right, define the following:
Element
Description
Text
From the Text section, select formatting options:
Font - Select the preferred text font.
Style - Select a text style.
Size - Type the preferred font size.
Color - Select a font color. The HEX# for the selected color is displayed.
Summary Options
Select the preferred information to dispay in the Summary Area:
Show Sub Total - Display order sub total.
Show Tax - Display order tax.
Show Tips - Display guest tips.
Show Discounts - Display applied discount details.
From the Layers pane, expand Order Summary to access the following elements:
Subtotal
Tax
Tips
Discounts
Total
From the right pane, define formatting settings for each Order Summary element, including the Label and Value.
In the following example, the Subtotal 鈫� Value element is selected:
Setting
Description
Text
From the Text section, select formatting options:
Font - Select the preferred text font.
Style - Select a text style.
Size - Type the preferred font size.
Color - Select a font color. The HEX# for the selected color is displayed.
Value
For Value elements, define the following:
Decimal Places - Number of decimal places to display in the price.
Show Currency Symbol - Display currency symbol with price.
Show Decimal Point - Display decimal point and display decimal values in the same font size as the integer value.
If this option is NOT selected, the decimal point is NOT displayed. The decimal values are displayed in smaller font to distinguish them from whole integer.
Show Integer When Zero - Display leading zero (0) in whole integer when zero (e.g. 0.99).
Show Decimal When Zero - Always display the decimal value even when the decimal value is zero (0) (e.g. $1.00).
Balance Summary
To configure the Balance Summary of the Summary Area:
From within Summary Area on the Layers pane, select the Balance Summary element.
Nota
This element is only available when Show Balance Summary is selected for the Summary Area.
From Balance Summary on the right, define the following:
Field
Description
Text
From the Text section, select formatting options:
Font - Select the preferred text font.
Style - Select a text style.
Size - Type the preferred font size.
Color - Select a font color. The HEX# for the selected color is displayed.
Show Payments
Select option to display a Payments section in the Balance Area.
The Payments section lists payment types applied to the order.
From the Layers pane, expand Balance Summary to access the following elements:
Payments
Amount Due
From the right pane, define formatting settings for each Balance Summary element, including the Label and Value.
In the following example, the Payments 鈫� Value element is selected:
Field
Description
Text
From the Text section, select formatting options:
Font - Select the preferred text font.
Style - Select a text style.
Size - Type the preferred font size.
Color - Select a font color. The HEX# for the selected color is displayed.
Value
Define the following settings for each Value element:
Decimal Places - Number of decimal places to display in the price.
Show Currency Symbol - Display currency symbol with price.
Show Decimal Point - Display decimal point and display decimal values in the same font size as the integer value.
If this option is NOT selected, the decimal point is NOT displayed. The decimal values are displayed in smaller font to distinguish them from whole integer.
Show Integer When Zero - Display leading zero (0) in whole integer when zero (e.g. 0.99).
Show Decimal When Zero - Always display the decimal value even when the decimal value is zero (0) (e.g. $1.00).
Add Background Image
To add a background image to the Ordering Page of the OCU:
From the Layers pane, select Ordering Page.
From the聽left pane聽of the Content Designer, select Media.
From the file browser, select and add the image file.
The image is added to the design workspace and to the Layers pane on the left.
From Media Settings on the right, define the following:
Field
Description
Name
In the provided field, type a name for the image.
Select the lock icon to make the component properties non-editable.
Toggle the eye icon to hide/show the component.
X and Y
Type the desired X and Y coordinates for the component.
When the position of the component is manually adjusted, 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.
Scale Proportionally
Enable this option to automatically update the X, Y, W, and H values proportionally when one value is changed.
Right-click the background image from the Layers pane, and select Send to Back.
Add Media Carousel
A media carousel displays a collection of media files consecutively on an infinite loop where each file is displayed for a specified duration. A carousel can include any combination of images, videos, and/or price components.
To add a media carousel to the Ordering page of the OCU:
From the Layers pane, select Ordering Page.
From the left pane of the Content Designer, select Component.
From the Component menu, select Media Carousel.
From the file browser, select the media files to add to the carousel.
Sugerencia
Hold down Crtl on the keyboard to select multiple files from the same folder.
From Carousel Settings on the right, define the following:
Field
Description
Name
Type a name for the carousel. The default name is "Carousel".
Select the lock icon to make the component properties non-editable.
Toggle the eye icon to hide/show the component.
Transitions
From the dropdown, select the desired effect to use when transitioning from one component to another.
From the lower-right of the Carousel Settings, sort the media files and specify the amount of time to display each file:
Select and drag the control to the left of each file to sort them in the preferred sequence.
In the Duration(s) field, type the number of seconds to display the file before transitioning to the next file.
Select Auto to play the video at its original length. This option is only available for video files.
The Loop field specifies the number of seconds it takes to cycle through one loop of the carousel.
From the Layers pane, select each media file in the carousel and configure its respective settings.
Thank You Page
To configure the Thank You Page:
From the Layers pane on the left, select Thank You Page.
From Thank You Page on the right, define the following:
Field
Description
Duration (s)
Number of seconds to display Thank You page on OCU.
Text
From the Text section, select formatting options:
Font - Select the preferred text font.
Style - Select a text style.
Size - Type the preferred font size.
Color - Select a font color. The HEX# for the selected color is displayed.
Thank You Text
To configure the Thank You Text of the Thank You Page:
From the Layers pane, expand Thank You Page, and then select Thank You Text.
From Thank You Text on the right, define the following:
Field
Description
Thank You Text
Type a label for the Thank You Text.
X and Y
Type the preferred X and Y coordinates for the component.
W and H
Type the preferred width and height of the component.
Text
From the Text section, select formatting options:
Font - Select the preferred text font.
Style - Select a text style.
Size - Type the preferred font size.
Color - Select a font color. The HEX# for the selected color is displayed.
Justification - From the right of the color field, select a justification option.
Auto-Width - Automatically set the width of the component to fit the screen.
Auto-Height - Automatically set the height of the component to fit the screen.
Total Label
To configure the Total Label of the Thank You Page:
From the Layers pane on the left, select Total Label.
From Total Label on the right, define the following:
Field
Description
Total Label
Type a label for the Total Label.
X and Y
Type the preferred X and Y coordinates for the component.
W and H
Type the preferred width and height of the component.
Text
From the Text section, select formatting options:
Font - Select the preferred text font.
Style - Select a text style.
Size - Type the preferred font size.
Color - Select a font color. The HEX# for the selected color is displayed.
Justification - From the right of the color field, select a justification option.
Auto-Width - Automatically set the width of the component to fit the screen.
Auto-Height - Automatically set the height of the component to fit the screen.
Order Total
To configure the Order Total of the Thank You Page:
From the Layers pane on the left, select Order Total.
From Order Total on the right, define the following:
Field
Description
Order Total
Type a label for the Order Total.
X and Y
Type the preferred X and Y coordinates for the component.
Text
From the Text section on the right pane, select formatting options:
Font - Select the preferred text font.
Style - Select a text style.
Size - Type the preferred font size.
Color - 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:
Decimal Places - Number of decimal places to display in the price.
Show Currency Symbol - Display currency symbol with price.
Show Decimal Point - Display decimal point and display decimal values in the same font size as the integer value.
If this option is NOT selected, the decimal point is NOT displayed. The decimal values are displayed in smaller font to distinguish them from whole integer.
Show Integer When Zero - Display leading zero (0) in whole integer when zero (e.g. 0.99).
Show Decimal When Zero - Always display the decimal value even when the decimal value is zero (0) (e.g. $1.00).
Add Background Image
To add a background image to the Thank You Page of the OCU:
From the Layers pane, select Thank You Page.
From the聽left pane聽of the Content Designer, select Media.
From the file browser, select and add the image file.
The image is added to the design workspace and to the Layers pane on the left.
From Image Settings on the right, define the following:
Field
Description
Name
In the provided field, type a name for the image.
Select the lock icon to make the component properties non-editable.
Toggle the eye icon to hide/show the component.
X and Y
Type the desired X and Y coordinates for the component.
When the position of the component is manually adjusted, 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.
Scale Proportionally
Enable this option to automatically update the X, Y, W, and H values proportionally when one value is changed.
Right-click the background image from the Layers pane, and select Send to Back.
Add Welcome Image
To add a Welcome image to the OCU:
From the Layers pane, select Order Confirmation.
From the聽left pane聽of the Content Designer, select Media.
From the file browser, select and add the image file.
The image is added to the design workspace and to the Layers pane on the left.
From Media Settings on the right, define the following:
Field
Description
Name
In the provided field, type a name for the image.
Select the lock icon to make the component properties non-editable.
Toggle the eye icon to hide/show the component.
X and Y
Type the desired X and Y coordinates for the component.
When the position of the component is manually adjusted, 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.
Scale Proportionally
Enable this option to automatically update the X, Y, W, and H values proportionally when one value is changed.
Right-click the Welcome image from the Layers pane, and select Send to Back.
Preview Content Design
To preview the content design:
From the upper-right of the Content Designer, select Preview Content Design to see a preview in a separate browser window.
From Views in the upper-left, select a view of the content design to preview.