Offline HTML — Use Player Attributes in Your Own HTML

Offline HTML lets you upload a complete, self‑contained website — packaged as a .zip file — and play it on your screens like any other media. Because everything is stored on the device, it keeps playing even when the internet drops.

On top of that, EasySignage automatically hands your HTML a set of player attributes: the identity and context of the exact screen it is running on — the player ID, the screen name, its screen / display‑unit ID, resolution, location, and your custom tags. Your page can read those values and change what it shows, so a single HTML package can behave differently on every screen. The attributes are also exposed under Broadsign‑compatible key names, so creatives built for Broadsign work unchanged.

This allows you to:

• Show the right content per screen — per store, zone, floor, region, or language
• Personalise API and data requests using the screen’s ID or tags
• Keep playing reliably offline, with no server round‑trip on every frame
• Reuse one HTML package across hundreds of screens instead of building one each

New to this? You do not have to write any code to try it. Download the ready‑made sample below, upload it, and the page will display every value your screen delivered. Developers can then copy one small file into their own project to read the same values.

Download the sample

The fastest way to understand Offline HTML is to run the sample package. It shows, live on the screen, every attribute the device delivered.

Inside the .zip you will find three files:

Required: the entry point of every Offline HTML package must be named index.html and sit at the top level of the .zip. Keep all assets (images, CSS, JS, fonts) inside the same package and reference them with relative paths so the page works with no internet connection.

Quick start (no coding)

1. In EasySignage, go to Media and upload the .zip as an HTML package (see Upload Media ).
2. Add the media item to a playlist.
3. Assign the playlist to a screen and let it play.

The sample page appears and lists every attribute the screen delivered — including a banner that confirms which delivery channel is active. That is your proof the integration works end to end.

How the data reaches your HTML

EasySignage delivers the same player attributes through two channels, so your page keeps working no matter how the creative is built or secured:

You don't choose a channel — easysignage.js reads whichever is available.

1. A global JavaScript object

EasySignage injects a small script into your index.html that defines a global object before any of your own scripts run:

window.easysignage        // the player object, e.g. { player_id: "...", tags: { zone: "north" }, ... }
window.BroadSignObject     // an alias of the same object, for Broadsign‑compatible code

2. A URL query string

The same values are also appended to the page URL on every render:

index.html?player_id=PL-abc123&name=Main%20Lobby&display_unit_id=SC-9&tags.zone=north&...

The query string is always present. If a strict security policy on your creative blocks the injected script (so the global is missing), your page can still read the values from the URL. Keys that start with tags. (for example tags.zone) rebuild into a tags object.

You normally don’t choose between them. The easysignage.js reader below uses the global when it is available and falls back to the URL automatically — you just call one function.

For developers: read the attributes

Copy easysignage.js from the sample into your project and load it with a plain script tag before your own code:

<!-- index.html -->
<script src="easysignage.js"></script>
<script>
  var panel = EasySignage.read();          // the player object (global or URL — handled for you)

  var playerId = panel.player_id || "";
  var screen   = panel.name || "";
  var zone     = (panel.tags && panel.tags.zone) || "";

  // ...use these values to drive your creative.
</script>

That’s the whole integration. EasySignage.read() returns the player object; if you prefer, you can read window.easysignage (or window.BroadSignObject) directly.

Broadsign compatibility. If you are migrating a creative that reads Broadsign’s window.BroadSignObject, it already works — EasySignage exposes the same alias object and Broadsign key names (display_unit_id, display_unit_resolution, frame_resolution, campaign_id, display_unit_lat_long):

var panelVariables = window["BroadSignObject"];
if (panelVariables) {
  this.playerId  = panelVariables.player_id || "";
  this.screenId  = panelVariables.display_unit_id || "";
  this.latLong   = panelVariables.display_unit_lat_long || "";
}

Load easysignage.js as a classic script (<script src="...">), not as type="module". A classic external script also runs under a strict Content-Security-Policy (script-src 'self') that would block inline scripts, and it works on older Tizen / webOS / BrightSign webviews under file://.

Available attributes

EasySignage delivers a focused, Broadsign‑compatible set of attributes. The same value is exposed under both the native EasySignage key and its Broadsign alias, so creatives written for either platform work without changes.

Values are strings and are normally present as "" when unknown (the one exception is display_unit_lat_long, which is present only when the device’s location is known).

Data minimisation. Offline HTML packages are third‑party code, so EasySignage intentionally exposes only the fields above. Device identifiers (serial, device ID), OS / manufacturer / version details, precise separate coordinates, orientation, and the playlist / media names are not passed to your HTML.

Tags

Tags are the custom key:value labels you assign to your screens (for example zone:north, store:42, lang:ar). Use them to drive your own business logic. They arrive as an object, plus a convenient joined string:

var panel = EasySignage.read();

panel.tags.zone;     // "north"
panel.tags.store;    // "42"
panel.tags.all;      // "zone:north,store:42"   (comma‑separated, key:value)

Tags are case‑sensitive; prefer lowercase keys. Up to 20 tags are carried to the device; the complete set always exists in your EasySignage account.

Value rules (worth knowing)

• Every delivered field is a string.
• Unknown values are present as an empty string "" — the key is never missing, so you can safely read panel.name without checking that it exists first. The one exception is display_unit_lat_long, which is present only when the device location is known.
• tags is always an object (possibly empty); tags.all is the comma‑separated string.
• Keep the package self‑contained and use relative paths so it runs fully offline.

Example: show different content per screen

<script src="easysignage.js"></script>
<script>
  var panel = EasySignage.read();
  var zone  = (panel.tags && panel.tags.zone) || "default";

  // pick content based on the screen's zone tag
  var banners = {
    north: "north-promo.jpg",
    south: "south-promo.jpg",
    default: "generic-promo.jpg",
  };
  document.getElementById("hero").src = banners[zone] || banners.default;

  // rotate the layout for portrait screens (resolution is "WIDTHxHEIGHT")
  var res = (panel.resolution || "").split("x");
  if (res.length === 2 && Number(res[1]) > Number(res[0])) {
    document.body.classList.add("portrait");
  }
</script>

Tips & troubleshooting

• Nothing shows up? Confirm the entry file is named index.html and is at the top level of the .zip, and that every asset uses a relative path.
• The injected global is missing. A strict Content-Security-Policy in your page can block the injected script. Use the easysignage.js reader (or read the URL query string) and your page will still get the values.
• Old devices. Keep your scripts as classic scripts (no type="module") so they run on older Tizen / webOS / BrightSign webviews.
• Test locally first. Open index.html in a browser with a query string appended, e.g. index.html?player_id=TEST&display_unit_id=SC-1&resolution=1080x1920&tags.zone=north, to preview how your page reacts before uploading.

Related

• Website Dynamic URL Variables — pass the same player attributes into an online URL.
• Upload Media — how to add media to EasySignage.