Overview

This guide provides an overview for the use and configuration of WebFrame Kiosk and WebFrame Pro Kiosk. It also provides guidance for content-specific use cases (websites, web apps, video, etc.). This guide provides step-by-step instructions on pairing WebFrame with either Guided Access Mode or Single App Mode. Finally, it serves as a running list of FAQs from WebFrame users.

WebFrame is a full-screen kiosk browser for iOS. It is specifically designed to keep users in the experience intended by an administrator. As such, it does not include a navigation bar or in-app settings. All configuration of WebFrame is done either locally through the iOS Settings.app or remotely through an MDM/EMM product like JAMF, VMWare Workspace One, MobileIron, Microsoft Intune, etc.

Basics

Homepage Options

homepage_options.png

Homepage URL:

The starting point for WebFrame is the Homepage URL. The Homepage URL must be properly formatted according to W3C standards and can include query string parameters and/or file extensions for document and multimedia files. WebFrame supports insecure HTTP websites; however, we recommend using HTTPS whenever possible.

Clear Browser Cache on Reload:

To preserve user privacy and provide a pristine environment for each user, you can configure WebFrame to clear any cookies, session state, back/forward lists, or other cached data when the homepage is reloaded. The information will be cleared when the homepage is reloaded through the pull to reload gesture, inactivity timeout, or setting configuration changes.


Domain Limiting Options

domain_limiting_options.png

WebFrame has been intentionally created to provide a managed and curated kiosk experience rather than a general purpose browser. However, depending on the website or app configured as the WebFrame homepage, users may still be able to access more of the internet than intended. A common issue is links to Google or other external websites when using an existing website/app as the WebFrame homepage. Domain limiting is a great way to use an existing website, while ensuring users cannot browse the entire internet from your kiosk.

The Domain Limiting Options section configures the list of allowed domains that can be browsed in WebFrame. The feature is enabled by default but can be turned on or off with the Limit Browsing to Specific Domains toggle.

The Allowed Domains list is a comma-separated list of domains and extensions, for example: domain1.com, domain2.com, domain3.net, domain4.co.uk

If your website or app uses a redirector domain, ensure that the redirector domain in included as well. For example: hp.com, hpredirect.com

Users attempting to browse away from allowed domains will be presented with an error message similar to the following:

domain_prohibited.png

Inactivity Timeout

inactivity_timeout_options.png

The Inactivity Timer ensures that users are greeted with a fresh environment rather than where the previous user left off. If a user simply walks away from the kiosk, WebFrame will wait the specified amount of time, then reload the configured Homepage URL. When combined with Clear Browser Cache on Reload, the previous session state, cookies, back/forward history, etc. will also be cleared upon timeout.

The Inactivity Timer begins counting down the moment a user interacts with the screen (tap, swipe, or other gesture). The timer resets with each additional touch. If a user does not interact with the screen for a specified amount of time, the Homepage URL will be reloaded and the process will repeat. Please note that because the timer starts on the first interaction (rather than page load), an unattended kiosk will not endlessly reload the Homepage URL.

The Inactivity Timer can be enabled or disabled with the toggle in the Inactivity Timeout Options section.

The timeout value can be selected from the Reload Homepage After list with available options of 1 minute, 2 minutes, 3 minutes, 5 minutes, 10 minutes, or 15 minutes.


User Interaction Controls

user_interface_options.png

Enable User Interaction:
WebFrame supports interactive kiosks as well as non-interactive information displays. By default, WebFrame is configured for user interaction. However, if you would like a non-interactive kiosk (information display, looping video, etc.), then simply toggle the Enable User Interaction setting.

Allow JavaScript Popup Boxes:
One of the great things about WebFrame is that you can turn an existing site into a public kiosk without any additional development. However, there may be situations where you need to explicitly disable or enable legacy functionality like JavaScript popup dialogs. WebFrame includes support for the three main types of JavaScript popup dialog: Alert, Confirmation, and Prompt. They are enabled by default but can be disabled with the Allow JavaScript Popup Boxes setting.

 
JavaScript Alert

JavaScript Alert

JavaScript Confirmation

JavaScript Confirmation

JavaScript Prompt

JavaScript Prompt

 

Full Screen Option:
With the introduction of iPhone X, Apple introduced the concept of “Safe Area”, an area of the screen that will not be obscured in any way by the camera sensor array or the rounded edges of the screen. For iPhone X, Xs, Xs Max, and Xr, WebFrame supports multiple screen options. The Full Screen Option in WebFrame will allow a user to select Safe Area, Full Screen, and Full Screen (Modify Page Viewport).

