Interactive widgets

This page is about the interactive widgets included into Elementi 2023 and later. The information below might not apply to older versions.

Introduction

Empower your visitors on-site with the right tools. The interactive widgets have been designed to facilitate creating interactive digital signage projects. For example, they help you get feedback from your audience or provide useful information like way-finding with an interactive twist.

Most of these widgets display a default content "page" (can be a media file, a Playlist, a Layout, etc.) which gets replaced by a different one whenever a button is clicked, a key is pressed, or an action trigger (Shared Variable) is activated.

Get started

Click the "Projects" tab in the Browse panel.
Create a new Elementi project or open an existing one.
The project's main index file is opened by default. If needed, open the file that should contain the widget.
Click the "Widgets" tab in the Browse panel to find all the collections of widgets included with your Elementi version/type.
Elementi 2025 X widgets
Double-click the "Interactivity" collection and find the widgets delivered with Elementi.
Interactive widgets
Select the widget that best fits how you want to present the data.
Drag that widget from the Browse panel and drop it into the Edit panel (or the Preview panel) to create a new media layer within the opened document. The built-in widget is automatically copied into your project files.
Double-click the widget's layer in the Edit panel to find its properties.
Configure the widget's properties and layout to display your data.

Included in Elementi

Elementi software comes with several interactive widgets accessible from the “Widgets” tab within the Browse panel.

Feedback (Added in Elementi 2018)
Displays three smileys to get the visitor feedback; when clicking a smiley, a vote is added to the database, and optionally, the feedback results are displayed.
Menu Horizontal (Added in Elementi 2018)
Displays a horizontal toolbar at the top or bottom of a default content; when clicking a menu item, the mapped content page is shown instead of the default content.
Menu Vertical (Added in Elementi 2018)
Displays a vertical toolbar on the left or right side of a default content; when clicking a menu item, the mapped content page is shown instead of the default content.
Click to Switch
Displays buttons and a default content; when clicking a button, the mapped content page is shown instead of the default content.
Click Through
Displays only buttons as default content; when clicking a button, the mapped content page is shown instead.
Click to Action
Displays only buttons as default content; when clicking a button, the associated action trigger is set to the mapped value. It works best with the "Action to Switch" widget and can be used to create interactive content across multiple devices.
Click to Script (only included in Elementi X)
Displays buttons as default content; when clicking a button, the associated JavaScript code is executed.
Virtual Keyboard
Displays an interactive virtual keyboard that generates key press events; works best with the "Key to Switch" widget on touchscreens where there is no keyboard connected to the player.
Pop-up Virtual Keyboard
Displays an interactive virtual keyboard over web content whenever an input field in the web page receives focus, allowing the entry of text in that field when there's no keyboard available. This widget is dependent on the Virtual Keyboard one, which must be present in the project.
Key to Switch
Displays a default content and listens to key press events; when a predefined key is pressed, the mapped content page is shown instead of the default content.
Key to Action
Listens to key press events; when a predefined key is pressed, the associated action trigger is set to the mapped value. It works best with the "Action to Switch" widget and can be used to create interactive content across multiple devices.
Key to Script (only included in Elementi X)
Listens to key press events; when a predefined key is pressed, the associated JavaScript code is executed.
Action to Switch
Displays a default content and interactively loads predefined content "pages" whenever the associated action trigger is updated.
Media Playback
Displays a media (image or video) which can be paused or played by setting the associated action trigger to "PAUSE" or "PLAY".

Feedback

Added in Elementi 2018.

This interactive widget displays three smileys to get the visitor's feedback; when clicking a smiley, a vote is added to the database, and optionally, the feedback results are displayed.

Widget properties:

Locale
Select the locale used for displaying the voting percentages.
Header
Enter the text displayed while waiting for a vote.
Feedback
- Text
  Enter the text displayed after a vote.
- Duration
  Enter the display duration of the feedback text and results (if enabled).
- Show results
  Enable/disable showing the feedback results.
- Filter
  Select the filter applied on the vote set between "None", "Current month", "Today" (default), and "Last hour".
Storage
- Key
  Enter a key name ("demo" by default) under which the feedback votes are stored. Use different key names to separate the results of different polls.
- Limit
  Enter the maximum number of votes to be taken into consideration. Tip: Set this to 1 to remove the existing votes.

