# Configurar la bandeja de entrada de mensajes web

#### Prerrequisitos

Asegúrate de haber implementado el SDK Web de Pushwoosh en tu sitio web. Para hacerlo, por favor sigue nuestra [guía](/es/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/).


**La Bandeja de Entrada de Mensajes para sitios web** te permite almacenar notificaciones push web para que los usuarios puedan volver a verlas más tarde, asegurando que los mensajes importantes sean vistos.

## Cómo funciona

Aquí hay un flujo de trabajo típico con InboxMessages:

| Paso                                                                         | Método                                                                                                                                      |
| ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| Carga de la página                                                           |                                                                                                                                             |
| Sincronizando mensajes con el servidor                                       | <p><code>InboxMessagesModel.updateMessages</code><br/>Ejecutado mientras se inicializa el SDK</p>                                              |
| Eliminando mensajes obsoletos                                                | <p><code>InboxMessagesModel.updateMessages</code><br/>Ejecutado mientras se inicializa el SDK</p>                                              |
| Recibiendo el número de mensajes no leídos para actualizar una insignia      | <p><code>Pushwoosh.pwinbox.unreadMessagesCount</code><br/>Ejecutado manualmente (después de que se dispare el evento <code>onUpdateInboxMessages</code>)</p> |
| Cargando mensajes para ser mostrados en la Bandeja de Entrada                | <p><code>Pushwoosh.pwinbox.loadMessages</code><br/>Ejecutado manualmente (después de que se dispare el evento <code>onUpdateInboxMessages</code>)</p>        |
| Marcando como leídos los mensajes que entran en el viewport                  | <p><code>Pushwoosh.pwinbox.readMessagesWithCodes</code><br/>Ejecutado manualmente</p>                                                            |
| Realizando una acción asignada al mensaje abierto                            | <p><code>Pushwoosh.pwinbox.performActionForMessageWithCode</code><br/>Ejecutado manualmente</p>                                                  |
| Eliminando mensajes al hacer clic en un icono de eliminar o deslizar un mensaje a la derecha | <p><code>Pushwoosh.pwinbox.performActionForMessageWithCode</code><br/>Ejecutado manualmente</p>                                                  |

## Escuchadores de eventos

```javascript title="onUpdateInboxMessages"
// Executed after the Inbox is updated automatically while the page is loading. 
Pushwoosh.push(['onUpdateInboxMessages', function(api, pwinbox) {
  pwinbox.loadMessages().then(function(messages) {
    console.log('EVENT: onUpdateInboxMessages', messages);
  });
}]);
```

```javascript title="onPutNewMessageToInboxStore"
// Executed by ServiceWorker after the Inbox Message is received and saved to indexedDB. 
Pushwoosh.push(['onPutNewMessageToInboxStore', function(api, message) {
  console.log('EVENT: onPutNewMessageToInboxStore', message);
}]);
```

## Módulo público

El **módulo WebSDK InboxMessagesPublic** presenta una interfaz pública para implementar la Bandeja de Entrada Web.

```txt title="Model"
type TInboxMessageTypePlain = 0;
type TInboxMessageTypeRichmedia = 1;
type TInboxMessageTypeURL = 2;
type TInboxMessageTypeDeeplink = 3;
type TInboxMessageType = TInboxMessageTypePlain  // depends on action_params
  | TInboxMessageTypeRichmedia
  | TInboxMessageTypeURL
  | TInboxMessageTypeDeeplink;

type TInboxLayout = 'classic' | 'banner' | 'captioned' | 'carousel';

interface IInboxMessageSlide {
  imageUrl: string;
  caption: string;  // caption overlaid on the slide; empty when the slide has none
  link: string;  // where a tap on the slide goes; empty when the slide has none, and the message's own action applies instead
}

interface IInboxMessagePublic {
  code: string;  // inbox_id
  title: string;  // title
  message: string; // body
  imageUrl: string;  // image
  sendDate: string;  // send_date, ISO 8601 in UTC
  type: TInboxMessageType;  // depends on action_params
  isRead: boolean;  // true if status is "read" or "open"
  link: string; // Deeplink | URL | "/"
  isActionPerformed: boolean;  // true if status is "open"
  layout: TInboxLayout;  // cell layout to draw, already degraded to one this message can render
  iconUrl: string;  // small round avatar; same value as imageUrl, under the name the layouts use
  heroUrl: string;  // hero image; falls back to iconUrl when the message has no banner, so it's set for classic messages too
  carousel: Array<IInboxMessageSlide>;  // slides of the carousel layout; empty for every other layout
  customData: Record<string, unknown>;  // the campaign's own custom data, as sent from the control panel
}
```

<Aside type="caution" title="sendDate ahora es un instante UTC verdadero (v3.75.0+)">
  `sendDate` solía llevar la hora local del reloj de pared etiquetada como `Z`. El código que compensaba el valor antiguo aplicando un desfase de zona horaria ahora estará desfasado por ese mismo desfase — elimina la compensación. El widget incorporado no se ve afectado.
</Aside>

**Diseños de celda.** Un mensaje se renderiza como uno de los cuatro diseños — `classic`, `banner`, `captioned`, o `carousel` — los mismos diseños que muestra la vista previa de la campaña en el panel de control. Un diseño que no puede renderizarse con lo que lleva el mensaje se degrada a `classic`: `banner` necesita una imagen principal (hero image), `captioned` necesita una imagen principal más un título y un cuerpo, y `carousel` necesita al menos una diapositiva más un título y un cuerpo. `layout` en el mensaje público es siempre el que se dibuja realmente, ya degradado.

Comprobar `layout` es la única forma fiable de saber cómo se renderizará un mensaje — `heroUrl` también se establece para los mensajes `classic` (ver la nota de campo anterior), por lo que una integración no debe usar su presencia para decidir si dibujar una imagen principal (hero).

## Métodos públicos

Consulta las descripciones de los métodos públicos en la guía del [SDK Web Push 3.0](/es/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/).

`Pushwoosh.pwinbox.syncMessages()` extrae la bandeja de entrada actual del servidor; llámalo para forzar una actualización fuera del sondeo propio del widget incorporado.