Skip to main content

How to Design Kiosk Apps Using Kiosk Designer Pro

In this guide, we'll show you how to effortlessly customize templates into interactive kiosk apps with just a few clicks, perfectly tailored to your unique requirements.

About OptiSigns Kiosk App Functionality

Harness the power of OptiSigns Designer's Drag & Drop UI to create interactive kiosk experiences optimized for touch screens. Easily browse content, direct users to your website, and engage with video playback and other immersive features. With Kiosk Designer Pro, integrate multimedia elements like images, videos, and apps seamlessly. Follow our step-by-step tutorial to craft an intuitive interface that ensures smooth navigation and easy access to crucial information.

Here's a 3 minute video guide:

NOTE: You will need the Engage plan to access these interactive kiosk features.

Setting Up a Kiosk App Using Kiosk Designer Pro

Log on to the OptiSigns portal: http://app.optisigns.com/

Go to Engage tab → Click on 'New App'

Select 'Touch Screen Kiosks' →  Select App

Select 'Kiosk Designer Pro' → Next → Build

 

You will be re-directed to the Designer app.

For a refresher on how to use Designer, please click here.

In Designer, you will see a new function in the top menu called Link. This will appear when clicking on any element.

NOTE: You may need to scroll across the top menu bar if you are using a device with a smaller resolution.

'Link' can be used to map to another:

  • Template Design
  • OptiSigns' asset such as an image, video, document, and some apps.
  • A Web URL

Once you click on 'Link', the Link Options menu will appear on the right-hand side.

Click 'Add Link'

A new window will populate, allowing you to either:

  1. Input a direct URL, or
  2. Select an asset

Option 1: Selecting a Direct URL

If you are using a direct URL,  you will need to input a URL and then click Add.

Once you have added your direct URL, you will be redirected back to your template or design. 

For a direct URL, here are the link options to choose from:

  • Update Link: Allows you to update your link to another direct URL or another asset
  • Remove Link: Lets you remove your link
  • Duration (seconds): Sets the maximum duration of how long your asset will display on the screen before returning to the main page.
  • Preload: Defaults to checked. Preload the URL or asset in the background to allow for instant display. This improves user experience. However, if you have animation or dynamic content on your page, you may want to disable this.
  • Close Icon: Allows you to customize where you would like the Close icon to display on your asset.
    • None
    • Top Left
    • Top Right
    • Bottom Left

    • Bottom Right

  • Close & Nav Bar Styler:

    • Icon Position: Fine-tune icon placement within the bar for maximum visibility and accessibility.

      • Options: None, top left, top center, top right, bottom left, bottom center, bottom right.

    • Icon Style: Harmonize your kiosk's look by selecting an icon design that fits your aesthetic.

      • Options: Default, Outline, Solid, or Thin, ensuring alignment with the Close icon's font style.

    • Icon Color: Enhance your brand's identity by customizing icon colors to match your theme.

    • Icon Size: Adjust icon sizing for user-friendly recognition and interaction.

  •  Show Navigation Bar: Enable to allow for back and forward navigation for enhanced user navigation. Enabling this also introduces additional options:

    • Navigation Bar Background Color: Personalize the navigation bar's background color to complement your design.

    • Navigation Bar Opacity: Modify the navigation bar's opacity for either a subtle or pronounced appearance.

If you want to set these options as your default for future use, see our "How to Change Close & Nav Bar Styler Preferences" article.

Option 2: Selecting an Asset

If you are using an asset,  you can either choose an asset from within your library, upload a file, create a new app, or choose a Feeds.

 

Once you select your asset to be linked, you will be redirected back to your template or design. 

For assets, you will have all the same link options as explained in direct URL section, with the addition of Scale.

  • Scale: Defaults to Fit. This option will resize your asset per the selected preference
    • None
    • Fit
    • Stretch
    • Zoom

Click Save.

That's all!

You have successfully created your kiosk app using Kiosk Designer Pro, and it is now ready to be used.

 

If you have any additional questions, concerns or any feedback about OptiSigns, feel free to reach out to our support team at support@optisigns.com

 

 

 

 

Was this article helpful?