Overview

Basics

Browser Options

Domain Limiting Options

Content Blocking Options

Inactivity Timeout Options

User Interface Options

Navigation Options

Management Options

Configuration

Local Configuration

iCloud Sync Configuration

Remote Configuration

Content Types

Web Sites

Web Apps

Videos

Documents

Interactive Experiences

Offline Configuration

Adding Files

Saving a Site for Offline Usage

Configuring WebFrame Pro for Offline

Kiosk Configuration

Guided Access Mode

Single App Mode with Configurator

Single App Mode with MDM/EMM

FAQ

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.

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 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.

Clear Cache on Launch:

In addition to clearing cached data when the homepage is reloaded, WebFrame can also be configured to clear locally cached data when the app launches.

Allow third-party cookies (Pro):

By default, WebFrame will only allow cookies from the host domain of the current page. WebFrame Pro can be configured to allow third-party cookies to allow cross-domain tracking. This can be useful if creating a kiosk using iFrames that use third-party login providers or other content aggregation.

Custom URL Scheme (Pro):

WebFrame Pro supports a custom URL scheme that will allow you to create WebClips that launch URLs other than the “Homepage URL” setting. To open a link from a custom URL, specify “webframepro:https://www.domain.com/page/page”. If Domain Limiting is enabled, “domain.com” should be added to the allowed domains list.

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 Domain Limiting 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:

Content Blocking Options will allow you to protect your users’ privacy by blocking tracking cookies. You can also ensure other tracking or malicious content including ads, fingerprinting, crypto mining, and more. In addition, you can create your own filter according to Apple guidelines to customize the look and feel of your kiosk homepage. To create custom filters, customize or replace the custom-filters.json file in the WebFrame Pro folder on the device.

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 Timeout list with available options of 1 minute, 2 minutes, 3 minutes, 5 minutes, 10 minutes, or 15 minutes.

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 User Interaction setting.

Scroll and Pan Gestures

Some user interfaces are better suited for taps only. If this is the case, vertical scrolling and horizontal panning can be disabled with this setting.

Zoom Gestures

Use this setting to disable pinch and double tap zoom gestures.

Note: There is a known issue that if this setting is toggle off to on, and “Clear Browser Cache on Reload” is disabled, the double tap zoom gesture won’t work until the app is restarted.

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 JavaScript Popup Boxes setting.

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).

Allow Printing from Web Page:

Beginning in version 1.4.0, WebFrame supports the HTML window.print() function to allow printing from web pages. To prevent printing, toggle this setting off.

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 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.

Activity Indicator:

Beginning in version 2.1.0, WebFrame and WebFrame Pro Kiosk have been updated to use a small progress bar at the bottom of the screen that shows interactive progress as a page loads. This activity indicator is less intrusive and doesn’t obscure underlying content. It also provides richer detail as the progress bar indicates the percent of a page that is loaded. In some circumstances, for example configurations with poor WiFi coverage, a spinner may still be preferable. In other situations, no activity indicator may provide a better user experience. There is now a configuration option for Activity Indicator: Progress Bar (default), Spinner (legacy), or None.

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:

Swipe Navigation 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 User Interaction has been enabled in User Interface Options.

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.

Home Button:

The Home Button functions similar to the Navigation Buttons. It provides a persistent way to navigate to the homepage URL for situations where the site itself doesn’t provide an easy way to start over. It can also be more intuitive for users than the pull-to-refresh gesture.

Hide Inactive Buttons:
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.

Minimize Buttons on Scroll:
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.

App Launch Mode

Beginning in WebFrame and WebFrame Pro 2.0.0, the app can be configured to run either as a Kiosk or as a Management app. Management mode has been designed to be used in conjunction with iCloud Sync. When connected to iCloud, one device configured in Management Mode can be used as a console to manage multiple devices configured as kiosks.

iCloud Sync Enabled

Also added to WebFrame and WebFrame Pro version 2.0.0, iCloud Sync allows you to sync settings between all devices logged into the same iCloud account. This will allow remote management of multiple devices without relying on a third-party mobile device management (MDM) product. For more details, see iCloud Sync Configuration below.

Sync Settings to iCloud on Next Run (Only available in Settings.App)