Safe Area is selected by default, forcing WebFrame to comply with the Apple-defined Safe Area with a black border (more on that next) for the areas of the screen outside of the safe area. The black border blends nicely with the physical screen for a seamless edge. See the first image below for an example.

The Full Screen option is great for photographic cover pages or other visually-intensive pages or documents that are better suited for a full screen experience.

The final option, Full Screen (Modify Page Viewport), is an advanced option that should only be used in very controlled environments. Modern web technology can detect and enforce its own safe areas, regardless of what has been configured in the browser. For an example, see the third image below. WebFrame has been configured in “Full Screen”. However, the page detects and enforces its own safe area to ensure the navigation items are not obscured by the camera sensor array. If you would like to override that behavior without changing the website, you can choose the “Modify Page Viewport” option in WebFrame to override the settings on the underlying webpage.

 

Safe Area Constraints (Default)

Full Screen without Viewport Safe Area

Full Screen with Viewport Safe Area

Full Screen with Modified Viewport

 

Safe Area Color:
As mentioned above, iPhone X, Xs, Xs Max, and Xr include a “Safe Area” of the screen to ensure controls, branding, or other elements are not obscured by the camera sensor array or the rounded corners of the screen. By default, WebFrame will use a black frame around the edges of the screen. However, the Safe Area Color setting allows an administrator to configure a different color (specified as a six digit RGB hex value) that matches company branding, dominant page colors, etc. For example, see the images with the default frame color (000000) and Starbucks green (0d6343) to match the page branding.

 
Default Safe Area Color (000000)

Default Safe Area Color (000000)

Safe Area with Brand Color (0d6343)

Safe Area with Brand Color (0d6343)

 

Navigation Options

navigation_options.png

There are several options to customize kiosk navigation including gestures and navigation buttons.

Pull to Refresh:
WebFrame supports three different Pull-to-Refresh options. The Pull-To-Refresh gesture can be turned off, refresh the current page, or reload the Homepage URL. If Clear Browser Cache on Reload is enabled, then the Pull-to-Refresh gesture will also clear the browser cache when configured to reload the Homepage URL. The configured action will also be reflected on screen when the user performs the pull gesture as seen below:

 
Pull to Refresh Current Page

Pull to Refresh Current Page

Pull to Reload Homepage URL

Pull to Reload Homepage URL

 

Enable Navigation Swipe Gestures:
When enabled, this setting will allow a user to swipe right on the screen to go back or swipe left on the screen to go forward. Note that this is only applicable when back or forward navigation is possible and when Enable User Interaction has been enabled in User Interface Options.

Enable Navigation Buttons:
Users that aren’t familiar with iOS devices may not be aware of back/forward swipe gestures. To make navigation more visible and accessible to these users, WebFrame supports Smart Navigation Buttons that will allow for intuitive back/forward navigation. The Smart Navigation Button can be prepositioned around the screen by users. They can also be configured to minimize on scrolling and to only appear when navigation is possible.

To move the Smart Navigation Buttons, a user can tap and hold, then drag the buttons upward or downward on the screen to reposition.

 
Smart Navigation Buttons Visible and Active

Smart Navigation Buttons Visible and Active

Smart Navigation Buttons Being Repositioned

Smart Navigation Buttons Being Repositioned

 

Hide Navigation Buttons when Inactive:
There are times when navigation is not possible. In such cases, WebFrame Smart Navigation Buttons can be configured to only appear when navigation back or forward is possible. This prevents the interface from being cluttered with unnecessary buttons.

 
Smart Navigation Buttons with Inactive Buttons Hidden

Smart Navigation Buttons with Inactive Buttons Hidden

Smart Navigation Buttons with Inactive Buttons Visible

Smart Navigation Buttons with Inactive Buttons Visible

 

Minimize Navigation Buttons When Scrolling:
WebFrame will minimize Smart Navigation Buttons to a partially visible state as the user scrolls in order to provide a full screen experience. This behavior can be turned off to force the navigation buttons to remain fully visible.

 
Smart Navigation Buttons Minimized

Smart Navigation Buttons Minimized

 

Local Configuration

WebFrame and WebFrame Pro can be completely configured in iOS Settings. See the WebFrame or WebFrame Pro sections.

 
local_settings_iphone.png
local_settings_ipad.png
 

Remote Configuration

