Kiosk Base 🧪
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;
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
modeSet 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();
}
}
});
});
Last updated
Was this helpful?