If you are syncing settings to iCloud and managing WebFrame or WebFrame Pro through the iOS Settings app, toggle “Sync Settings to iCloud on Next Run” to update settings the next time WebFrame or WebFrame Pro runs. Once settings have been updated in iCloud, WebFrame will switch this back to “Off”.

Note: When using Management Mode, this setting is not shown. This is because it is not necessary. After making setting changes, simply click “Save” on the Settings screen to update settings on iCloud.

iCloud Status (Only available in WebFrame Management Mode)

In Management Mode, iCloud Status will provide information on the status of the iCloud account logged into the device.

Erase iCloud Data (WebFrame Management Mode only)

In the event of synchronization problems, an administrator can use the “Erase iCloud Data” button in Management Mode to delete all WebFrame settings from the logged-in iCloud account.

Settings.App

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

WebFrame Management Mode

WebFrame and WebFrame Pro can also be configured to run in “Management” mode (see Management Options above).

Beginning in version 2.0.0, WebFrame and WebFrame Pro can synchronize settings with iCloud. This provides the ability to manage multiple devices remotely, provided that they are all logged into the same iCloud account.

Settings can be synchronized in one of two ways:

1. Peer-to-peer through the iOS Settings app.

2. Dedicated “Management” device running WebFrame in Management mode.

Requirements:

1) Sign into iCloud: In order to use iCloud Sync, devices must first be logged into an iCloud account. In the master view of iOS Settings, an account or a prompt to sign into an account will be shown. Ensure all devices that are to be synchronized are signed into the same account.

2) Enable iCloud Drive and WebFrame/WebFrame Pro: Not all iCloud services are required in order to sync WebFrame settings via iCloud. At a minimum, iCloud Drive and WebFrame or WebFrame Pro must be enabled in order to sync settings between devices. To ensure the proper services are enabled, go to Settings > iCloud Account > iCloud and scroll down until you see “iCloud Drive”.

Please note: You may have to enable iCloud Sync in WebFrame and run it before it will show up in the list of iCloud-enabled services (see below).

3) Enable iCloud Sync in WebFrame: Finally, in iOS Settings, scroll down to WebFrame or WebFrame Pro in the master view, then in the detail view scroll down to “Management Options” and turn on the “iCloud Sync Enabled” setting.

Synchronizing Settings:

Sync with iCloud using Settings.App

As with previous versions of WebFrame, settings can be managed using the iOS Settings app. However, if iCloud Sync is enabled, after changes are made, the “Sync Settings to iCloud on Next Run” setting should be toggled to the “On” position. The next time WebFrame runs, any setting changes will be applied locally and synchronized to iCloud. Otherwise, settings will only be applied locally, which will then be overridden by the existing iCloud settings.

Sync with iCloud using WebFrame Management Mode

When using Management Mode, the “Sync Settings to iCloud on Next Run” setting is not present because it is not required. After making setting changes then clicking the “Save” button, settings will be applied both locally and to iCloud.

Erase iCloud Data

In the event that there are synchronization issues between devices, the “Erase iCloud Data” button in the Management mode screen will erase all settings from iCloud.

Caveats and Warnings

WebFrame is entirely dependent upon iCloud for synchronization timing and reliability. . If iCloud services are experiencing performance or other issues, it could impact WebFrame setting synchronization.

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:

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.clear_cache_on_launch_enabled (Bool):
  Clears browser cache when the app launches.
  Default value: True

• com.wireframerate.webframepro.third_party_cookies_enabled (Bool):
  Enabled cross-domain, third-party cookies to be persisted.
  Default value: False

• com.wireframerate.webframepro.custom_url_scheme_enabled (Bool):
  Enables the “webframepro:htps://…” custom URL scheme.
  Default value: False

• 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.block_cookies_enabled (Bool):
  Enable/disable blocking tracking cookies.
  Default value: False

• com.wireframerate.webframepro.block_content_enabled (Bool):
  Enable/disable blocking tracking content/scripts.
  Default value: False

• com.wireframerate.webframepro.block_custom_enabled (Bool):

  Enable/disable custom content blocking rules defined in custom-filters.json.
  Default value: False

