{"id":73,"date":"2016-05-19T12:51:57","date_gmt":"2016-05-19T12:51:57","guid":{"rendered":"http:\/\/codiumlabs.com\/blog\/?p=73"},"modified":"2016-05-21T06:41:54","modified_gmt":"2016-05-21T06:41:54","slug":"how-to-make-ipad-kiosk-from-website","status":"publish","type":"post","link":"https:\/\/codiumlabs.com\/blog\/how-to-make-ipad-kiosk-from-website\/","title":{"rendered":"How to Make an iPad Kiosk from a Website"},"content":{"rendered":"<p>In this article, we will explain how to make an offline-capable web kiosk using an iPad and any existing website.<\/p>\n<p><a href=\"\/ios\/offline-kiosk\/\">Offline Kiosk for iPad<\/a> allows you to make interactive, full-featured kiosks using any website\u2019s content. What it means for your company&#8217;s bottom line is that now you don\u2019t have to create separate content specially for your kiosks, or pay outside contractors to do it. Best of all, the resulting kiosks can run without a network connection of any kind. That makes Offline Kiosk a truly unique and special app.<\/p>\n<p>Before we get started, check out this preview video which shows how we made our own website kiosk in a little under 30 seconds:<\/p>\n<div onclick=\"play();\" class=\"vidwrap\" id=\"vidwrap\" style=\"height:465px;width:620px;background: black url('http:\/\/codiumlabs.com\/blog\/wp-content\/uploads\/2016\/05\/kiosk-video-preview.png') no-repeat center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;overflow:hidden;cursor:pointer;\"><\/div>\n<p><script type=\"text\/javascript\">function play(){document.getElementById('vidwrap').innerHTML = '<iframe loading=\"lazy\" width=\"620\" height=\"465\" src=\"http:\/\/www.youtube.com\/embed\/HWE_bpZbn8k?vq=hd1080&#038;modestbranding=1&#038;autoplay=1&#038;rel=0\" frameborder=\"0\"><\/iframe>';}<\/script><\/p>\n<p>To make your own website iPad kiosk, you will need the following:<\/p>\n<ol>\n<li>iPad device running iOS 8.0 or later with at least 1 GB of available storage.<\/li>\n<li>Reliable Wi-Fi connection, suitable for downloading 1-2 GB of content.<\/li>\n<li>Website running on a web server. (Offline Kiosk app allows you to upload local content from desktop computer via USB\/Lightning connection but in this article we\u2019ll only use kiosk content downloaded from a website.)<\/li>\n<\/ol>\n<h4>STEP 1: Check Device Storage<\/h4>\n<p>Before proceeding with making a web kiosk, we recommend checking your iPad storage. Remember, your iPad must have enough\u00a0available storage for\u00a0storing and downloading the entire website. While it is difficult to predict exactly how much storage the kiosk will need for\u00a0a specific website, we recommend having at least 1GB of storage available for a small to medium website, and up to 4 GB for a large website, including the embedded videos.<\/p>\n<p>To check available storage on iOS device, tap Settings app on home screen &gt; General &gt; Storage &amp; iCloud Usage.<\/p>\n<h4>STEP 2: Connect Device to a Reliable Wi-Fi Network<\/h4>\n<p>Because a download of the entire website takes time and bandwidth, we don\u2019t recommend using a free or guest Wi-Fi network or a cellular connection. Use your office or home Wi-Fi instead. Before proceeding, make sure that the device is actually connected to a correct Wi-Fi network.<\/p>\n<h4>STEP 3: Set up the Kiosk<\/h4>\n<p>It is time now to create a new kiosk for your website.<\/p>\n<p>1. Tap \u201cOffline Kiosk\u201d app on device home screen. (If you haven\u2019t installed it yet, get it from <a rel=\"nofollow\" href=\"https:\/\/itunes.apple.com\/us\/app\/offline-kiosk\/id1085540867?ls=1&#038;mt=8\">the app store<\/a>.)<br \/>\n2. Tap \u201c+\u201d button on the toolbar &gt; \u201cCreate Kiosk\u201c. Note that a new browser view pops up.<br \/>\n3. Tap the address bar on top of the browser view.<br \/>\n4. Type or paste the URL of your website.<br \/>\n5. Tap \u201cGo\u201d on keyboard. The website will load into the browser.<br \/>\n6. Once the website loads, tap the \u201cCreate Kiosk\u201d button.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/codiumlabs.com\/blog\/wp-content\/uploads\/2016\/05\/kiosk-step1.png\" alt=\"New kiosk in Offline Kiosk for iPad\" width=\"590\" height=\"442\" class=\"alignnone size-full wp-image-128\" srcset=\"https:\/\/codiumlabs.com\/blog\/wp-content\/uploads\/2016\/05\/kiosk-step1.png 1180w, https:\/\/codiumlabs.com\/blog\/wp-content\/uploads\/2016\/05\/kiosk-step1-300x225.png 300w, https:\/\/codiumlabs.com\/blog\/wp-content\/uploads\/2016\/05\/kiosk-step1-768x576.png 768w, https:\/\/codiumlabs.com\/blog\/wp-content\/uploads\/2016\/05\/kiosk-step1-1024x768.png 1024w\" sizes=\"auto, (max-width: 590px) 100vw, 590px\" \/><\/p>\n<p>Congratulations! You have created the first iPad kiosk for your website.<\/p>\n<h4>STEP 4: Customize the Kiosk<\/h4>\n<p>Before you press the Download Kiosk button, we recommend reviewing your kiosk\u2019s settings. If this is a very first kiosk you\u2019re creating, don\u2019t make any changes and just proceed to STEP 5 to get a feel of the overall workflow. You can always return to kiosk options and learn about individual settings later. The default settings are chosen to work well with a wide variety of websites, so normally you don\u2019t even need to change anything. That said, you can always adjust the settings if anything is not up to your preference.<\/p>\n<p>You can access all kiosk settings by tapping the \u201cKiosk Options\u201d button in the lower right corner of the screen. A balloon popover will appear on screen and display several groups of settings. We\u2019ll briefly discuss each group of settings below.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/codiumlabs.com\/blog\/wp-content\/uploads\/2016\/05\/kiosk-step2.png\" alt=\"kiosk-step2\" width=\"590\" height=\"442\" class=\"alignnone size-full wp-image-134\" \/><\/p>\n<h5>Download<\/h5>\n<p>The options in Download group contain settings related to crawling and downloading of the website. The most important setting is the number of pages. You can choose any number from 10 to 50,000. Other settings allow you to limit crawler to specific linking depth, or to a specific domain name.<\/p>\n<h5>Content &amp; Media<\/h5>\n<p>The options in Content &amp; Media group affect the features that appear in the pages. For example, you can enable or disable download of video or audio embedded in pages, or make the download agent to present itself as a Mac desktop browser instead of an iPad browser (which is useful for dealing with websites that incorrectly identify iPad as a mobile device and serve a simplified version of the website.)<\/p>\n<h5>Website Login<\/h5>\n<p>The options in Website Login group allow downloading content from secure websites that require user sign-in before they display any content.<\/p>\n<h5>Surveys &amp; Forms<\/h5>\n<p>The Surveys &amp; Forms options allow you configure the kiosk so that it accepts web form submissions. You can use web forms for conducting surveys, collecting customer sign-ups, or receiving feedback.<\/p>\n<h5>Browser<\/h5>\n<p>The options in Browser section allow you to change the way web browser looks and behaves. For example, you can hide back and forward navigation buttons, disable a progress bar, or prevent device from sleeping when it becomes idle. There\u2019s also a setting to allow browsing online.<\/p>\n<h5>Advanced<\/h5>\n<p>The options in Advanced section, as its name implies, aren\u2019t used often. You can use Advanced options to enable features that are not part of a typical website, such as offline emailing, live updates, update reminders, or push notifications.<\/p>\n<p>Now, your kiosk is ready to download some content to display while offline.<\/p>\n<h4>STEP 5: Download the Kiosk Contents<\/h4>\n<p>Kiosks that you create in Offline Kiosk app are initially empty. (That is unless you import pre-populated kiosks from another app or device. We&#8217;ll post more on that in future articles.) Your new kiosk does not contain any content at all &#8211; neither website&#8217;s content nor any other kind. To become useful, the kiosk needs to be filled with content. Luckily, Offline Kiosk iPad app comes equipped with a state-of-the-art <a href=\"\/ios\/offline-pages\/\">website crawler and downloader<\/a> which makes filling a kiosk with content a trivial task.<\/p>\n<p>To start download, tap the \u201cDownload Kiosk\u201d button. The download will immediately begin. To prevent connection interruptions, we recommend putting the iPad aside while download is in progress. We also recommend that you don\u2019t lock your device during that time, and avoid switching to other apps while the kiosk is downloading.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/codiumlabs.com\/blog\/wp-content\/uploads\/2016\/05\/kiosk-step3.png\" alt=\"kiosk-step3\" width=\"590\" height=\"442\" class=\"alignnone size-full wp-image-137\" srcset=\"https:\/\/codiumlabs.com\/blog\/wp-content\/uploads\/2016\/05\/kiosk-step3.png 1180w, https:\/\/codiumlabs.com\/blog\/wp-content\/uploads\/2016\/05\/kiosk-step3-300x225.png 300w, https:\/\/codiumlabs.com\/blog\/wp-content\/uploads\/2016\/05\/kiosk-step3-768x576.png 768w, https:\/\/codiumlabs.com\/blog\/wp-content\/uploads\/2016\/05\/kiosk-step3-1024x768.png 1024w\" sizes=\"auto, (max-width: 590px) 100vw, 590px\" \/><\/p>\n<h4>STEP 6: Launch your Kiosk<\/h4>\n<p>You&#8217;ll know that the kiosk has finished downloading when the white progress ring makes a full circle and the kiosk displays a launch button instead of the download button. The launch button displays a triangular launch symbol similar to a video play button. Tap the launch button to run your offline kiosk.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/codiumlabs.com\/blog\/wp-content\/uploads\/2016\/05\/kiosk-step4.png\" alt=\"kiosk-step4\" width=\"590\" height=\"442\" class=\"alignnone size-full wp-image-139\" srcset=\"https:\/\/codiumlabs.com\/blog\/wp-content\/uploads\/2016\/05\/kiosk-step4.png 1180w, https:\/\/codiumlabs.com\/blog\/wp-content\/uploads\/2016\/05\/kiosk-step4-300x225.png 300w, https:\/\/codiumlabs.com\/blog\/wp-content\/uploads\/2016\/05\/kiosk-step4-768x576.png 768w, https:\/\/codiumlabs.com\/blog\/wp-content\/uploads\/2016\/05\/kiosk-step4-1024x768.png 1024w\" sizes=\"auto, (max-width: 590px) 100vw, 590px\" \/><\/p>\n<p>That\u2019s all there is to it! You have made a website-powered, offline-capable iPad kiosk from an existing website. All of the website&#8217;s pages are now securely stored in device storage so your kiosk doesn\u2019t need any network connection to run. You can now put the device in airplane mode or disconnect it from all networks and the website will continue to run smoothly even though device is offline.<\/p>\n<p>Questions? Comments? <a href=\"\/support\/\">Contact us<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article, we will explain how to make an offline-capable web kiosk using an iPad and any existing website. Offline Kiosk for iPad allows you to make interactive, full-featured kiosks using any website\u2019s content. What it means for your company&#8217;s bottom line is that now you don\u2019t have to create separate content specially for [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-73","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/codiumlabs.com\/blog\/wp-json\/wp\/v2\/posts\/73","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codiumlabs.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codiumlabs.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codiumlabs.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codiumlabs.com\/blog\/wp-json\/wp\/v2\/comments?post=73"}],"version-history":[{"count":67,"href":"https:\/\/codiumlabs.com\/blog\/wp-json\/wp\/v2\/posts\/73\/revisions"}],"predecessor-version":[{"id":157,"href":"https:\/\/codiumlabs.com\/blog\/wp-json\/wp\/v2\/posts\/73\/revisions\/157"}],"wp:attachment":[{"href":"https:\/\/codiumlabs.com\/blog\/wp-json\/wp\/v2\/media?parent=73"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codiumlabs.com\/blog\/wp-json\/wp\/v2\/categories?post=73"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codiumlabs.com\/blog\/wp-json\/wp\/v2\/tags?post=73"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}