Usage Notes
Add the kiosk library, as in quick start
Add the configuration block
Configure elements on the page to show or hide when in Kiosk Mode
Csutomize your kiosk setup
Goals
When in desktop mode;
Hide all kiosk-specific elements
When in kiosk mode;
Hide designated elements that are not relevant to kiosk mode
Show designated elements that are kiosk-specific
Make it easy to add custom CSS that can apply only when in kiosk mode
Configuring the Kiosk
SA5's Kiosk configuration is centralized.
You can paste this into your site-wide code section immediately after the library references, and configure the paramaters the way you want.
Configuration Settings
homePath
Identifies the home page of the kiosk. This is where the kiosk will return to on inactivity reset.
/kiosk
userAgent
KioskApp/1.0
inactivityTimer
The amount of time during which there is no user activity, before the kiosk will return to its home page.
180 ( seconds )
How it Works
At some point, it's likely we'll re-design this to an attributes-based solution, avoiding classes.
When the page loads, it checks the User Agent to determine if we're in Kiosk mode. That user agent is specifically set in the Kiosk launch script, e.g. KioskApp/1.0 .
When Kiosk mode is detected, these things occur;
A
kioskclass is added to the<body>element.All elements with a class of
kiosk-showare displayedAll elements with a class of
kiosk-hideare hidden
Configuring Webflow Pages
To keep these kiosk-specific sections easily identifiable in the designer, we recommend this approach;
Name your Kiosk classes
--kiosk-hideand--kiosk-showSet both of these to display: none in styles. These will be made visible by the script depending on the mode determined.
Place these on plain DIV wrappers around the elements you want to affect
This ensures the classes are visible in the left nav
It also enables you to easily drag elements in and out of these containers
Custom CSS
You can define custom kiosk-mode-only CSS by using the body.kiosk selector;
Last updated
Was this helpful?