WebFrame Pro Kiosk is compatible with the AppConfig standard. Any modern MDM/EMM product that supports AppConfig (JAMF, VMWare Workspace One, MobileIron, Microsoft Intune, etc.) can deploy and manage WebFrame Pro.

Each MDM solution manages applications slightly differently. In general, WebFrame Pro will be deployed using Apple’s Volume Purchase Program (VPP) and managed through a managed app profile or policy. Some examples are included below:

 

App Configuration Policy in JAMF

App Configuration Policy in MobileIron

 

The available manageable settings are:

  • com.wireframerate.webframepro.homepage_url (String):
    Kiosk homepage as a string. For example: https://www.mydomain.com
    Default value: https://www.wireframerate.com

  • com.wireframerate.webframepro.clear_cache_enabled (Bool):
    Clears browser cache when the idle timer reloads the homepage URL.
    Default value: True

  • com.wireframerate.webframepro.domain_limiting_enabled (Bool):
    Limit navigation to a predefined list of allowed domains.
    Default value: True

  • com.wireframerate.webframepro.domain_allowed_list (String):
    Comma-delimited string of domain names. For example: domain1.com,domain2.com,domain3.co.uk
    Default value: wireframerate.com

  • com.wireframerate.webframepro.idle_timeout_enabled (Bool):
    Enable/disable the idle device timeout.
    Default value: True

  • com.wireframerate.webframepro.idle_timeout_seconds (Integer):
    Number of seconds before an idle device reloads the homepage URL.
    Default value: 300

  • com.wireframerate.webframepro.user_interaction_enabled (Bool):
    Enable/disable all user interaction.
    Default value: True

  • com.wireframerate.webframepro.javascript_popups_enabled (Bool):
    Enable/disable JavaScript popup dialog boxes.
    Default value: True

  • com.wireframerate.webframepro.full_screen_option (Integer):
    Configures the full screen option of the view. 0 for Safe Area constraints, 1 for full screen, 2 for full screen with page viewport overrides.
    Default value: 0

  • com.wireframerate.webframepro.safe_area_color (String):
    Six-digit hex code specifying the color for the screen above the Safe Area constraints. Must begin with ‘#’ (for example: #C19304).
    Default value: #000000

  • com.wireframerate.webframepro.pull_to_refresh_action (Integer):
    Configures the “pull-to-refresh” action. 0 for off, 1 to refresh the current page, 2 to reload homepage.
    Default value: 0

  • com.wireframerate.webframepro.swipe_navigation_enabled (Bool):
    Enable/disable swipe gestures for browser back/forward.
    Default value: True

  • com.wireframerate.webframepro.navigation_buttons_enabled (Bool):
    Enable/disable Smart Navigation Buttons.
    Default value: False

  • com.wireframerate.webframepro.navigation_buttons_autohide (Bool):
    When enabled, Smart Navigation Buttons will be hidden when inactive. When disabled, buttons will always be visible.
    Default value: True

  • com.wireframerate.webframepro.navigation_buttons_minimize (Bool):
    When enabled, Smart Navigation Buttons will minimize on scroll. When disabled, buttons will not minimize.
    Default value: False


Example XML:

<dict>
	<key>com.wireframerate.webframepro.homepage_url</key>
	<string>https://www.apple.com</string>
	<key>com.wireframerate.webframepro.domain_limiting_enabled</key>
	<true/>
	<key>com.wireframerate.webframepro.domain_allowed_list</key>
	<string>apple.com, itunes.com</string>
	<key>com.wireframerate.webframepro.idle_timeout_enabled</key>
	<true/>
	<key>com.wireframerate.webframepro.idle_timeout_seconds</key>
	<integer>300</integer>
	<key>com.wireframerate.webframepro.clear_cache_enabled</key>
	<true/>
	<key>com.wireframerate.webframepro.user_interaction_enabled</key>
	<true/>
	<key>com.wireframerate.webframepro.swipe_navigation_enabled</key>
	<true/>
	<key>com.wireframerate.webframepro.pull_to_refresh_action</key>
	<integer>1</integer>
	<key>com.wireframerate.webframepro.javascript_popups_enabled</key>
	<true/>
	<key>com.wireframerate.webframepro.safe_area_color</key>
	<string>#000000</string>
	<key>com.wireframerate.webframepro.full_screen_option</key>
	<integer>0</integer>
	<key>com.wireframerate.webframepro.navigation_buttons_enabled</key>
	<true/>
	<key>com.wireframerate.webframepro.navigation_buttons_autohide</key>
	<true/>
	<key>com.wireframerate.webframepro.navigation_buttons_minimize</key>
	<true/>
