TIP

Phone: 800.615.4296 | Support@vablet.com | vablet.com

The vablet platform is the most secure and functional solution for file access and content management on mobile devices. This guide will show you how to integrate HTML content into your vablet experience. Here is a snapshot of 3 of the more common options for integrating HTML:

HTML Integration

Custom Brand Launch• Create quick links or an active ToC to specific files• Go straight to your current catalog or pricing sheet• Run a product demo video instantly

Option 1

• Display and navigate a complete website within vablet (HTML, CSS, JAVASCRIPT, etc...)

• Email results with our email snapshot• Deliver a rich HTML experience offline (great for trade shows, public areas, etc...)

Option 2 Open HTML(5) Website within vablet

• Dynamic realtime web content• Open an online calculator or web entry form

• Incorporate web content into your sales meeting (weather, stocks, realtime content...)

* BONUS! Analytics for the viewing of this file is available, too!

Option 3

Whether your content is accessed by customers, vendors or internal departments, the Custom HTML options offer the look and feel of a custom app - and at an affordable cost that will offset your print budget!

Display Live HTML

Phone: 800.615.4296 | Support@vablet.com | vablet.com

Option 1: Open by Folder Name<a href="VabletGeneral://openFolder/DEMO%20VIDEOS">Option 2: Open by Folder Name and Return<a href="VabletGeneral://openFolder/DEMO%20VIDEOS?backFolderGoesToFileWithName=FileTitle"> ! (This option will change the ‘Home’ folder to ‘Back’ and return the ! user to the file specified in ‘File Title’.)Option 3: Return to Launch Page<a href=”VabletGeneral://home">Option 4: Open by File ID<a href="VabletGeneral://openFile/28324">Option 5: Open by File ID and Return to Invoking Page<a href="VabletGeneral://openFile/28324?returnsToCallerOnClose=true">Option 6: Open by File Title<a href=”VabletGeneral://openFileName/testname">Option 7: Open by File Title and Return to Invoking Page<a href="VabletGeneral://openFileName/testname?returnsToCallerOnClose=true">

How it Works:Here is a step by step guide to implement your HTML as a Custom Brand experience when vablet is launched.

Step1

Step 2Upload the Content/Media

Login to your account on the Admin console (Admin.vablet.com). Upload the content/files you wish to have accessible in your Custom Launch design.

Sample Code:• Insert the VRL ID of the file or folder name into code.• This formula is case-sensitive. If there is a space in

the title of the file or folder, insert %20.• Do not directly reference an external URL via the <a

href> tag: i.e. <a href=”www.mycompany.com”> See the TIP below for further instruction.

• If you are authoring an HTML file that opens another piece of media in vablet and you wish it to return back to the current HTML page vs the Custom Launch page, make note of Option 4 & 6

Design Your Launch Page w/Custom Buttons and Functionality Create a layout including custom buttons and a background design according to your brand scheme. Determine which files your device users will need access to when the app is launched.

02/13

Sample buttons may include quick links to pricing sheets, a video demo file, charts, favorites folder or a web page, such as your homepage.

Format the HTML to Work with vabletLink each button from your custom layout direct to a individual file or jump to a folder with multiple files, using standard HTML.There is a file ID for each file when saved to the vablet Console. Open the file from the Media Library and you’ll find the VRL code toward the bottom of your file settings. Follow the sample code below to link your custom buttons to a file or folder.

TIP

Custom Launch

Upload the HTML File and Push to the Device

Step 3

Need to make changes to a file?Simply go to Edit the Web Archive file from the Media Library and you’ll see an option to replace the file, toward the bottom of the screen.

Save your HTML as a Web Archive Page (please use Safari) and upload the file to your vablet account using the Media Uploader on the Admin Console. Then push the media to a device, or set it as default for Devices or Groups. Check out some of our tips and tricks on page 4 of this guide!

Step 4

Phone: 800.615.4296 | Support@vablet.com | vablet.com

02/13

<html><head><meta http-equiv="refresh" content="1;url=http://www.betherebedtimestories.com/bookbycategory.aspx?catid=1"></head><body> This page will only be viewable when the device is connected to the Internet. </body></html>

If you plan to display live web content within vablet, your device must have Wi-Fi/3/4G access. Include the following syntax, in case the device does not have a Wi-Fi signal:

Custom HTML

Opening HTML(5) Website within vabletLeverage your existing HTML and integrate it into your vablet sandbox. Great for a rich, multi-media sales experience - access an online web form such as a cost calculator or a project template.

How it Works:1. Zip up the website content and rename the extension to .zhtml2. Make sure the home page is called: index.html3. When uploaded to the console, you can establish settings and permissions just like any other file.

When the device user opens this file, it will unzip and launch.That's it!

Option 2

Option 3

<form id="emailForm" onsubmit="return submitEmail();">Enter a single email to send the test email to: <input type="text" id="emailInput">    <input type="submit" value="Submit"></form>

Display Live HTML

If you want to enable your HTML to send an email, such as data from a webform, results from a survey, cost analysis from a calculator, then include this code:

BONUS HTML Email Feature!

TIP Know Your Linkage.If you plan to create links within your HTML that invoke a file on your vablet account, then use the syntax in Step 3 on page 2, above, to reference your content.

Phone: 800.615.4296 | Support@vablet.com | vablet.com

Option2

Now you’re ready to test your Custom Launch page! Restart vablet on the device to see if your assigned Startup Media appears and if the links work.There are two options to implement your Custom Launch page: 1. Startup Media individually, or2. Click on ‘Setup Default Settings’ to assign the Web Archive file as default for all

Devices or by Groups.

Locking the Web Archive File Locking your Startup Media [Web Archive Page] is a setting that enables you to restrict access to just the Custom (HTML) Launch file and the links associated. If any of your links allow access to the vablet folder structure, then the Home symbol at the top of the screen will always return the user to the designated Startup Media (i.e. HTML Launch page).If this setting is ‘Off’ then users will be allowed to browse the vablet content management system, rather than restricting them to the HTML Launch page.

TIP

Option3

02/13

Keep in mind:• The smaller the web archive file the faster the page will load.• The dimensions for the design of the HTML file should be 1024x768 for landscape display or

768x1024 for portrait.• It’s important to test the orientation of your layout so that it is flexible to display proportionally for

either portrait or landscape, depending on how the device user is holding the device.

Option 1

Key Settings for Deployment

Activate the Launch Page for a DeviceGo to Device Library and select your test device, then select your HTML or Web Archive File as the Startup Media.

Contact a Product Specialist for One on One Support, Anytime!Phone: 800.615.4296. or Email: Support@vablet.com