Skip to main content

How to Build a Simple Interactive Kiosk with Popups

Completion Time: 20 minutes

This guide shows you how to build a touch Content where tapping a shape opens a popup: another page of the same Content that appears on top of the current page. Closing the popup returns the viewer to the page underneath.

Each popup is a full Wallboard page, so it can hold anything a page can: text, images, video, tables, or more interactive elements. Everything lives in one Content, so there are no external dependencies and no scripting.

Common uses: product detail overlays on a kiosk, exhibit information in a museum, room details on a building directory, or menu item descriptions on a digital menu board.

Before you start​

  • Popups work in the Content editor. The Jump and Popup click types are not offered when you edit a Slide.
  • The kiosk device needs a touchscreen (or a mouse) for viewers to tap. ❓ Confirm whether any supported player platform does not support touch popups.

Step 1: Build the main page​

  1. Create a new Content and design the main page your viewers see first.
  2. Add a Shape Widget for each tappable area, for example one per product or exhibit. You can also use an Image or Text Widget; the same click settings are available on them.

Step 2: Add one page per popup​

  1. Add a new page to the Content for each popup. Learn more: Adding pages
  2. Give each page a clear name (for example, Detail - Red), because you will pick it from a list later.
  3. Design each page with the detail you want to show.
tip

Lay out the popup page with its final size in mind. If you plan to show the popup at 60% width and 60% height, keep the important elements inside that area.

Step 3: Set the shape to open a popup​

  1. Select a Shape on the main page.
  2. Open the Other tab and find the Interaction section.
  3. Set Click type to Popup.
  4. In Jump to, choose the page you created for this shape.
  5. Adjust the popup settings:
SettingWhat it does
Show close iconShows a close icon in the corner of the popup.
Close icon sourceReplaces the default close icon with your own image. Appears only when Show close icon is on.
InteractiveTurn this on when the popup page has its own buttons or inputs. Per its tooltip, the popup then only closes when the viewer touches the close icon or the area around the popup. ❓ In the current player code, a tap inside the popup does not close it even with this setting off; confirm the intended difference with the product team before publishing.
Popup durationCloses the popup automatically after this many seconds (minimum 3). Leave empty to keep it open until the viewer closes it.
Popup width / Popup heightSize of the popup as a percentage of the Content (10–100%). The popup is centered.
Data rowAppears only when the Content uses data rows. Passes a specific data row to the popup page.
  1. Repeat for every shape.

Step 4: Test in preview​

  1. Open the Content in preview.
  2. Tap each shape and check that the right page opens as a popup.
  3. Close the popup by tapping the close icon or the area outside the popup, and check you return to the main page.

How the popup behaves​

  • The popup opens over the current page; the page underneath keeps its state.
  • Tapping the area outside the popup closes it.
  • If the popup page has page change events, its page start actions run when the popup opens and its page end actions run when it closes. ❓ Confirm this is worth stating for end users.

Going further: open a popup from a touch event​

Click type gives one action per Widget. If one tap must do several things (for example, play a sound and open a popup), set Click type to Actions and use Edit touch events instead. The Popup action is in the Navigation group of the action list, next to Jump to, and offers:

  • Special: Open, Close, or Toggle the popup.
  • Auto close with a Duration.

Learn more: Table Row Popup shows a popup that receives data from the tapped table row.