Create a Chrome kiosk app

Kiosk Apps allow an admin to run a single app in fullscreen mode on a Chrome device. They are useful for environments that require a user to interact with a single application such as assessments/student testing, guest check-in stations, help desk, manufacturing kiosk, and digital signage in airports and retail stores.

Any Chrome web app can be a kiosk app if you select it to run as a kiosk app, although apps configured to be full-screen work best as kiosk apps. Follow the steps below to build your own kiosk app. For more advanced app building, please see the Chrome Developer site.

Create a Chrome Kiosk App

Generate a basic kiosk app using Chrome App Builder

Chrome App Builder gives you a fast and easy way to create, preview, and build a Chrome kiosk-enabled app that can be used in Chrome kiosk mode.

Create a simple kiosk app using a text editor or Chrome developer tools

Create a simple kiosk app by using a text editor to edit the following files and save them in a folder:

File 1: Application.html

Put the name of the app inside the <title> tag. This app also has an optional Reset button that will allow users to end the kiosk session. If you don’t want to allow people to exit the app or session, you can remove this.


<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Kiosk Test App</title>
    <script src="application.js"></script>
    <link rel="stylesheet" type="text/css" href="application.css">
  </head>


  <body>
    <webview id="map" src="https://google.com"></webview>
    <button id="reset">Reset</button>
  </body>
</html>

File 2: manifest.json

In this file you can change the app name next to “name” and version number. Make sure you include "kiosk_enabled": true.



{
"update_url": "https://clients2.google.com/service/update2/crx",


  "name": "Kiosk - Google App Test",
  "version": "1.0",
  "manifest_version": 2,
  "icons": {
    "128": "icon_128.png",
    "16": "icon_16.png"
  },
  "app": {
    "background": {
      "scripts": [ "background.js" ],
      "persistent": false
    }
  },
  "permissions": [
    "webview"
  ],
  "kiosk_enabled": true
}

File 3: application.css

Specify the height and width of the app. Because it’s a kiosk app, it will automatically expand to full-screen.


webview {
 height: 100%;
 width: 100%;
}


button {
> left: auto;
 position: absolute;
 right: 6px;
}

File 4: application.js

This file will allow you to ‘kill/end’ the app.



window.onload = function() {
 document.querySelector('#reset').onclick = function() {
   window.close();
 };
}

File 5: background.js


chrome.app.runtime.onLaunched.addListener(function() {
 var options = {
   'id': 'Test Kiosk App',
   'bounds': {
     'width': 1024,
     'height': 768
   }
 };
 chrome.app.window.create('application.html', (options));
});
Or, create a Chrome kiosk app with navigation controls:

Download this zip file which was uploaded to the Chrome Developer Dashboard for this Chrome kiosk app. This app is similar to the one above but has additional files and controls for navigation and an improved UI for the reset/exit button.

This zip file contains code samples that you can edit to your organization's specifications. Before uploading to the Chrome Web Store, edit the files using a text editor like TextMate or Sublime Text, and upload new icons that fit the Chrome Web Store's branding guidelines.

Publish your app in the Chrome Web Store

  1. When the app files are complete, create app icons: a 128x128 png and a 96x96 png.
  2. Put all of these items into the same folder and compress it into a zip file and follow these instructions to publish your kiosk app on the Chrome Web Store.
  3. Publish the app in the Chrome Web Store with the visibility option set to Public or Unlisted. The kiosk app will not work if you set visibility option to Private.

Add the app as a kiosk app

In the Chrome management console, there are 2 ways to add kiosk apps:

  • Device settings let you add multiple kiosk apps at once.
  • App management lets you add one kiosk app at a time. You would use this option if you have other settings to configure for the app.
Device settings
  1. Sign in to the Admin console.
  2. Click Device management > Chrome management > Device settings and click Manage Kiosk Applications in the Kiosk Apps settting. 
    Single app kiosk setting
  3. If you're hosting a public or unlisted app in the Chrome Web Store, search for the app there and click Add.
    Public–Search for the app by name or ID.
    Unlisted–Search for the app using the app ID. 
    Note: Find the app ID by searching for the app on the Chrome Web Store. The app ID is the URL string highlighted in green in this example:
    https://chrome.google.com/webstore/detail/kiosk-google-app-test/lfkjhmmdoiphacoihfjjgcdcjppdogjh.
      search Chrome Web Store
  4. If your're hosting a trusted tester app in the Chrome Web Store, enter the app ID and this URL https://clients2.google.com/service/update2/crx in the Specify a Custom App dialog, and click ADD
    Specify a custom Chrome Kiosk App
  5. If you're not hosting the app in the Chrome Web Store, enter the app ID and the URL of the third-party web server in the Specify a Custom App dialog and click ADD.
App management
  1. Sign in to the Admin console.
  2. Click Device management > Chrome management > App management and select the app. 
  3. Click Kiosk settings.
  4. Select the organizational  unit (org unit) where you want to deploy the kiosk app and click SAVE
    App management - kiosk settings

(Optional) Set the kiosk app to launch automatically

By setting the kiosk app to launch automatically when the device boots, you are configuring the app as a Single App Kiosk. You can have many kiosk apps deployed to a device but only one can launch automatically when the device boots. 

Auto-Launch Kiosk App is commonly selected when deploying a digital signage app or kiosks where user interaction is not controlled through a keyboard and mouse. This setting converts the device into an appliance.

  • If you added the kiosk app in Device settings, go to Kiosk Settings on the Device settings page, and select the kiosk app you want to launch automatically from the drop-down list.
  • If you added the kiosk app in App management, you can click the device settings page link to go to the Kiosk Settings.
Auto-launch kiosk

FAQs

How can I improve the performance of my kiosk app?

References