Diseños

Cuatro diseños. Elige el que corresponda a la información.

Diseño	Úsalo para	Ejemplos
`progress`	Pasos, o un valor que crece hacia una meta.	Un pedido, una entrega, una recaudación de fondos.
`picture`	Cuando lo principal es una foto.	Una mascota para adoptar, un anuncio, una foto del momento.
`versus`	Dos lados con puntuación.	Una partida, un partido, una subasta.
`countdown`	Un momento en el tiempo. El reloj corre en el teléfono.	Un lanzamiento, un saque inicial, una fecha límite.

Define layout en el estado al iniciar. Para cambiarlo después, envía un nuevo layout y los campos de ese diseño en una actualización. Una actividad puede mostrar un marcador, luego una foto y luego el marcador otra vez.

Qué muestra cada diseño

En iPhone:

Campo	Progreso	Imagen	Versus	Cuenta atrás
`primaryText`	Titular	Pie de foto	No se muestra	No se muestra
`secondaryText`	Línea bajo el titular	Texto bajo el pie de foto	No se muestra	Nombre junto al reloj
`headerIconUrl`	Logo	Logo pequeño	No se muestra	Logo
`backgroundImageUrl`	Fondo	La foto	Fondo	No se muestra
`versus`	No se muestra	No se muestra	Nombres, puntuaciones, logos, estados, columna central	No se muestra
Botón de acción	No se muestra	Se muestra	Se muestra	No se muestra
Dynamic Island compacta	`stage`, luego «N min», luego un anillo	Solo la foto	Puntuaciones y logos	Tiempo restante

En todos los diseños, una alerta usa primaryText como título y secondaryText como cuerpo. Define ambos, incluso en un diseño que no los muestra.

En Android, cada diseño es una notificación con un título y una línea de texto:

Título: primaryText. En Versus, el marcador («Lincoln 14-7 Central»). En Cuenta atrás, el tiempo restante.
Texto: secondaryText. En Versus, la columna central, o los estados si no hay columna central.
En Imagen, la foto aparece cuando el usuario expande la notificación.

Texto que cabe

Longitudes seguras para la superficie más pequeña del iPhone. El texto más largo se corta en la última palabra completa que cabe, sin «...». Android pasa el texto largo a otra línea en lugar de cortarlo. Revisa un diseño en el editor antes de enviarlo.

Diseño	Campo	Caracteres
Progreso	`primaryText`	17 con logo, 21 sin logo
Progreso	`secondaryText`	28
Progreso	Etiquetas de pasos (`segments`)	12 con tres pasos, 21 con dos
Progreso	`stage`	7
Imagen	`primaryText`	27, en dos líneas
Imagen	`secondaryText`	48, en dos líneas
Versus	`leftName` / `rightName`	12 con columna central, 16 sin ella
Versus	`leftStatus` / `rightStatus`	14
Versus	`centerLabel` / `centerValue`	10
Versus	`leftScore` / `rightScore`	2 dígitos con logos y columna central
Cuenta atrás	`secondaryText`	20
Cualquiera	`actionLabel`	10
Cualquiera	`brand.name`	18

Imágenes que encajan

Usa WebP. PNG y JPEG también funcionan. SVG no. El editor guarda cada imagen como WebP, de 400 píxeles de ancho, recortada a la forma de su espacio. Usa los mismos tamaños:

Campo	Forma	Tamaño
`headerIconUrl`, `lockScreenImageUrl`, `androidIconUrl` y los logos de versus	Cuadrada	400 x 400
`backgroundImageUrl`	Ancha, 2,34 a 1	400 x 171
`islandImageUrl`	Casi cuadrada, 1,12 a 1 (2,12 a 1 cuando `immersive` es `true`)	400 x 358
`androidImageUrl`	1,39 a 1	400 x 288

Usa fondo transparente en los logos.

Ejemplos

Progreso con pasos

