We’re happy to announce WebFrame Pro v3.1.0, now available on the iOS App Store. We have some exciting new features and a couple of small refinements that we think you will love.

Augmented Reality

Create an infinite showroom, gallery, or display for 3D objects with Augmented Reality. Simply link to a .USDZ or .Realty file on your webpage. When a user taps on the link/image, it will be rendered in an AR Quick Look window that will guide the user through calibrating the screen and anchoring the image.

On your webpage, use the following code to host a 3D model and preview:

<a rel="ar" href="/path-to-model/model.usdz">
  <img class="image-model" src="/path-to-preview/preview.png" alt="" />
</a>

Open Apps by URL

We have added a new setting in WebFrame Pro that enables launching 3rd party apps using app-specific URL schemes. For example, on your webpage, you can create a link open the iOS Shortcuts app by adding the following:

<a href="shortcuts:">Open Shortcuts App</a>

Note: App URLs will not open 3rd party apps when a device is configured in Guided Access Mode, Single App Mode, or Autonomous Single App Mode. This option is disabled by default.

Session Options

We have added the ability to configure WebFrame Pro to launch with a new session or resume a previous session when launching after a device is restarted or when the app is completely closed and restarted (for example, after a force-quit). The default option is to start a new session. Behavior during app switching remains the same (resume current session).

Launch from WebClip Setting and Default Behavior Change

In version 3.1.0, we have changed the default behavior regarding Web Clips. Launching WebFrame Pro from a Web Clip is now always enabled and the enabled/disabled toggle has been removed from settings. After consideration, we felt that having this as a configuration option was redundant since an administrator would have to configure and install a Web Clip in the first place.

We are pleased to announce the availability of WebFrame and WebFrame Pro version 1.2.0.

This version adds the capability to customize full screen options on iPhone X, Xs, Xs Max, and Xr. Both WebFrame and WebFrame Pro can be configured locally in iOS Settings. WebFrame Pro can also be managed remotely through AppConfig-compliant management solutions such as JAMF, MobileIron, VMWare AirWatch, etc.

Get WebFrame Kiosk 1.2.0 here:

Get WebFrame Pro Kiosk 1.2.0 Here:

---

Locally Managed Options

Safe Area Frame Color

If you have used either WebFrame or WebFrame Pro on an iPhone model listed above, you may have noticed whitespace at the top of the screen.

Note the whitespace at the top of the screen above the safe area constraints.

That space is the result of Apple’s Safe Area constraints. These constraints ensure that no critical elements (branding, controls, etc.) of an app or webpage are obscured by the FaceID camera array or the rounded corners of the device.

For most use cases, we recommend leaving safe area constraints enabled. However, to improve branding or visual aesthetics of your kiosk implementation, we have added the ability to customize the color of the screen outside of the safe area.

If you are managing WebFrame or WebFrame Pro locally, go to the appropriate item in the iOS Settings app and scroll down to the “Safe Area Color…” setting under User Interface Settings. The value is specified as a six-digit hex color code, for example 000000 for black or ffffff for white, etc.

The most universally-applicable approach is to simply configure a black frame (which is the new default setting) as this will allow the screen above the safe area to blend seamlessly with the FaceID camera array and rounded corners.

WebFrame with black safe area frame.

You may prefer to use a color associated with the brand or the page/app being used as a kiosk. For example, if using the Starbucks progressive web app as a kiosk, you could specify the hex value for the green of Starbucks’ logo (0D6343).

Starbucks PWA framed in Starbucks’ green.

Full Screen Option

Many modern websites have been updated to accommodate safe area without relying on app constraints. Other sites may use full screen imagery or otherwise look best with a true full screen experience. For these configurations, we have added an additional setting, “Full Screen Option”. You can select one of three possible values for Full Screen Option:

1. Safe Area: Default setting. This value will enforce safe area constraints.

2. Full Screen: This value will remove safe area constraints and allow WebFrame or WebFrame Pro to use the full screen of the device. Websites that accommodate safe area will function normally.

3. Full Screen (Modify Page Viewport): This value will remove safe area constraints as well. However, it will also modify the viewport settings of the underlying page to override safe area. This setting is only recommended for advanced, highly-controlled uses.

Full Screen enabled. Notice that page initially loads in safe area but as user scrolls, the page occupies the full screen.

Demonstration of New Features (Locally Managed)

Here is a video demonstration of the new features being configured locally in Settings:

---

Remotely Managed Options

If you are remotely managing WebFrame Pro with an AppConfig-compliant management product, two new keys have been added to the configuration profile:

<dict>
	<key>com.wireframerate.webframepro.safe_area_color</key>
	<string>#000000</string>
	<key>com.wireframerate.webframepro.full_screen_option</key>
	<integer>0</integer>
</dict>

The safe area color option is a string specifying the same six-digit hex color code as with local settings. Please note, though, that it has a hashtag (or pound sign) in front of the number. This is required and ensures that value is correctly handled despite differences in EMM products.

Full screen option is an integer value. Set 0 for safe area constraints, 1 for full screen, and 2 for full screen with viewport override.

For a full list of managed key-value pairs, click here.

Demonstration of New Features (Remotely Managed)

Here is a video overview and demonstration using JAMF Pro to remotely configure the new options for WebFrame Pro: