The theme within Interact can be configured with custom images, colors and button labels. Below are the most common configuration changes.
Note:
- All images and videos must be maintained and hosted by the venue.
- Some corporate firewalls may limit access to the websites needed to host the files.
- Button colors fall into different categories that are grouped together for customization. There are notes which buckets they fall into throughout this article and the end details the groupings.
- Each grouping can only have 1 color set to them.
Attract Screen
This will be the main screen that is displayed when the guest comes up to order on the kiosk. This may be an image or a video. Background Video will have first priority over photos.
Customizable options
- Background image no larger than 1080x1920 / Format .png or .jpg. Aspect Ratio 16:9, Size no larger than 2MB
- Background Video: Format .mp4, length no longer than 10 seconds (Video will restart upon completion), No larger than 10 MB
- Logo image on the attract screen: no larger than 1080x1920 / Format .png or .jpg. Aspect Ratio 1:1, Size no larger than 1MB
- Order Button: Text for “Touch to Order”
- Hex Color for Button (Falls into Primary)
- Order Button: can be hidden and then the guest may select anywhere on the screen to proceed
Phone Login Screen
This will be the next screen that appears for the guest to enter their phone number. This is optional. The SMS texts driven by the KDS will be triggered by this phone number screen.
Customizable options
- Phone Login Screen: Can be hidden
- Phone Login Background Image: image no larger than 1080x1920.
- Phone Login Title: can customize the text - above says Hello
- Phone Login Description: can customize the verbiage that appears below the title
- Phone Number Pad: can customize the numbers on the number pad through tertiary button settings
Category Screen
This screen appears once you leave the attract screen/phone screen. This screen will bring the guest to begin adding items to the cart once selecting specific categories. In 1.5 and above, there is no longer the “Type” available (Food/Drink). This will default to show the 1st Category Group and then will show the 2nd Category Group.
Note: If any items have a secondary category group, then all items MUST have one as well or they will not show.
Customizable options:
- Navigation / Menu Backgrounds: Hex colors (found in blue above) for the header and footer of the page.
- Start Over/Cancel Button Text / Color (Secondary)
- Place Order Button Text / Color (Primary)
- On the top of the screen, there may be a customized logo image that will appear in the middle of the header. This image has to be transparent. This should be no larger than 240px in height.
- Categories are configured at the item level in Connect and not on the JSON
- Upsell items are available and configured in Connect. Upsell item text is customizable (example: Goes well with)
Once selecting place order, if there is any loaded value/loyalty available, there will be a popup to take them to this payment type. This is customizable:
- Loyalty Dialog Popup: this pop up asking if you would like to use your loyalty/loaded value can be turned on/off.
- Buttons text saying Yes/No can be customized
- Loyalty Dialog Text: This can be customized. Ex. “Would you like to apply loaded value to this payment?”
Payment Screen
This will show all payments that are enabled such as Credit/Stored Value/Loyalty Programs
Customizable Options
- The background image is customizable with an image no larger than 1080x1920.
Signature Page
This is a screen that will appear only if Tip and Signature are enabled.
Customizable Options
- Signature Title Text: Example “Would you like to leave a tip?”
- Signature Agreement Text: Example: I agree to pay the total amount according to my card issuer agreement
Thank You Screen
This is the confirmation screen to show the guest that the order is completed.
Customizable Options
- This image is customizable with an image no larger than 1080x1920.
- Print/Email/SMS Receipt Button colors can be customized
- Print/Email (Secondary)
- SMS Receipt (Primary)
- Ability to remove these options are available in the JSON in 1.5.2 and above
- Receipt Title Text: Can customize the “Your Order is Confirmed” text.
- Receipt Message Text: Can customize the “Your order will be ready shortly” text.
Button Colors
They are customizable but fall into grouped categories - All Primary would be the same and all Secondary would be the same.
Primary:
- attract_signin (button)
- Cart_place_order
- Item_decrease
- Item_increase
- Add_to_cart_button
- Alcohol_add_to_cart
- Vendor_button
- Order_button
- Pay_button
- Receipt_sms
- Add_loyalty_card_button
Secondary:
- Cart_start_over
- Receipt_email
- Receipt_print
- Receipt_startover
- Alcohol_cancel
Tertiary:
- Phone Number Login
Colors that can be configured for Primary/Secondary/Tertiary Buttons are:
- Background Color - The view of the button color when the button is in normal state
- Selected Color - The view of the button color when the button is pressed
- Disabled Color - The view of the button color when it is disabled, or not able to be pressed to move on
- The Color of the Text - The view of the button color when it is normal
- Color once text is Selected -The color of the text when the button is pressed
- Stroke Color (tertiary only) - The color of the stroke around the number on the phone number pad
Other Customizable Options in JSON
- Default Idle Timeout: This can be set by seconds to control the idle pop up message to start over
- Receipt Idle Timeout: This can be set by seconds to control the time the confirmation/receipt screen stays up before returning to the attract screen.
Useful Links
- Image Download: https://imgur.com/
- JSON Editor: https://interact-json-generator.web.app/
Example JSON Files
Note: The Classic Theme JSON fields that have "insert custom URL" need to be updated with a URL to apply properly. To utilize the default images, remove the section before adding to Connect.