# 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 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://attr.sygnal.com/sa5-kiosk/kiosk-mode-usage-notes.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.