User interface
Colours
Use the colour settings to customise the look and feel of the kiosk interface. You can adjust the primary and secondary colours, text colour, and define the background and text colours for unavailable products.
Choose colours with the built-in colour picker (1) or apply your styling using a custom CSS configuration (2).
Primary colour
Default: white
The primary colour defines the general accent used across the kiosk interface.
Secondary colour
Default: orange
The secondary colour applies to the following elements:
Basket icon - the circle colour
Stepper - marking the current step when ordering an article with options
Text colour
Default: dark blue
The text colour applies to the following elements:
Basket icon
Stepper - marks the completed step
Background colour
Default: grey
Customise the background colour of the kiosk screens.
Language button colour
Customise the colour of the language buttons and the background of the scan membership message.
Language button text colours
Customise the colour of the language button text, the scan membership message text, and the animated arrow.
Basket item colour
Customise the colour of the basket item tiles.
Disabled button colour
Customise the colour of buttons when they are in a disabled state, for example:
Next and Add to basket: remain disabled until a required selection is made.
View order: remains disabled when the basket is empty.
Disabled item colour
Sets the colour of the product tile when the product is not available.
Disabled item text colour
Sets the text colour on the product tile of an unavailable product, including the product name and description.
Custom CSS
Use a custom CSS file to define the kiosk’s colour styling instead of selecting each colour individually. You can include only the colours you want to override. The rest of the colours will follow the default settings.
Functional
This section includes general display and behaviour settings that control how information is displayed and how users interact with the kiosk interface.
Show toasts
You can choose to display toast messages for specific user actions, such as adding (1) or removing (2) products from the basket. These messages appear in the top-right corner of the kiosk screen.
Show option prices in the basket
Disabled: The basket shows only the total article price, without listing the prices of selected options. (1)
Enabled: The basket displays the individual prices of options (such as drink size or sauce) in addition to the total price. (2)
Show the menu icon when options are available
If a main product has options, you can choose to display a menu icon on the main product tile (1). The menu icon's colour (2) follows the secondary colour setting (F&B Manager > User interface > Colours tab).
Show the touch-to-start button on home screen
Show (2) or hide (1) the touch-to-start button on the kiosk home screen.
Show logo on home screen
When enabled, the logo will also appear in the top-left corner of the home screen. Disabling this setting removes the logo from the home screen but will keep it displayed on other kiosk screens.
See also how to upload a logo image.
Show old price when discount is present
When a discount is available for an article (based on a price group discount configured in Recreatex backoffice), you can choose how the pricing is displayed after a customer scans their membership :
Product selection screen
Basket
Disabled (1): Only the discounted price is shown.
Enabled (2): Both prices are displayed, with the original price shown in a smaller font, a different colour, and struck through.
Note
Due to limited space, the basket displays both the original and discounted prices only for the main articles, while options show only the discounted price.
Hide price when price is 0
If you offer a free product or option, you can choose to hide the price instead of displaying it as €0.00. This setting applies to product tiles of products (1) and options (2) in selection screens and to the basket overview (3).
Setting disabled
Setting enabled
Shown languages
Add the relevant languages to the start screen using the following format: ["EN", "DE", "NL", "FR"]. The language buttons (1) will appear at the bottom of the start page, and the language drop-down (2) in the header will show the same languages.
Important
At least one language must be defined for the kiosk application to function properly.
The kiosk application currently supports the following languages: English (EN), Dutch (NL), French (FR) and German (DE)
To set the default language for the kiosk user interface, go to the tab General.
See also the settings Language button colour and Language button text colours to customise the button and text colours.
Center category slider
This setting controls the initial position of the category list on the product overview screen of the F&B Kiosk.
Enabled: The F&B Kiosk automatically scrolls to the middle category when the product overview screen loads.
Disabled (default): The category list is focused on the first category when the product overview screen loads.
Use marquee for long titles
Use this setting to improve the readability of article names that exceed the two-line display limit on article cards.
Enabled: Article names longer than two lines will automatically scroll using a marquee animation, with speed calculated based on the number of characters.
Disabled (default): Article names remain static and are truncated after two lines, with an ellipsis (...) added to indicate longer text. The full name of the article is still visible when viewing the order detail in the basket.
Images
Logo
Upload a logo to be displayed at the top of the kiosk screens, remaining visible throughout the ordering process.
Max size: 3mb / Ratio: 272x120
To display the logo on the home screen as well, activate the setting Show logo on home screen
Closed image
Upload a custom image (1) to be displayed when the kiosk is closed. If no image is uploaded, the kiosk will show the default option: the image uploaded as Home image 1, with a closed icon overlaid (2).
Max size: 3Mb / Ratio: 9:16 (1080x1920)
Home image (1 to 5)
Max size: 3Mb / Ratio: 9:16 (1080x1920)/ supports GIF format
You can add up to five images as the background of the kiosk start screen. These images rotate in a carousel pattern at the preset interval defined by the Home image timer setting.
If fewer than five images are added, the carousel will rotate through only the provided images, ignoring any empty fields.
If only one image is added, it will be displayed without a carousel pattern.
Home image timer
Set the interval in seconds to determine how quickly images rotate on the kiosk start page.