Building an HTML App

HTML Apps get downloaded to each Player, so they have several benefits over providing the same experience over an online HTML web page or Web Apps.

HTML Apps are great because they:

  • They are local, so they load even without a working Internet connection.
  • Have no CORS restrictions. You can create Apps that pull in data from any online website. E.g., retrieve stock market prices from an online web page without any prior arrangement and show them as you wish.
  • They are playback-aware, so they are notified when they are “loaded,” “shown,” and “hidden.” This makes better use of bandwidth.
  • You will soon have access to an API that will enable you to interact with the playback engine directly.

What are the requirements?

Anyone who can develop an HTML5/Javascript web page can develop an App.

No special skills are required. 

We also provide you with some required tools:

  • Full documentation on how Apps work
  • Complete examples you can download and test

Creating an HTML App

Make sure you read the next section of the Developer’s guide to create your App or use one of our samples. After you are done, then you can upload it to your account. 

To create an HTML App, go to “Custom Apps” and select add a new HTML app. 

In the form that appears:

  1. Type in the Name of the app
  2. Choose an icon for your app
  3. Add an optional Description for it
  4. Define the Zoom Factor (%)
  5. Toggle Auto Adjust Zoom
  6. Choose if you want to Enable Chromium
  7. Upload your ZIP file
  8. How to ZIP your custom app
  9. Ensure ZIP your custom app’s files without being in any folder on your PC’s desktop. More details on how to properly ZIP a custom app can be found here.
  10. Write down the UI Configuration
  11. Click “Save” to upload your custom app.

REMEMBER: After making changes in your Account, you need to Push Changes to your Monitors.

HTML App Packaging

All Apps must be packaged in a ZIP file. This ZIP file is delivered to all Players that are using the App, just like other files shown on the screen (images, videos, etc.).

Example Folder structure

  • The ZIP file is extracted in the Player’s local storage, and the Web Viewer loads the index.html file found in the base folder of the ZIP file.

Minimum Required:

(ZIP base folder)

       |_______  index.html

Example with some assets:

(ZIP base folder)

       |_______  css

       |_______  index.html

                 |_______  base.css

                 |_______  custom.css

       |_______  images

                 |_______  image1.jpg

                 |_______  image2.png

  • Any links or references to asset files (like, js, CSS, or image files) should always be relative to work properly after the ZIP file is extracted.
  • Wrong Zipping method
    • If you have copied your custom app with all the required files to a folder named “BlaBla” and try to ZIP that folder, the player will not read the index.html file and therefore will not display your app on your TV screen.
    • If your Custom app is shown as the below image on your PC’s RAR archiver, then you need to delete that folder and ZIP only the required files as we mention above.
    • Wrong Zipping method