1. Home
  2. How to Add Custom Toolbar to SureFox Kiosk Browser?

How to Add Custom Toolbar to SureFox Kiosk Browser?

KB ID: 42G2102543
Views: 163
Updated: June 2021

SureFox Lockdown Browser supports toolbar to perform quick actions. You can enable a default toolbar or add a customized toolbar of your own. You can enable and dock the toolbars on the top, bottom, left, and right sides of the SureFox Home Screen. You can also use SureFox Javascript APIs to create shortcuts to your favorite websites and applications.

vertical_horizontal_toolbar

How to enable toolbar in SureFox:

1. Access SureFox Settings

2. Tap on Display Settings

3. Scroll down and tap on Toolbar Settings.

4. Tap Enable Toolbars to display toolbar options.

5. Now select the toolbar location, toolbar type, and the size to be displayed. Tap Done

Note: You can disable a toolbar by selecting None from the toolbar type.

toolbar settings

6. To display a custom toolbar, you can select the Custom option and browse the HTML file with the custom toolbar layout.

Below are the sample HTML codes for the default SureFox Toolbar. Please customize it to suit your requirements.

HTML Code for Default Horizontal Toolbar:

horizontal_toolbar_final
<html>
<head>
<style type="text/css">
#container
{
width: 460px;
height: auto;
text-align: left;
display: inline-block;
vertical-align : middle;
}
#container span
{
 height : 32px;
 width : auto;
}
body
{
background-color : #222222;
text-align: center;
}
input
{
margin-top : 6px;
width: 200px;
vertical-align : top;
}
body
{
margin : 2px;
}
</style>
<script type="text/javascript">
function onClickGo()
{
 var url = document.getElementById('navurl').value;
 if(url.lastIndexOf('http://', 0)==0 || url.lastIndexOf('https://', 0)==0 || url.lastIndexOf('file://', 0)==0)
 {
 window.surefox.load(url);
 }
 else
 {
 window.surefox.load('http://'+url);
 }

}
</script>
</head>
<body>
<div id="container">
<span onclick="window.surefox.home();"><img src='./home.png' title='Go to home'></span>
<span onclick="window.surefox.back();"><img src='./backward.png' title='Go back'></span>
<span onclick="window.surefox.forward();"><img src='./forward.png' title='Go forward'></span>
<span onclick="window.surefox.refresh();"><img src='./refresh.png' title='Refresh page'></span>
<span onclick="window.surefox.stop();"><img src='./stop.png' title='Stop loading'></span>
<span><input type="text" id="navurl" /></span>
<span onclick="onClickGo();"><img src='./go.png' title='Go to URL'></span>
<span onclick="window.surefox.openInNewTab('http://www.google.com');"><img src='./google.png' title='Go to google'></span>
</div>
</body>
</html>

HTML Code for Default Vertical Toolbar:

vertical_toolbar_final

<html>
<head>
<style type=”text/css”>
html
{
color:#333;
height: 100%;
vertical-align: middle;
padding:0;
margin:0;
}

body
{
height: 100%;
vertical-align: middle;
background-color : #222222;
padding:0;
margin: 25px 10px 25px 0;
}
img
{
padding : 3px;
height: 51px;
width: 51px;
}

ul {
height: 100%;
margin: 0 0 5px 0;
padding: 0 0 2px 0;
list-style-type: none;
vertical-align: middle;
}

</style>
<script type=”text/javascript”>
function launchMarket()
{
window.surefox.launch(‘android.intent.action.MAIN’, ‘android.intent.category.LAUNCHER’, ‘com.android.vending’, ‘com.android.vending.AssetBrowserActivity’);
}

function launchContacts()
{
window.surefox.launch(‘android.intent.action.MAIN’, ‘android.intent.category.LAUNCHER’, ‘com.android.contacts’, ‘com.android.contacts.activities.PeopleActivity’);
}

function launchPhone()
{
window.surefox.launch(‘android.intent.action.MAIN’, ‘android.intent.category.LAUNCHER’, ‘com.android.contacts’, ‘com.android.contacts.activities.DialtactsActivity’);
}
</script>
</head>
<body>
<ul>
<li><img onclick=”launchMarket();” src=”./market.png” alt=”GooglePlay” /></li>
<li><img onclick=”launchContacts();” src=”./contacts.png” alt=”contacts” /></li>
<li><img onclick=”launchPhone();” src=”./phone.png” alt=”phone” /></li>
</ul>

</body>
</html>

7. Once you have finished configuring the toolbar, tap on Done to save the settings.

8. Toolbar will now be displayed on your SureFox Home Screen

To know more about other features of SureFox, click here.
For more details on our products, click here 
If you need further assistance, please submit a ticket here

Read more about our products: