# Kiosk Base 🧪

{% hint style="info" %}
**EXPERIMENTAL** \
Not yet available for public use 
{% endhint %}

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. | <ul><li>Website operates as normal</li><li>Any kiosk-only elements are hidden </li></ul>                |
| Kiosk mode                                | Kiosk-specific mode           | Triggered by the user-agent string                                                                      |
| <p>Display mode<br>( currently RFC ) </p> | Hands-free display mode       | <p>Triggered by either;</p><ul><li>The user-agent string </li><li>Kiosk mode inactivity timer</li></ul> |

<img src="/files/905WyYEl3L6DSyMjXshs" alt="" class="gitbook-drawing">

## Conditional Visibility&#x20;

Elements

* Kiosk detection&#x20;

* Conditional visibility
  * Show kiosk-only elements only when in kiosk mode&#x20;
  * Show browser-only elements only when in browser mode&#x20;

* Use Chrome in `--kiosk` mode

* Set a user agent to identify it to scripts&#x20;

* Support conditional visibility based on that state &#x20;

## 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.&#x20;

```
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();
            }
        }
    });
});

```


---

# 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-base.md?ask=<question>
```

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.