---
title: "Apps Personalizadas de Señalización Digital — EasySignage"
description: "Sube una app HTML autónoma como un .zip y lee el ID, la resolución, la ubicación y las etiquetas de cada pantalla, para que una app personalizada se adapte a toda pantalla de señalización digital."
url: https://easysignage.com/help/es/custom-apps/digital-signage-custom-apps/
---

# Apps Personalizadas de Señalización Digital

Una **app personalizada** es un sitio web completo y autónomo que empaquetas como un archivo `.zip` y reproduces en tus pantallas como cualquier otro medio. Todo se almacena en el dispositivo, así que la app sigue reproduciéndose cuando se cae internet. Las apps personalizadas se llamaban antes HTML sin conexión.

EasySignage entrega a cada app personalizada un conjunto de **atributos del reproductor**: la identidad y el contexto de la pantalla en la que se ejecuta, incluyendo el ID del reproductor, el nombre de la pantalla, el ID de la pantalla o unidad de visualización, la resolución, la ubicación y tus etiquetas personalizadas. Tu app lee esos valores y cambia lo que muestra, así que un mismo paquete se comporta de forma distinta en cada pantalla. Los atributos también usan **nombres de clave compatibles con Broadsign**, así que un creativo migrado desde Broadsign puede conservar sus nombres de campo.

Con las apps personalizadas puedes:

-   Mostrar el contenido correcto por pantalla, tienda, zona, piso, región o idioma
-   Personalizar solicitudes de API y datos usando el ID o las etiquetas de la pantalla
-   Seguir reproduciendo de forma confiable sin conexión, sin ida y vuelta al servidor en cada cuadro
-   Reutilizar un paquete en cientos de pantallas en lugar de crear uno para cada una

> **¿Es nuevo para ti?** No necesitas escribir código para probarlo. Descarga el paquete de muestra ya preparado y súbelo, y la página muestra cada valor que entregó tu pantalla. Los desarrolladores pueden luego copiar un archivo en su propio proyecto para leer los mismos valores.

* * *

## Descargar la muestra

Para ver cómo funcionan las apps personalizadas, ejecuta el paquete de muestra. Muestra cada atributo que entregó el dispositivo, en vivo en la pantalla.

Muestra de app personalizada ya preparada

