SiteKiosk Online API

With the SiteKiosk Online API, you can interact with SiteKiosk machines and extend their functionality.
To learn where scripts can be implemented into SKO please refer to the SKO help found here:
EN - SKO Help
DE - SKO Hilfe

Hello World example

To get started with scripting in SKO, we recommend setting up your project with proper debugging.
First, go to the advanced section in your project settings.
Then, add the setting debug.showAdvancedOptionsInDebugWindow (Windows) or debug.webDebugging (Android).
You can now test your debugging by opening the debug console under "DevTools" -> "Toggle DevTools" on Content Section 0 on your Windows device or the appropriate window for ADB connected to your Android device.
Here are some simple Hello World examples to test your environment.

console.log("Start...");

// This will display the time after which a user will be considered idle
console.log(siteKiosk.activityTracker.getIdleTimeout());

// Show the OS SiteKiosk is running on
console.log(siteKiosk.env.os);

Navigation

We recommend using tags for navigation.
To set tags, first activate expert mode in your project by extending your project URL with &expert and reloading the page.
You can now set tags to elements and pages by clicking on them and entering a tag in the top bar next to the width and height settings.

// You can now easily navigate to a page or element by calling the navigateToElementByTag function
siteKiosk.content.navigation.navigateToElementByTag("Page 2");

Content Elements

By using tags, we can get the element in a similar way to navigation and then change the element properties.

// You can modify the properties of elements by getting the element with getElementByTag and modifying it with setPropertyValue
siteKiosk.content.getElementByTag("textElement").setPropertyValue("text", "Test");

// You can modify the visibility of elements with the show and hide functions
siteKiosk.content.getElementByTag("textElement").show(true);
siteKiosk.content.getElementByTag("textElement").hide(true);

// Use getElementsByTag to get all elements with the tag
const buttons = siteKiosk.content.getElementsByTag("Button");
buttons.forEach((element) => {
    const domElement = element.getDomElement();
    element.onBeforeAction((e) => {
        console.log(e, "Clicked");
    });
});

Variables

Variables are useful for many use cases like conditional content, tracking state, or display conditions.

// Use variables if you want to track states project-wide.
siteKiosk.content.runtime.getVariableValue("foo");

siteKiosk.content.runtime.setVariableValue("foo", "Hello World");

Logging

Use logging to create your own log messages for the machine log.
You can test this by enabling debug.showDebugWindow, your logs should show up here.
Alternatively you can view the log in Monitoring -> Select the machine -> Logs in your SKO Team.

// Use different log levels and facilities to customize your logging
siteKiosk.log.debug("MyFacility", "My important log message");

siteKiosk.log.info("MyFacility", "My not so important log message");

siteKiosk.log.error("MyFacility", "Error Message");

Events

Events can be used to react to changes in your project and can be found in multiple places in the SKO API.
Here are some examples:

// Triggers when the content is inserted in the DOM
siteKiosk.content.onContentInserted(() => {
    console.log("Content successfully inserted!");
});

// Triggers whenever the value of the variable changes
siteKiosk.content.runtime.onVariableValueChanged("foo", (foo) => {
    console.log("Variable foo changed!", foo);
});

// Triggers when a user session starts or ends and logs only the session start
siteKiosk.activityTracker.onActiveChanged((isActive) => {
    if (isActive) {
        console.log("active");
    }
});

// Use the eventhub to register and trigger events manually.
// You can use this to connect scripts that run inside SKO content with scripts that run outside of the content scope.

// To connect external events register your event in the content script (e.g. Project Settings -> Expert -> Scripts)
siteKiosk.eventHub.on("ChangeVar", (data) => siteKiosk.content.runtime.setVariableValue("MyVar", data));

// And trigger the event from the script in the external part that has SKO API access (e.g. custom buttons, website with SKO API access)
siteKiosk.eventHub.trigger("ChangeVar", "myData");

Access the API from an external website

If you are using the Webpage element within your SiteKiosk Online project, you can also use the API within this website (JavaScript).

To be able to access the API through your website, you need to give access to it in the project's settings first: Settings --> Browser --> URLs with SiteKiosk API Permission

On Android devices you need to initiate the API within your website, this is not needed for Windows devices:

if (typeof _siteKiosk !== "undefined")
{
    new Function(_siteKiosk.getUnifiedObjectModelCode())()
}

Now you can make use of the API like within the "Script" part of SiteKiosk Online.

Generated using TypeDoc