The feedback data is stored under a Shared Variable named jSignage:UI:feedbackResults:, followed by the name entered in the widget (by default "demo") as an array of objects, each containing a timestamp and a numeric value (where 0 = sad, 1=normal, 2=happy). The raw data can be retrieved through the Web Storage REST API for further processing.

Menu Horizontal

Added in Elementi 2018.

This interactive widget displays a horizontal toolbar at the top or bottom of a default content; when clicking a menu item, the mapped content page is shown instead of the default content.

Widget properties:

Transition
Click on the button (it opens the "Transition Properties" dialog) and select a transition effect and its properties.
Menu
- Position
  Select the menu position between "Top" and "Bottom" (default).
- Size
  Select the menu size between "Large" (default) and "Small".
- Number of columns
  Enter the number of columns to display on the screen. If the number of predefined pages is larger, then the menu becomes scrollable.
- Spacing
  Enter the percentage of the menu height to be added as space margin around the menu items. Default: '0%'. Tip: Enter a positive value to create tabs!
Finger touch
- Show
  Enable/disable showing a moving finger touch icon.
- Delay
  Enter the delay after which to show the finger touch icon. The counter is reset after each mouse-down event.
- Animate
  Enable/disable the finger touch icon animation.

Menu Vertical

Added in Elementi 2018.

This interactive widget displays a vertical toolbar on the left or right side of the default content; when clicking a menu item, the mapped content page is shown instead of the default content.

Widget properties:

Locale
Select the locale used for displaying the page numbers.
Transition
Click on the button (it opens the "Transition Properties" dialog) and select a transition effect and its properties.
Menu
- Position
  Select the menu position between "Left Top", "Left Center" (default), "Left Bottom", "Right Top", "Right Center", and "Right Bottom".
- Size
  Select the menu size between "Large" (default) and "Small".
- Number of rows
  Enter the number of rows to display on the screen. If the number of predefined pages is larger, then the menu becomes scrollable.
- Spacing
  Enter the percentage of the menu height to be added as space margin around the menu items. Default: '8%'.
- Show page number
  Enable/disable showing the page number next to the menu label.
- Auto-hide labels
  Enable/disable whether the menu labels are automatically hidden.
- Delay
  Enter the delay after which to hide the menu labels.
Finger touch
- Show
  Enable/disable showing a moving finger touch icon.
- Delay
  Enter the delay after which to show the finger touch icon. The counter is reset after each mouse-down event.
- Animate
  Enable/disable the finger touch icon animation.

Click to Switch

This widget displays default content and navigation buttons. Whenever a button is clicked, the content assigned to it will be displayed instead of the default content. To return to the default content, each inner page must end after a certain time; a fixed duration may need to be set for this purpose. The "Exit" button ends the widget itself. This widget works best with a touchscreen.

Note:

See how to create an interactive travel project using "Click to Switch" widget.

Widget properties:

Transition
Set the transition used when switching to another content "page".
Switched layer
This is a layer placeholder, useful for positioning the content area on the screen.

In older versions of Elementi, this was also used to set the default content.

Mappings:

Button
Insert the button layers used to switch the content.
Page
Insert content layers to be displayed when clicking the associated button.

Notes:

The first row is used to define the default content that should be played when the widget is opened. For simplicity, this is by default a text layer, nevertheless, it can be changed to any other type of layer (could be a text, an image, a video, a layout, a playlist, etc.). For instance, to have an image as default content, simply drag that image from the Browse panel and drop it over the "Default Page" cell.
The following rows are used to associate the buttons with the specific content to be displayed when clicking them. Both the button and the associated "page" can be changed as mentioned above. Note that if a fixed duration is set for the page, at the end of that period, the widget will switch back to the default content.
More buttons can be added by adding more layers using the toolbar icons or drag & drop.
An exit button, having "[CLOSE]" set as URI, is also included. Clicking the associated button ends the widget - this works best when the widget is included in other documents.

Click Through

This interactive widget can be used to display some navigation buttons as default content and interactively load other content "pages" whenever a button is clicked. To get back to the default content, each inner page must end after a certain time – a fixed duration might need to be set for that. This widget works best with a touchscreen.

Note:

This widget can only be used to create a one-level deep "menu" – for more levels, you can use the "Click to Switch" or "Action to Switch" widgets.

This widget is a simplified version of the "Click to Switch" widget, detailed above.

Click to Action

