How to Create an Attract Screen for Your Kiosk

Want to bring your interactive kiosk to life and engage passersby with your product? Or showcase promotions during idle time? Let’s craft a captivating visual display to enhance engagement.

Use Case:

In a retail clothing store, the attractive screen on a kiosk displays a rotating gallery of the latest fashion collections available in-store. As customers pass by, the screen highlights special promotions and new arrivals, prompting them to touch the screen for more details or to find items in their size. This interactive element not only draws customers in but also guides them through the store’s offerings, enhancing their shopping experience.

In this article

  1. What is an Attract Screen?
  2. Getting Started
  3. Kiosk Designer Pro - Creating Your Attract Screen
  4. Split Screen - Creating Your Attract Screen

What is an Attract Screen?

An Attract Screen is what your interactive kiosk will display until someone engages with the screen. Once the screen is interacted with, it will take the viewer to your kiosk. An attractive screen could be anything you may want to display to attract passersby to interact with your kiosk: a visual welcome screen, a rotating playlist of ads, a video of your product or brand, and more!

Note: You need the Engage plan to have access to our Kiosk features.

Here's a simple example we've created, showing you both the attractive screen and the interactive kiosk!

Getting Started

You'll first want to create your interactive kiosk in our Kiosk Designer Pro. If you have not already done so, please visit our helpful guide: How to Design Kiosk Apps Using Designer

Now, let's create that Attract Screen! There are two ways that you can approach this, and we will highlight both in this article.

Method 1: Kiosk Designer Pro - Creating Your Attract Screen

Visit the Engage page, click on New Apps, click on Touch Screens → select Kiosk Designer Pro, and Build.

If you've never used Kiosk Designer Pro before, please follow this guide.

Once you've created your design and your kiosk, it is time to link the two together!

Design and decide which element you'd like to be interactive.

For this example, we've created a simple "Click Here" text box.

Click on the element, then click on Link in the top bar.

A menu will appear on the right side.

Click Add Link. An asset menu will pop up. You'll want to visit the Engage tab within this pop-up. Any assets that you've previously created in Engage Management will appear here.

Select your preferred Kiosk asset.

In the menu settings, you can adjust:

  • Duration: The maximum duration of the asset displayed on the screen
  • Icon Position: Change where the position of the bar is.
  • Icon Style: Change the visual look of the bar.
  • Icon Color: Change the close icon's color.
  • Icon Size: Change the size of the close icon.
  • Show Navigation Bar: Select this if you want a navigation bar.
  • Background Color & Opacity: Change the background color and opacity of the navigation bar.

Make sure you save your Design, then assign it to your Kiosk! 

Limitations: 

  • Using a video as the full background in Designer can give your project a dynamic and immersive appearance. However, this setup currently limits the ability to overlay other elements. For greater flexibility, consider resizing the video to occupy less than the full display. This approach allows you to creatively incorporate clickable elements and additional assets alongside your video, enhancing both functionality and visual appeal.

Method 2 - Split Screen - Creating Your Attract Screen with Background Video 

For this method, you'll want to create a few designs in Designer to use in the Split Screen App.

For the example below, we used an uploaded video and two designs created in Designer. 

You'll want to make sure that one of your designs is linked to your Kiosk using Designer, as described in the above step.

For example, we created a "Touch Here To Begin" button in the Designer app from the Files/Assets page, then linked it to our Kiosk asset.

Once all of your assets are created:

Go to Files/Assets page → Apps, then select Split Screen.

Next, you can select from a list of split-screen zone layouts or you can customize your zone layout.

We recommend choosing Custom so you have more control over the zones.

You can add zones and change their sizes, arranging them to fit your ideal layout. 

You can see from our example below how our zone layouts come to life!

chrome_8xNvldeGhi

Once you've set up your Split Screen how you'd like, assign your Attract Screen to your Screen!

That's it! Now, you can enhance your interactive kiosk with an eye-catching Attract Screen!