# Kiosk Mode Usage Notes Typically a kiosk-enabled sites pages are structured as follows; * Web-only pages are in their normal site design arrangement * Kiosk-only pages are separated, e.g. in a subdirectory like `/kiosk` * Hybrid pages can be anywhere * 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. ```html ``` ### Configuration Settings

Setting	Description	Default
`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 {% hint style="warning" %} At some point, it's likely we'll re-design this to an attributes-based solution, avoiding classes. {% endhint %} 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 `kiosk` class is added to the `` element. * All elements with a class of `kiosk-show` are displayed * All elements with a class of `kiosk-hide` are hidden ## Configuring Webflow Pages To keep these kiosk-specific sections easily identifiable in the designer, we recommend this approach; * Name your Kiosk classes `--kiosk-hide` and `--kiosk-show` * Set both of these to display: none in styles. These will be made visible by the script depending on the mode determined. {% hint style="info" %} In Webflow's generated CSS these will be `.kiosk-hide` and `.kiosk-show` {% endhint %} * 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; ```html ``` ## Testing In some cases you need to be able to test kiosk mode while on a desktop computer * Set persistent “true” cookie (1 year): * document.cookie = "sa5\_kiosk=true; max-age=31536000; path=/"; * Set session cookie (clears on tab/browser close): * document.cookie = "sa5\_kiosk=true; path=/"; * Verify: * document.cookie or document.cookie.includes("sa5\_kiosk=true") * Clear: * document.cookie = "sa5\_kiosk=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; * Optional domain (if you need subdomain-wide): * document.cookie = "sa5\_kiosk=true; max-age=31536000; path=/; domain=.yourdomain.com"; Alternate: Just visit with ?kiosk=true to set it automatically; ?kiosk=false sets false; ?kiosk=clear deletes it