This widget controls the modification of a Shared Variable using buttons clicked by the user. Each time a button is clicked, the Shared Variable is set to the desired value. This widget can be used together with the Action to Switch to create interactive content across multiple devices, for instance.

Widget properties:

Shared Variable
Enter the name of the Shared Variable to update.

Click to Script

Available only in Elementi X.

This widget displays some buttons that the user can click to trigger the execution of some JavaScript code, including jSignage actions like creating or removing layers.

Widget properties:

Include file
Enter the path to a JavaScript file that implements the functions called when pressing any of the defined buttons.
Mappings
- Button ⇒ Define the trigger layer (as a text button by default, though media can be used as well)
- JavaScript code ⇒ Enter the function name or the explicit JavaScript code to execute

Virtual Keyboard

This widget displays an interactive virtual keyboard that generates key press events; thus, it can be used with a touch screen when there is no keyboard connected to the player. It could also be used along with the "Key to Switch" widget.

This widget was reworked in Elementi 2023 to follow the standard Unicode CLDR keyboard specification. Multiple keyboard layouts can be employed according to the selected locales; to switch between them, long-click on the space key. Certain keys can have multiple variants, such as letters with accents; a long click on the key reveals these.

Widget properties:

Key template
The template layer for showing regular keys.
Special key template
The template layer for showing special keys, like "Space", "Enter", "Shift", "Backspace", etc.
Column padding
Enter the padding to add between keys; it can be a number (of pixels) or a percentage of the keyboard's width.
Row padding
Enter the padding between the rows of keys; it can be a number (of pixels) or a percentage of the keyboard's height.
Key-press animation
- Show
  Toggle whether a background color-change animation effect is shown when clicking on a key.
- Color
  Select the animation color.
- Duration
Enter a number, optionally followed by s (implicit), m, or h, to specify the duration of the effect.
Pop-up attributes
Only available for Elementi X users, this option allows changing the advanced pop-up attributes in JSON format.

Locale

Select the locale used for the keyboard layout. It is possible to generate multiple keyboard layouts within the same widget by adding more locales; for that, press the Insert key on your keyboard (or right-click within the Edit panel and select "Insert"). To switch between the layouts, long-click on the space key.

Pop-up Virtual Keyboard

Added in Elementi 2023.

Displays an interactive virtual keyboard over web content whenever an input field in the web page receives focus, allowing the entry of text in that field when there's no keyboard available. This widget is dependent on the Virtual Keyboard one, which must be present in the project.

Widget properties:

Virtual Keyboard
This references the Virtual Keyboard widget present within your project. Click the button to fine-tune the layer's properties, such as its size and position over the web content.

Widget layers:

Add one (or more) web page layers to should make use of the virtual keyboard.

Key to Switch

This widget shows a default content and listens for key press events – when a key is pressed, it checks whether that key is in the list of predefined key identifiers and, if so, it displays the corresponding content. The widget reverts to the default content when the switched-to layer ends (a fixed duration might need to be set for that). This widget works best with an HID QWERTY keyboard. This widget is similar to the "Click Through" widget, except that key events are used instead of buttons.

From the "Properties" tab, you can set the transition used when switching to another content "page".

From the "Mappings" tab, you can define which content to display depending on the pressed key.

Key identifier
Enter the key or key combination to react to, such as: A, Ctrl+A, Ctrl+Shift+S, 0, 1, 9, F5, U+0008 (Backspace), U+0020 (Space), Enter, PageUp, PageDown, etc.

Note:
Lower-case letters are not valid identifiers.
Page
Define the content layer to be displayed when pressing the respective key identifier.

Key to Action

This widget updates a Shared Variable each time a key is pressed. This widget works best with an HID QWERTY keyboard, and it can be used together with the Action to Switch to create interactive content across multiple devices, for instance.

Widget properties:

Variable name
Enter the name of the Shared Variable to update. When empty, the value from the previous row is used.
Key identifier
Enter the key or key combination to react to, such as: A, Ctrl+A, Ctrl+Shift+S, 0, 1, 9, F5, U+0008 (Backspace), U+0020 (Space), Enter, PageUp, PageDown, etc.

Note:
Lower-case letters are not valid identifiers.
Value
Enter the update value of the Shared Variable.

Key to Script

Available only in Elementi X.

This widget listens to key press events; when a predefined key is pressed, the associated JavaScript code is executed, including jSignage actions like creating or removing layers.