Cada paso se completa a medida que avanza el pedido.

curl -X POST https://api.webliveactivity.com/api/start \
  -H 'Content-Type: application/json' \
  -H 'x-api-key: wla_your_key' \
  -d '{
  "widgetContainerId": "pizza-tracker",
  "brand": {
    "title": "Order #1234"
  },
  "state": {
    "layout": "progress",
    "primaryText": "In the oven now",
    "secondaryText": "Your order is cooking",
    "accentColorHex": "#0A84FF",
    "backgroundColorHex": "#0080BA",
    "headerIconUrl": "https://acme.example/logo.png",
    "estimatedMinutes": 30,
    "progressStyle": "segmented",
    "segments": [
      {
        "label": "Cooking",
        "complete": false
      },
      {
        "label": "On the way",
        "complete": false
      },
      {
        "label": "Delivered",
        "complete": false
      }
    ]
  }
}'

Imagen

La foto va en backgroundImageUrl. headerIconUrl es el logo pequeño.

curl -X POST https://api.webliveactivity.com/api/start \
  -H 'Content-Type: application/json' \
  -H 'x-api-key: wla_your_key' \
  -d '{
  "widgetContainerId": "pet-matches",
  "brand": {
    "title": "Meet Luna"
  },
  "state": {
    "layout": "picture",
    "primaryText": "Luna",
    "secondaryText": "2 year old Tabby, Spayed",
    "accentColorHex": "#FF6B35",
    "headerIconUrl": "https://petfinder.example/logo.png",
    "backgroundImageUrl": "https://petfinder.example/luna.jpg",
    "actionLabel": "View Live",
    "actionURL": "https://petfinder.example/luna"
  }
}'

Versus

Dos lados con puntuaciones, logos, estados y una columna central.

curl -X POST https://api.webliveactivity.com/api/start \
  -H 'Content-Type: application/json' \
  -H 'x-api-key: wla_your_key' \
  -d '{
  "widgetContainerId": "csgo-scores",
  "brand": {
    "title": "CSGO Esports"
  },
  "state": {
    "layout": "versus",
    "primaryText": "Heroic leads 12-9",
    "secondaryText": "Map: Overpass",
    "accentColorHex": "#0A84FF",
    "backgroundColorHex": "#001226",
    "backgroundGradientHex": "#00428C",
    "actionLabel": "Watch Live",
    "actionURL": "https://hltv.org/matches",
    "versus": {
      "leftName": "Movistar",
      "rightName": "Heroic",
      "leftScore": "9",
      "rightScore": "12",
      "leftStatus": "T side",
      "rightStatus": "CT side",
      "activeSide": "right",
      "leftImageUrl": "https://hltv.org/movistar.png",
      "rightImageUrl": "https://hltv.org/heroic.png",
      "centerLabel": "Map",
      "centerValue": "Overpass",
      "sourceLogoUrl": "https://hltv.org/csgo.png"
    }
  }
}'

Cuenta atrás

Si la tarjeta sigue en el teléfono cuando llega la hora, el servicio envía una alerta por su cuenta. Define completionText para el texto que aparece en lugar del reloj y en esa alerta. Inicia una cuenta atrás de más de 8 horas con keepAlive: true, o iOS cerrará la tarjeta antes de que llegue la hora.

curl -X POST https://api.webliveactivity.com/api/start \
  -H 'Content-Type: application/json' \
  -H 'x-api-key: wla_your_key' \
  -d '{
  "widgetContainerId": "gta6-countdown",
  "keepAlive": true,
  "brand": {
    "title": "GTA VI"
  },
  "state": {
    "layout": "countdown",
    "primaryText": "Grand Theft Auto VI",
    "secondaryText": "GTA VI",
    "countdownTo": 1795046400,
    "countdownStyle": "days",
    "completionText": "Out now",
    "headerIconUrl": "https://rockstargames.com/gta6-logo.png"
  }
}'