[Descargar sample.zip](https://media.easysignage.com/help/offline-html/sample.zip)

El `.zip` contiene tres archivos:

| Archivo | Qué es |
| --- | --- |
| `index.html` | La página en sí, y siempre el punto de entrada. Solo marcado. |
| `easysignage.js` | El pequeño **lector** reutilizable que copias en tu propio proyecto para obtener los atributos del reproductor. |
| `demo.js` | Código desechable que dibuja los valores en pantalla para la muestra. Ignóralo en proyectos reales. |

> **Obligatorio:** el punto de entrada de cada app personalizada debe llamarse **`index.html`** y estar en el nivel superior del `.zip`. Mantén todos los recursos, imágenes, CSS, JS y fuentes dentro del mismo paquete y referéncialos con **rutas relativas** para que la app funcione sin conexión a internet.

* * *

## Inicio rápido sin programar

1.  Ve a **Media** (Medios) y sube el paquete `.zip` (consulta [Subir Medios](https://easysignage.com/help/apps/digital-signage-upload-media/) ).
2.  Agrega el elemento multimedia a una **lista de reproducción**.
3.  Asigna la lista de reproducción a una **pantalla**.

La página de muestra aparece y lista cada atributo que entregó la pantalla, incluyendo un banner que confirma qué canal de entrega está activo. Eso confirma que la integración funciona de principio a fin.

* * *

## Cómo llegan los datos a tu app

EasySignage entrega los **mismos** atributos del reproductor a través de **dos canales**, así que tu app sigue funcionando sin importar cómo esté construida o protegida la creatividad:

No eliges un canal, `easysignage.js` lee el que esté disponible.

### 1\. Un objeto global de JavaScript

EasySignage inyecta un pequeño script en tu `index.html` que define un objeto global antes de que se ejecute cualquiera de tus propios scripts:

```js
window.easysignage        // el objeto del reproductor, p. ej. { player_id: "...", tags: { zone: "north" }, ... }
```

### 2\. Una cadena de consulta en la URL

Los mismos valores también se agregan a la URL de la página en cada renderizado:

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

La cadena de consulta **siempre** está presente. Si una política de seguridad estricta en tu creatividad bloquea el script inyectado y falta el global, tu app aún lee los valores desde la URL. Las claves que empiezan con `tags.` (por ejemplo, `tags.zone`) se reconstruyen en un objeto `tags`.

> **Normalmente no eliges entre ambos.** El lector `easysignage.js` usa el global cuando está disponible y recurre a la URL automáticamente. Tú llamas a una sola función.

* * *

## Para desarrolladores: leer los atributos

Copia **`easysignage.js`** desde la muestra a tu proyecto y cárgalo con una etiqueta script normal **antes** de tu propio código:

```html
<!-- index.html -->
<script src="easysignage.js"></script>
<script>
  var panel = EasySignage.read();          // el objeto del reproductor (global o URL, gestionado por ti)

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

  // ...usa estos valores para impulsar tu creatividad.
</script>
```

Esa es toda la integración. `EasySignage.read()` devuelve el objeto del reproductor. También puedes leer `window.easysignage` directamente.

**Migrando desde Broadsign:**
EasySignage usa los mismos nombres de clave de Broadsign (`display_unit_id`, `display_unit_resolution`, `frame_resolution`, `campaign_id`, `display_unit_lat_long`), así que tus nombres de campo se mantienen. Léelos desde el objeto del reproductor de EasySignage:

```js
var panelVariables = EasySignage.read();
if (panelVariables) {
  this.playerId  = panelVariables.player_id || "";
  this.screenId  = panelVariables.display_unit_id || "";
  this.latLong   = panelVariables.display_unit_lat_long || "";
}
```

> **Advertencia:** `window.BroadSignObject` fue eliminado. Una creatividad que lea ese global ya no recibe atributos del reproductor. Actualízala para usar `EasySignage.read()` o `window.easysignage`.

> **Carga `easysignage.js` como un script clásico (`<script src="...">`), no como `type="module"`.** Un script externo clásico también se ejecuta bajo una `Content-Security-Policy` estricta (`script-src 'self'`) que bloquearía scripts en línea, y funciona en webviews más antiguos de Tizen, webOS y BrightSign bajo `file://`.

* * *

## Atributos disponibles

EasySignage entrega un conjunto reducido y **compatible con Broadsign** de atributos. El mismo valor se expone tanto bajo la clave nativa de EasySignage **como** bajo su alias de Broadsign, así que una creatividad escrita para cualquiera de las dos plataformas puede conservar sus nombres de campo.

Los valores son cadenas de texto y normalmente están presentes como `""` cuando se desconocen. La única excepción es `display_unit_lat_long`, que está presente solo cuando se conoce la ubicación del dispositivo.

| Atributo nativo | Alias de Broadsign | Descripción |
| --- | --- | --- |
| `player_id` | `player_id` | ID único del reproductor (GUID). Mismo nombre de clave que Broadsign. |
| `name` | — | Nombre para mostrar del reproductor o la pantalla. |
| `screen_id` | `display_unit_id` | Identificador de la pantalla (unidad de visualización). |
| `resolution` | `display_unit_resolution`, `frame_resolution` | Resolución de la pantalla, por ejemplo `1920x1080`. |
| `playlist_id` | `campaign_id` | ID de la lista de reproducción en la que se reproduce este contenido (el concepto más cercano en Broadsign es la campaña). |
| — | `display_unit_lat_long` | Ubicación del dispositivo como una sola cadena `"lat,long"`. Presente solo cuando se conoce la ubicación. |
| `tags` | — | Tus etiquetas personalizadas como `{ clave: valor }`. Consulta [Etiquetas](#etiquetas) . |

> **Minimización de datos:**
> Las apps personalizadas son código de terceros, así que EasySignage solo expone los campos de la tabla anterior. Los identificadores del dispositivo (número de serie, ID del dispositivo), el sistema operativo, el fabricante y los detalles de versión, las coordenadas precisas por separado, la orientación, y los nombres de la lista de reproducción y del medio **no** se pasan a tu app.

### Etiquetas

Las etiquetas son las etiquetas personalizadas `clave:valor` que asignas a tus pantallas, por ejemplo `zone:north`, `store:42` o `lang:es`. Úsalas para impulsar tu propia lógica de negocio. Llegan como un objeto, más una cadena unida:

```js
var panel = EasySignage.read();

panel.tags.zone;     // "north"
panel.tags.store;    // "42"
panel.tags.all;      // "zone:north,store:42"   (separado por comas, clave:valor)
```

> Las etiquetas distinguen mayúsculas de minúsculas; prefiere claves en minúsculas. Se llevan hasta **20** etiquetas al dispositivo. El conjunto completo siempre existe en tu cuenta de EasySignage.

* * *

## Reglas de los valores

-   Cada campo entregado es una **cadena de texto**.

-   Los valores desconocidos están presentes como una cadena vacía `""`. La clave nunca falta, así que puedes leer `panel.name` sin verificar antes que exista. La única excepción es `display_unit_lat_long`, que está presente solo cuando se conoce la ubicación del dispositivo.

-   `tags` siempre es un objeto, posiblemente vacío. `tags.all` es la cadena separada por comas.

-   Mantén el paquete autónomo y usa **rutas relativas** para que funcione completamente sin conexión.

* * *

## Ejemplo: mostrar contenido distinto por pantalla

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

  // elige el contenido según la etiqueta de zona de la pantalla
  var banners = {
    north: "north-promo.jpg",
    south: "south-promo.jpg",
    default: "generic-promo.jpg",
  };
  document.getElementById("hero").src = banners[zone] || banners.default;

  // rota el diseño para pantallas en vertical (la resolución es "ANCHOxALTO")
  var res = (panel.resolution || "").split("x");
  if (res.length === 2 && Number(res[1]) > Number(res[0])) {
    document.body.classList.add("portrait");
  }
</script>
```

* * *

## Solución de problemas

-   **No aparece nada:** confirma que el archivo de entrada se llame `index.html` y esté en el nivel superior del `.zip`, y que cada recurso use una ruta relativa.

-   **Falta el global inyectado:** una `Content-Security-Policy` estricta en tu página puede bloquear el script inyectado. Usa el lector `easysignage.js`, o lee la cadena de consulta de la URL, y tu app sigue obteniendo los valores.

-   **La app falla en dispositivos más antiguos:** mantén tus scripts como scripts clásicos, sin `type="module"`, para que se ejecuten en webviews más antiguos de Tizen, webOS y BrightSign.

-   **Prueba localmente primero:** abre `index.html` en un navegador con una cadena de consulta agregada, por ejemplo `index.html?player_id=TEST&display_unit_id=SC-1&resolution=1080x1920&tags.zone=north`, para previsualizar cómo reacciona tu app antes de subirla.

* * *

## Artículos relacionados

-   [Variables de URL Dinámicas del Sitio Web](https://easysignage.com/help/apps/digital-signage-website-dynamic-url-variables/) : pasa los mismos atributos del reproductor a una URL en línea.
-   [Subir Medios](https://easysignage.com/help/apps/digital-signage-upload-media/) : cómo agregar medios a EasySignage.