• 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.scroll_pan_enabled (Bool):
  Enable/disable vertical scroll and horizontal pan gestures.
  Default value: True

• com.wireframerate.webframepro.zoom_enabled (Bool):
  Enable/disable pinch and double-tap zoom gestures.
  Default value: True

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

• com.wireframerate.webframepro.print_enabled (Bool):
  Enable/disable printing from HTML window.print().
  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.activity_indicator_option (String):
  Configures the activity indicator displayed when a page is loading. 0 for progress bar, 1 for spinner, and 0 for no activity indicator.
  Default value: 0

• 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 Back and Forward Smart Navigation Buttons.
  Default value: False

• com.wireframerate.webframepro.home_button_enabled (Bool):
  Enable/disable Home Smart Navigation Button
  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.clear_cache_enabled</key>
	<true/>
	<key>com.wireframerate.webframepro.clear_cache_on_launch_enabled</key>
	<true/>
        <key>com.wireframerate.webframepro.third_party_cookies_enabled</key>
        <false/>
	<key>com.wireframerate.webframepro.custom_url_scheme_enabled</key>
	<false/>
	<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.block_cookies_enabled</key>
	<false/>
	<key>com.wireframerate.webframepro.block_content_enabled</key>
	<false/>
	<key>com.wireframerate.webframepro.block_custom_enabled</key>
	<false/>
	<key>com.wireframerate.webframepro.idle_timeout_enabled</key>
	<true/>
	<key>com.wireframerate.webframepro.idle_timeout_seconds</key>
	<integer>300</integer>
	<key>com.wireframerate.webframepro.user_interaction_enabled</key>
	<true/>
	<key>com.wireframerate.webframepro.scroll_pan_enabled</key>
	<true/>
	<key>com.wireframerate.webframepro.zoom_enabled</key>
	<true/>
	<key>com.wireframerate.webframepro.javascript_popups_enabled</key>
	<true/>
	<key>com.wireframerate.webframepro.print_enabled</key>
	<true/>
	<key>com.wireframerate.webframepro.full_screen_option</key>
	<integer>0</integer>
	<key>com.wireframerate.webframepro.safe_area_color</key>
	<string>#000000</string>
        <key>com.wireframerate.webframepro.activity_indicator_option</key>
        <integer>0</integer>
	<key>com.wireframerate.webframepro.pull_to_refresh_action</key>
	<integer>1</integer>
	<key>com.wireframerate.webframepro.swipe_navigation_enabled</key>
	<true/>
	<key>com.wireframerate.webframepro.navigation_buttons_enabled</key>
	<true/>
	<key>com.wireframerate.webframepro.home_button_enabled</key>
        <true/>
        <key>com.wireframerate.webframepro.navigation_buttons_autohide</key>
	<true/>
	<key>com.wireframerate.webframepro.navigation_buttons_minimize</key>
	<true/>
</dict>

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 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.

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

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:

• Sample PDF File

• Sample Keynote File

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.

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:

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.

Beginning in version 2.1.0, WebFrame Pro can be configured to use files stored locally on device for the homepage URL. This allows for offline use of local html files, offline web archives, documents, etc. Local file storage can be managed with the Files app, AirDrop, or if the device is physically connected to a Mac, through Apple Configurator or Finder. WebFrame Pro can only locate files that are stored in the local WebFrame Pro directory, for example: "On My iPad\WebFrame Pro" or "On My iPhone\WebFrame Pro".

NOTE: THE “WebFrame Pro” FOLDER MUST BE CREATED BY THE APP. INSTALL AND RUN WebFrame Pro AND THE FOLDER WILL BE AUTOMATICALLY CREATED.

Files App

1. When saving files from other apps, select the "Save File To..." action from the share sheet and save the file(s) to the "WebFrame Pro" directory.

2. If files have already been saved to another location, from the Files app you can

   • Either long-press on a file and choose "Copy" or "Move" from the popup menu, or choose "Select", select file(s) then choose "Move" from the bottom menu bar.

   • Browse to the local device and select the WebFrame or WebFrame Pro directory as the destination.

AirDrop

1. From Finder on the Mac, select the file or files you would like to use for WebFrame Pro, select "Share\AirDrop" from the right-click (Control-click) menu or "Go" menu.