Widget properties:

Include file
Enter the path to a JavaScript file that implements the functions called when pressing any of the defined buttons.

Mappings:

Key identifier
Enter the key or key combination to react to. Examples of valid identifiers: A, Ctrl+A, Ctrl+Shift+S, 0, 1, 9, F5, U+0008 (Backspace), U+0020 (Space), Enter, PageUp, PageDown, etc. Note that lower-case letters are not valid identifiers.
JavaScript code
Insert the JavaScript code to be executed when pressing the respective key identifier.

Action to Switch

This widget shows a default content and listens for updates of the controlling Shared Variable; when an update is received, it checks whether that value is in the list of predefined "actions" and if so, it displays the corresponding content. The widget reverts to the default content when the switched-to layer ends (a fixed duration might need to be set for that) or when the value received is not part of the list of predefined "actions".

Note:

The Shared Variable can be updated from Click to Action or Key to Action widgets (they must configured to use the same Shared Variable name!) or from an external device through network interactivity.

Widget properties:

Transition
Set the transition used when switching to another content "page".
Shared Variable
Enter the name of the Shared Variable that controls the widget.
Close action
Enter the value for which the widget is forced to end.
Multiscreen synchronization
Set this to "true" in case of synchronized content.
Start with default page
When selected, the widget disregards previous updates and loads the default content page when opened.

From the "Mappings" tab, you can define which content to display depending on the Shared Variable value.

Action
Enter the string to compare the Shared Variable update value to.
Page
Define the content layer to be displayed when the Shared Variable value matches the value from the "Action" column.

Media Playback

This widget is used to interactively play, pause, and resume a video or an animation by setting the control Shared Variable to "PLAY", "PAUSE", or "TOGGLE". These commands can be followed by a number (of seconds) or a percentage to specify the position, relative to the beginning of the media, where the command should be applied. For instance, use:

"PLAY 8.5" to start playing at second 8.5;
"PLAY 50%" / "PAUSE 50%" to play/pause at the middle;
"PAUSE 0" to pause on the first frame.

Widget properties:

Shared Variable
Enter the name of the Shared Variable used to control the media playback. This is called "playback" by default.
Media
Drag & drop the media that should be played.
Multiscreen synchronization
Select whether the Shared Variable updates should be time-synchronized. This should be set to "No", except for the case of multiscreen content.
Optional playback reports
The widget can also send playback reports (progress, status, current time position, and media duration) at regular intervals through another four Shared Variables.

Tutorials

Travel agency

Here is how to create an interactive travel project using the "Click to Switch" widget and two images. A video and a sample project are included.

Motion detection

Here is how to create an interactive project for motion detection using the "Action to Switch" widget. A sample project is included.

Let's say we want to have multiple pages of content, like on a website, that the user in front of the screen can navigate from a menu that changes depending on the selected page - for instance, the first page would have menu of main categories and when selecting one category, the menu would display subcategories or products. The basic steps to do this are the following:

Include one "Action to Switch" widget in your main index file. Open it.
Configure the name of the Shared Variable that controls it, for instance "menu".
Under the "Mappings" tab, define all the possible pages ("P1", "P2", ...) within this widget.
- By default, the first page doesn't have an action associated - if you want to have buttons to navigate back to the main page from any other page, enter an action name for it (e.g., "home" or "P0"); you'll use that name later for the back buttons.
Create a home page layout to be shown as default content.
- Import within a "Click to Action" widget and configure the buttons to show the categories' names and the actions to be "P1", "P2", etc. Make sure to use the same Shared Variable name (e.g., "menu") within this widget.
Create a separate layout for each category, using a new "Click to Action" widget to show a menu of products/subcategories for that category page. Make sure to use the same Shared Variable name (e.g., "menu") within.
Drag & drop all these layouts within the "Action to Switch" widget under the "Mappings" tab.
Test your interactive project by enabling the "touch screen mode" using the hand-like icon within the Preview panel.

Interactive widgets

Introduction

Get started

Included in Elementi

Feedback

Menu Horizontal

Menu Vertical

Click to Switch

Click Through

Click to Action

Click to Script

Virtual Keyboard

Pop-up Virtual Keyboard

Key to Switch

Key to Action

Key to Script

Action to Switch

Media Playback

Tutorials

Travel agency

Motion detection

Navigation menu

See also