Custom Navigation Bar Settings
Supported In:
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.
Note that either the Custom Navigation Bar or the Standard Navigation Bar can be used. While it is not possible to blend the two, you can use our Custom Link Commands to mimic certain Kiosk Pro actions like returning to the homepage or refreshing the current page.
In this article
Enable Custom Navigation Bar
Supported in:
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:
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:
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:
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:
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:
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:
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:
To be shown, each label must be paired with a matching link. Links can direct to either remote or local content.
Default: [empty]
Examples
- https://www.kioskgroup.com
- about.html
- folder/document.pdf
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:
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