Buy Us a Beer!Community ForumMicro-Consulting

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. 

<script type="application/sa5+json">
{
  "@context": "https://attr.sygnal.com",
  "@type": "KioskConfig",
  "@version": "0.1",
  "homePath": "/kiosk", 
  "userAgent": "KioskApp/1.0", 
  "inactivityTimer": "180"  
}
</script>

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

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 kiosk class is added to the <body> 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.

In Webflow's generated CSS these will be .kiosk-hide and .kiosk-show

  • 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; 

<style>
body.kiosk form.lg\:col-span-5 > :nth-child(2) {
  display: none;
}
</style>

Last updated

Was this helpful?