Custom Navigation Bar Settings

Fully customize the graphics and functionality of the navigation bar shown in Kiosk Pro. Set the height, define a background image and display up to eight icons and associated links.

Enable Custom Navigation Bar

Supported in:

Kiosk Pro Plus and Enterprise

This feature gives you the ability to fully customize the graphics and functionality of the navigation bar. Set the height, define a background image and display up to eight icons (.png on transparent background so these can include text, an image or both) and associated links.

Default: Off

You can also define a highlight "up-state" background and/or icon image to display on specific pages.

Image files must be stored locally on the device in the Kiosk Pro documents folder and cannot be accessed from a remote server.

Note: If this setting is enabled, the standard navigation bar and any custom links set will not be shown.

Values for Remote Settings Control & Managed App Configuration

Key showCustomNavigationBar
Key Type boolean
Default Value false

Custom Navigation Bar Height

Supported in:

Kiosk Pro Plus and Enterprise

Define the height of the touch area available for your custom navigation bar graphics. 

Default: 60
Unit of Measurement: points

This is set in points, so if you're using an iPad with a Retina screen, your background and icon images should be twice the height of this. For example, for the default of 60pt, your button would need to have a height of 120px on a Retina screen.

Values for Remote Settings Control & Managed App Configuration

Key navigationBarHeight
Key Type integer
Default Value 60


Background Image

Supported in:

Kiosk Pro Plus and Enterprise

This is the default background image of your custom navigation bar. The width of the image should match the total width in pixels of the device you are using.

Default: [empty]

Values for Remote Settings Control & Managed App Configuration

Key backgroundImage
Key Type string
Default Value [empty]


Highlight Background Image

Supported in:

Kiosk Pro Plus and Enterprise

This is the image for the highlighted up-state for the background of the custom navigation bar. 

Default: [empty]

The dimensions of the Highlight Background Image should match the dimensions of the regular Background Image. Only the area that matches the highlight folder(s) of a specific link will be shown.

Values for Remote Settings Control & Managed App Configuration

Key highlightBackgroundImage
Key Type string
Default [empty]


Base Image

Supported in:

Kiosk Pro Plus and Enterprise

This is the image representing the icon and/or text associated with a link in the custom navigation bar. The image should be saved as a .png file with a transparent background.

Default: [empty]

The image used should match the height set as the Navigation Bar Height. Since the Navigation Bar Height is set in points, the Base Image height should be the same number on a non-Retina screen or be twice the amount on a Retina screen.

Kiosk Pro automatically spaces icons by dividing the number of links by the width of the screen resolution. For example, a 9.7-inch iPad in landscape orientation (2048 x 1536) with all eight links set would make the touch area for one button 256px wide. If the number is not a whole number, round to the nearest whole number (i.e. seven links would be 292.57, round to 293). Link 1 will be displayed furthest to the left of the screen with Link 2 to its right and so on.

If you want the navigation icons spaced apart further, you can use one or more fully transparent .pngs set as extra base images to provide spacing. For example, if your design looked like this:

you could make this happen by creating seven groups of links - setting Link 1 as your 'paint it' icon, Link 2 as an empty 'blank.png' the same size, and repeat:

Values for Remote Settings Control & Managed App Configuration

Key for Group 1 Base Image baseImageLink1
Key for Group 2 Base Image baseImageLink2
Key for Group 3 Base Image baseImageLink3
Key for Group 4 Base Image baseImageLink4
Key for Group 5 Base Image baseImageLink5
Key for Group 6 Base Image baseImageLink6
Key for Group 7 Base Image baseImageLink7
Key for Group 8 Base Image baseImageLink8
Key Type string
Default [empty]


Highlight Image

Supported in:

Kiosk Pro Plus and Enterprise

This is the image file representing highlighted up-state for the Base Image of a link. It will be shown when Kiosk Pro determines a match between the loaded URL currently being viewed and the Highlight Folder URL.

Default: [empty]

The dimensions of the Highlight Image should match the dimensions of the regular Base Image and the image should be saved as a .png file with a transparent or matching background.

Values for Remote Settings Control & Managed App Configuration

Key for Group 1 Highlight Image highlightImageLink1
Key for Group 2 Highlight Image highlightImageLink2
Key for Group 3 Highlight Image highlightImageLink3
Key for Group 4 Highlight Image highlightImageLink4
Key for Group 5 Highlight Image highlightImageLink5
Key for Group 6 Highlight Image highlightImageLink6
Key for Group 7 Highlight Image highlightImageLink7
Key for Group 8 Highlight Image highlightImageLink8
Key Type string
Default [empty]


Label for VoiceOver

Supported in:

Kiosk Pro Plus and Enterprise

This label text will be read when using the iOS/iPadOS VoiceOver feature. If your kiosk will have VoiceOver available, entering text here will allow users with visual impairments to know what the link is for.

Default: [empty]

Values for Remote Settings Control & Managed App Configuration

Key for Group 1 Label for VoiceOver kp_customNavBar_labelForVoiceOver_1
Key for Group 2 Label for VoiceOver kp_customNavBar_labelForVoiceOver_2
Key for Group 3 Label for VoiceOver kp_customNavBar_labelForVoiceOver_3
Key for Group 4 Label for VoiceOver kp_customNavBar_labelForVoiceOver_4
Key for Group 5 Label for VoiceOver kp_customNavBar_labelForVoiceOver_5
Key for Group 6 Label for VoiceOver kp_customNavBar_labelForVoiceOver_6
Key for Group 7 Label for VoiceOver kp_customNavBar_labelForVoiceOver_7
Key for Group 8 Label for VoiceOver kp_customNavBar_labelForVoiceOver_8
Key Type string
Default [empty]

Link

Supported in:

Kiosk Pro Plus and Enterprise

To be shown, each label must be paired with a matching link. Links can direct to either remote or local content.

Default: [empty]

Examples

You can also use our Custom Link Commands to mimic certain Kiosk Pro actions like returning to the homepage or refreshing the current page.

Values for Remote Settings Control & Managed App Configuration

Key for Group 1 Link link1
Key for Group 2 Link link2
Key for Group 3 Link link3
Key for Group 4 Link link4
Key for Group 5 Link link5
Key for Group 6 Link link6
Key for Group 7 Link link7
Key for Group 8 Link link8
Key Type string
Default [empty]


Highlight Folder

Supported in:

Kiosk Pro Plus and Enterprise

This is the URL Kiosk Pro will check when determining whether to show the Highlight Background Image and/or Highlight Image for the currently displayed URL.

Default: [empty]

This setting can be used with URLs at the domain level, folder level or page level. For example, if set to "website.com/folder":

  • website.com = highlight state is not shown
  • website.com/folder = highlight state is shown
  • website.com/folder/page.html = highlight state is shown
  • website.com/page.html = highlight state is not shown

Values for Remote Settings Control & Managed App Configuration

Key for Group 1 Highlight Folder highlightFolderLink1
Key for Group 2 Highlight Folder highlightFolderLink2
Key for Group 3 Highlight Folder highlightFolderLink3
Key for Group 4 Highlight Folder highlightFolderLink4
Key for Group 5 Highlight Folder highlightFolderLink5
Key for Group 6 Highlight Folder highlightFolderLink6
Key for Group 7 Highlight Folder highlightFolderLink7
Key for Group 8 Highlight Folder highlightFolderLink8
Key Type string
Default [empty]

Change Log

  • Included in Enterprise in version 3.0. Added to Plus in version 9.4 along with support for custom VoiceOver label

Still stuck? How can we help? How can we help?