</dict>

Content Configuration

Websites

For general websites, simply configure the Homepage URL to the full address of the site. This can include the full address path as well as any query string parameters.

If the site has its own navigation and it is preferable to back/forward navigation, disable swipe gestures and Smart Navigation Buttons.

Web Apps

Web apps and Progressive Web Apps are generally handled the same way as websites. Configure the homepage URL to the address of the web app (for example, “https://app.starbucks.com”) and configure user interface and navigation options accordingly.

Video

There are two options when configuring WebFrame to play video: A URL to a page containing a player (e.g. YouTube), or a direct URL to a video file and extension. In general, we recommend using a webpage such as YouTube, Vimeo or a page you build yourself. This will provide the most flexibility around things like autostart, loop, etc.

YouTube:
To display a full-screen, looping video as digital signage, demo at a trade show, or information kiosk, set the Homepage URL to:

https://www.youtube.com/embed/VIDEO_ID?playsinline=1&controls=0&loop=1&plalylist=VIDEO_ID

Replacing “VIDEO_ID” with the actual YouTube ID of the video. For example:

https://www.youtube.com/embed/uJkOP1-v9B4?playsinline=1&controls=0&rel=0&loop=1&playlist=uJkOP1-v9B4

For a full list of YouTube player parameters, please see YouTube Embedded Players and Player Parameters in the YouTube IFrame Player API documentation.

Please note that some YouTube parameters (such as “autoplay”), do not work on iOS. This is a limitation of iOS (including WebKit and Safari) as a platform and is not specific to WebFrame. Because autoplay does not work on iOS, “Enable User Interaction” should be set to Enabled so that you can start the video initially.

Direct URL:

Because WebFrame is built on WebKit, it supports native HTML video playback. To play a video directly using the iOS native player, specify the video URL as the Homepage for WebFrame. For example:

https://www.apple.com/105/media/us/macbook-air/2018/9f419882_aefd_4083_902e_efcaee17a0b8/films/product/mba-product-tpl-cc-us-2018_1280x720h.mp4

Documents

Generally, to use documents as a kiosk, simply host the document at a publicly accessible URL and set that URL as the Homepage in WebFrame.

Some example files:

Interactive Experiences

There are many tools for creating interactive user experiences without writing code. One such solution is InVision. With InVision, it is possible to create a fully interactive experience then share that experience, or “prototype” with a URL.

To learn more about InVision, see https://www.invisionapp.com. For this guide, we will use an existing sample prototype created by InVision.

Once, a prototype has been create, it can be shared through a link. Simply click the “Share” button at the top of the screen.

 
invision_share.png
 

At the bottom right corner of the share popup screen, click on “Link Settings”. In the Share Prototype screen, ensure “Allow commenting…” is turned off, “Allow access to all screens…” is turned on, and “Password Protect” is turned off. See below:

 
invision_share_popup.png
invision_share_settings.png
 

Finally, copy the Private URL and use it as the Homepage URL for WebFrame. Load WebFrame and the InVision prototype will load as an interactive kiosk.

 
invision_demo_settings.png
invision_demo_live.png
 

Advanced Configuration

Guided Access Mode

Guided Access Mode provides an easy and convenient way to lock an iOS device down to a single app without the need for a manageability solution. To setup Guided Access Mode, please refer to this guide from Apple.

To summarize enabling Guided Access Mode:

  1. Go to Settings > General > Accessibility > Guided Access.

  2. Turn on Guided Access.

  3. Tap Passcode Settings, then tap Set Guided Access Passcode.

  4. Enter a passcode, then reenter it. From here, you can also turn on Face ID or Touch ID as a way to end a Guided Access session.

To enable Guided Access Mode with WebFrame to lock down a device:

  1. Open WebFrame or WebFrame Pro, then triple-click the Home button. For newer devices without a home button, triple-click the lock button. 

  2. If you want parts of your screen to stop responding to touch, use one finger to circle those areas. You can move or resize the circle, or tap the X to remove it.

  3. Tap Start

Or to start a Guided Access session with Siri*, open the app that you want, then tell Siri "Turn on Guided Access." 

*Siri features might vary by country or region.

 
Setup guided access mode in Settings &gt; General &gt; Accessibility &gt; Guided Access

Setup guided access mode in Settings > General > Accessibility > Guided Access

Initiate Guided Access by Launching WebFrame then Triple-Clicking the Home Button (or Lock Button on FaceID Devices), Configuring Options, then Clicking “Start”

Initiate Guided Access by Launching WebFrame then Triple-Clicking the Home Button (or Lock Button on FaceID Devices), Configuring Options, then Clicking “Start”

 

Single App Mode with Configurator

Device “Supervision” provides a added layer of manageability and security to iOS devices. There are two ways to make an iOS device Supervised: Apple’s Device Enrollment Program (DEP), or the Apple Configurator app. For information on Supervising an iOS device, please refer to the Apple DEP documentation or the Apple Configurator help documentation.

Once a device is Supervised, it can be put into “Single App Mode” using either Apple Configurator or an MDM solution. To enable Single App Mode with Configurator:

  1. Connect device to a Mac with Apple Configurator installed

  2. Supervise the device according to Apple Configurator instructions

  3. Install WebFrame Kiosk or WebFrame Kiosk Pro

  4. In Apple Configurator, select Supervised from the toolbar

  5. Select the device or devices to be placed in Single App Mode, right click or select Actions from the menu

  6. Choose Advanced > Start Single App Mode…

  7. Browse to or search for then select WebFrame Kiosk or WebFrame Pro Kiosk

  8. Click Options to configure advanced options accessibility features and click Apply [optional]

  9. Finally, click Select App to apply and start Single App Mode

Configurator Supervised Device List

Configurator Supervised Device List

Advanced Menu

Advanced Menu

Single App Mode App Selection

Single App Mode App Selection


Single App Mode with MDM/EMM

Device “Supervision” provides a added layer of manageability and security to iOS devices. There are two ways to make an iOS device Supervised: Apple’s Device Enrollment Program (DEP), or the Apple Configurator app. For information on Supervising an iOS device, please refer to the Apple DEP documentation or the Apple Configurator help documentation.

Once a device is Supervised, it can be put into “Single App Mode” using either Apple Configurator or an MDM solution. Using MDM, Single App Mode is typically enabled through a Configuration Profile.

See the documentation for the specific MDM/EMM solution in use. For this guide, we will provide high-level guidance.

To enable Single App Mode:

  1. If you haven’t already, enroll in the Apple Volume Purchase program at https://business.apple.com/#enrollment

  2. Purchase WebFrame Pro Kiosk for the organization. WebFrame Pro Kiosk is recommended over WebFrame Kiosk because it can be remotely managed.

  3. Log into your MDM/EMM Solution

  4. Follow instructions to add WebFrame Pro Kiosk as a managed app

  5. Configure WebFrame Pro Kiosk to be automatically installed with automatic updates

  6. Modify the WebFrame Pro Kiosk settings as described in the Remote Configuration section of this user guide

  7. Follow instructions to create a new Configuration Profile

  8. Find and select Single App Mode then create/configure the policy

  9. Select iOS as the target operating system

  10. Select WebFrame Kiosk Pro as the single app

  11. Optionally configure additional feature or accessibility settings

  12. Assign the new profile to the appropriate devices and/or groups

  13. Follow instructions for deploying WebFrame Kiosk Pro and the new Configuration Profile


FAQ

So it’s just a webpage?
No, WebFrame is not just a webpage. It is a browser specifically designed to be configured as a kiosk for iOS devices, with features target to ensure the best possible experience, usability, manageability, and security for a kiosk implementaiton.

What kind of content can I display?
WebFrame is built on WebKit, the same engine that powers Safari. In general, if Safari can display something without the need for a plug-in, then WebFrame can display the same content. In general, we recommend websites, web apps, documents, and multimedia (in iOS natively supported formats).

Can WebFrame be managed?
WebFrame Kiosk and WebFrame Pro Kiosk can both be managed locally in the iOS Settings app. WebFrame Kiosk Pro can be managed remotely through EMM/MDM solutions that support the AppConfig standard.

Why doesn’t it have a navigation bar?
The intent for WebFrame is to provide a full-screen experience so that users are immersed the experience you define. It is also important to keep users in the experience you curate. A navigation bar would detract from both of those goals. However, in the future we are looking at options to allow a configurable navigation bar for customers that want to provide a more open experience.

How do I deploy in an enterprise?
WebFrame can be deployed through Apple’s Volume Purchase Program for enterprise or education. We recommend deploying WebFrame Kiosk Pro, since it can also be remotely configured at enterprise scale, whereas WebFrame Kiosk can only be managed locally through the iOS Settings app.

Can I change the app icon?
Currently, no, but this is something we’re investigating. If you are interested in a custom version of WebFrame that includes custom icons, hard-coded URLs, etc., please contact us.