Kiosk Base 🧪

EXPERIMENTAL Not yet available for public use

SA5 Kiosk enables a standard Webflow-hosted site to deliver some or all of its content through a kiosk.

Showcase products and services, collect customer feedback and orders all through your same Webflow-hosted site, while the customer is physically in-store at your retail shop or clinic.

The primary advantages of this approach is;

• Low cost. The kiosk setup uses a browser - Chrome is best for our setup, and requires only a cheap PC and touchscreen.

• Branding consistency with your website.

• Centralized CMS data and ECom products

Overview

Base functionality;

• Kiosk detection

• Conditional visibility

  • Show kiosk-only elements only when in kiosk mode

  • Show browser-only elements only when in browser mode

Kiosk Detection & Kiosk Modes

SA5 Kiosk is designed to work in 3 possible modes;

Mode	Description	Notes
Browser mode	Default, normal-website mode.	Website operates as normal Any kiosk-only elements are hidden
Kiosk mode	Kiosk-specific mode	Triggered by the user-agent string
Display mode ( currently RFC )	Hands-free display mode	Triggered by either; The user-agent string Kiosk mode inactivity timer

Conditional Visibility

Elements

• Kiosk detection

• Conditional visibility

  • Show kiosk-only elements only when in kiosk mode

  • Show browser-only elements only when in browser mode

• Use Chrome in --kiosk mode

• Set a user agent to identify it to scripts

• Support conditional visibility based on that state

Advanced Discussions

Although it's generally not necessary, it's possible to implement conditional visibility at a reverse proxy level to ensure the best SEO.

document.addEventListener("DOMContentLoaded", () => {
    // Function to check for kiosk mode
    function isKioskMode() {
        return /kiosk/i.test(navigator.userAgent); // Case-insensitive check for "kiosk" in the user agent string
    }

    // Log kiosk mode and the result of the isKioskMode function
    const kioskMode = isKioskMode();
    console.log("Kiosk Mode:", kioskMode);

    // Handle elements with kiosk-mode attributes based on the kioskMode flag
    if (kioskMode) {
        // Remove the "kiosk-mode=show" attribute if in kiosk mode
        const showElements = document.querySelectorAll('.kiosk-show');
        showElements.forEach(element => {
            element.classList.remove("kiosk-show");
        });
    } else {
        // Remove the "kiosk-mode=hide" attribute if not in kiosk mode
        const hideElements = document.querySelectorAll('.kiosk-hide');
        hideElements.forEach(element => {
            element.classList.remove("kiosk-hide");
        });
    }

    // Select all <data> elements with action="add-query"
    const dataElements = document.querySelectorAll('data[action="add-query"]');

    dataElements.forEach(dataElement => {
        // Extract the param and value attributes
        const param = dataElement.getAttribute("param");
        const value = dataElement.getAttribute("value");

        if (param && value) {
            // Find the nearest parent link element containing the <data> element
            let parentLink = dataElement.closest("a");

            if (parentLink) {
                // Parse the existing URL
                const url = new URL(parentLink.href);

                // Add the new query parameter
                url.searchParams.set(param, value);

                // Update the link's href
                parentLink.href = url.toString();
            }
        }
    });
});