2. From the AirDrop dialog, select the desired device.

3. On the target device, an AirDrop dialog will be displayed. Choose "Open with Files" and save the file(s) to the WebFrame Pro directory.

Apple Configurator

1. With a target device connected to a Mac, open Apple Configurator.

2. Select the device.

3. Right-click (or Control-click) on the device and choose "Add\Documents". Alternatively, you can choose "Add\Documents" from the "Actions" menu.

4. Select "WebFrame Pro" as the destination then click "Choose".

5. Select the file(s) to copy, then click "Add" to complete.

Finder

1. With a target device connected to a Mac, select the device in the "Locations" section of the Finder Sidebar.

2. From the menu bar, select "Files".

3. From a second Finder window, drag the desired files to the "WebFrame Pro" folder and allow them to sync to the device.

If you are deploying kiosks into an environment with unreliable, limited, or no internet connectivity, you may choose to save a site for offline use. Safari provides the ability to save a page as a PDF or Web Archive file.

Create a PDF

From Safari on iOS 12:

1. Load the webpage you would like to cache.

2. Tap the Share icon on the navigation bar.

3. From the bottom row of options on the share sheet, choose "Create PDF".

4. A PDF will be loaded into a Preview window. From that window, tap the Share icon.

5. From the bottow for of the share sheet, choose "Save to Files".

6. Browse to "On my iPad/iPhone" and select the "WebFrame Pro" folder.

7. Tap "Add"

From Safari on iOS or iPadOS 13:

1. Load the webpage you would like to cache.

2. Tap the Share icon on the navigation bar.

3. Tap "Options >" item on top row of share sheet.

4. Choose "PDF" as the "Send As" option.

5. Tap "Back" button.

6. Tap "Save to Files" from the share sheet.

7. Browse to "On my iPad/iPhone" and select the "WebFrame Pro" folder.

8. Tap "Save"

From Safari on macOS:

1. Load the webpage you would like to cache.

2. From the "File" menu, choose "Export as PDF...".

3. Enter a file name and location to save the PDF.

4. Click "Save" button.

5. Transfer the file to an iOS/iPadOS device using one of the methods outlined above.

Create a Web Archive

From Safari on iOS 12:

*iOS 12 Safari cannot create a web archive, but WebFrame on iOS 12 can still load a web archive created on macOS or iOS/iPadOS 13.

From Safari on iOS or iPadOS 13:

1. Load the webpage you would like to cache.

2. Tap the Share icon on the navigation bar.

3. Tap "Options >" item on top row of share sheet.

4. Choose "Web Archive" as the "Send As" option.

5. Tap "Back" button.

6. Tap "Save to Files" from the share sheet.

7. Browse to "On my iPad/iPhone" and select the "WebFrame Pro" folder.

8. Tap "Save"

From Safari on macOS:

1. Load the webpage you would like to cache.

2. From the "File" menu, choose "Save as...".

3. Enter a file name and location to save the archive.

4. For "Format", select "Web Archive".

5. Click "Save" button.

6. Transfer the file to an iOS/iPadOS device using one of the methods outlined above.

Once content has been copied or created on the device, it can be used as the default homepage for WebFrame Pro. Please note that filenames should NOT include spaces or special characters. Also note that the "WebFrame Pro" folder is considered the root folder or any URL. If you create any subfolders, the URL should start with the subfolder name. For example, to set this page as homepage, set the WebFrame Pro Homepage URL to:

file:///readme.html

If you use subdirectories, file path should begin with the first directory in "WebFrame Pro", for example:

file:///folder/subfolder/default.html

Please note that there are three forward slash characters ('/') following "file:". File file names should be limited to alpha-numeric characters and should not include whitespaces or other special characters.

To configure WebFrame:

1. Open iOS/iPad OS Settings app.

2. Scroll to and tap "WebFrame" or "WebFrame Pro"

3. Tap "Homepage URL:"

4. Type the URL for the file in the format of "file:///readme.html" (without the quotation marks). Please note that the extention for a Web Archive file is ".webarchive".

5. Tap "Return" keyboard key.

6. Launch WebFrame Pro.

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.

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

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

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.