WebFrame 1.2.0 Announce Header Image.png

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.

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.

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

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:

Safe Area: Default setting. This value will enforce safe area constraints.
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.
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.

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: