Create and deploy Chrome kiosk apps

This article is for Chrome administrators and developers with experience developing Chrome apps.

As a Chrome administrator, you can turn devices running Chrome OS into single-purpose devices, such as a digital sign or interactive display. You can deploy off-the-shelf kiosk apps from the Chrome Web Store or you can build your own kiosk app.

In Chrome version 57 and later, some devices running Chrome OS support Android apps. For information about how to install Android apps on managed Chrome devices, see Use Android apps on Chrome devices running as a kiosk.

Considerations

  • Before you can deploy kiosk apps on devices running Chrome OS, you need to enroll the devices. For details, see Enroll Chrome devices.
  • You can use Chrome packaged apps to build kiosk apps. But, you can’t use hosted apps.
  • Use Chrome apps that are set up to run on a full screen.
  • Follow the Chrome app development best practices.

Step 1: Build a Chrome kiosk app

As a developer, there are 2 ways to build a kiosk app that you can deploy on Chrome devices. Use an existing web app or create a new one.

I have a web app

If you have a web app, you can use Chrome App Builder to package it as a kiosk app.
  1. On a computer, create a folder for the app’s files.
  2. Open the Chrome App Builder extension.
    If you don’t already have it, you’ll need to add the Chrome App Builder extension to your Chrome Browser.
  3. For your kiosk app, enter the app name and initial version.
    Make the initial version a low number, such as 0.0.0.1. That way, you have room to increase the version number when you upload new versions of your app.
  4. Enter the URL of the app’s current homepage.
    This will be the landing page for the new kiosk app.
  5. (Optional) Choose navigation controls, such as back, forward, reload, and restart session.
  6. (Optional) Specify timeout values:
    • Session idle timeout—Amount of time the app is idle before browsing data, such as app cache and cookies, is cleared.
    • Timeout to return home—Amount of time the app is idle before returning to the homepage. Browsing data is not cleared.
      The default for Session idle timeout and Timeout to return home is 0 minutes—the app doesn’t time out.
  7. (Optional) Enter the Terms of Service for app users.
  8. (Optional) Rotate the homepage to fit the device where it will run.
    For example, rotate an app 90 degrees to run it on a device that’s set with a portrait layout.
  9. Select Kiosk mode enabled.
  10. Click Export kiosk app.
  11. Choose where you want to export the app files to and click Select.

After you create a kiosk app with Chrome App Builder, you can customize it by adding more files.

I want to build a new app

Use the sample files provided in the steps below to build a simple kiosk app.
  1. On a computer, create a folder for the app’s files. 
  2. Create the app’s HTML file.
    1. Using a text editor, create an HTML file.
      Here is a sample HTML file.
    2. In the app folder, save the file as application.html.
  3. Create the manifest.
    1. Using a text editor, create a JavaScript® Object Notation (JSON) file. Here is a sample JSON file.
    2. Make sure that kiosk_enabled is set to true, "kiosk_enabled": true.
    3. (Optional) To prevent an app being run as a regular app, set kiosk_only to true, "kiosk_only": true.
    4. (Optional) To speed up the time it takes for webpages to initially load in the kiosk app's webview control, specify partition="persist:" in the webview tag.
      For details, see developer information for the partition attribute.
    5. Make sure the JSON code is formatted correctly with a third-party JSON validator tool, such as JSONLint.
    6. In the app folder, save the file as manifest.json.
  4. Specify the height and width of the app.
    1. Using a text editor, create a Cascading Style Sheet (CSS) file. Here is a sample CSS file.
    2. In the app folder, save the file as application.css.
      Note: Kiosk apps automatically expand to full-screen.
  5. (Optional) Let users end the kiosk session.
    1. Using a text editor, create a Javascript (JS) file. Here is a sample JS file.
    2. In the app folder, save the file as application.js.
  6. Create the background script.
    1. Using a text editor, create a JS file. Here is a sample JS file.
    2. In the app folder, save the file as background.js.
  7. Create the app icons for the app and save them in the app folder.
    1. Create a 128 by 128p icon and save it as 128.png.
    2. Create a 96 by 96p icon and save it as 96.png.

Alternatively, use this sample zip file that contains app files for a test app with navigation controls and a reset button. A live version of the app, Chrome Browser Kiosk App 1.0, is published in the Chrome Web Store. You can edit the files with any text editor.

Step 2. Test the kiosk app

As a developer, make sure your kiosk app works on a device running Chrome OS.

  1. Sign in to your Google Account on a Chrome device.
  2. Save the app folder on your test device.
  3. Go to chrome://extensions/.
  4. At the top right, turn on Developer mode.
  5. Click Load unpacked.
  6. Find and select the app folder.
  7. Open a new tab in Chromeand thenclick Appsand thenclick the app. Make sure it loads and works correctly.
  8. If needed, make changes in the manifest.json file, host the app folder, and retest it. Repeat until the app works correctly.

Step 3: Publish in the Chrome Web Store

As a developer, you can choose to make apps and extensions available for everyone or control who can install them. There are 2 ways you can publish kiosk apps in the Chrome Web Store:

  • Public—Everyone can see and install the app.
  • Unlisted—Only users with the app link can see and install it. The app doesn’t appear in the Chrome Web Store search results. You can share the app link with users outside your domain.

To add a kiosk app in the Chrome Web Store, zip the folder that contains your files. Then, publish it in the Chrome Web Store

Step 4: Deploy the kiosk app

As an admin, you can add the kiosk app in the Google Admin console. If you have multiple apps that you want to add, you can add them all at once with default policies. Or, you can add one app at a time to set their policies.

Add multiple apps

  1. Sign in to your Google Admin console.

    Sign in using your administrator account (does not end in @gmail.com).

  2. From the Admin console Home page, go to Device managementand thenChrome management.

    If you don't see Device management on the Home page, click More controls at the bottom.

  3. Click Device settings.
  4. On the left, select the organization where you want to configure policies.
    For all users, select the top-level organization. Otherwise, select a child organization.
  5. Scroll to Kiosk settings.
  6. For Kiosk Apps, click Manage Kiosk Applications.
  7. To add an app, click Chrome Web Store and search for your kiosk app:
    • For a public app, search using the app name or ID.
    • For an unlisted app, search using the app ID.
  8. To manually add an app, click Specify a Custom App:
    • For a trusted tester app in the Chrome Web Store, enter the app ID and the URL https://clients2.google.com/service/update2/crx.
    • For an app that’s not hosted in the Chrome Web Store, enter the app ID and the URL of the third-party web server.
  9. Click Addand thenSave.
  10. Click Save to confirm.

Add individual apps

  1. Sign in to your Google Admin console.

    Sign in using your administrator account (does not end in @gmail.com).

  2. From the Admin console Home page, go to Device managementand thenChrome management.

    If you don't see Device management on the Home page, click More controls at the bottom.

  3. Click App management.
  4. On the left, select Chrome Apps from the App Type filter menu.
  5. Click the app you want to configure.
  6. Click Kiosk settings.
  7. On the left, select the organization where you want users to run the kiosk app.
    For all users, select the top-level organization. Otherwise, select a child organization.
  8. Set the app and extension policies. Learn about each setting.
  9. Click Save.

Related topics

Was this helpful?
How can we improve it?