# Configurar a caixa de entrada de mensagens da web

#### Pré-requisitos

Certifique-se de que implementou o SDK da Web da Pushwoosh em seu site. Para fazer isso, siga nosso [guia](/pt/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/).

A **Caixa de Entrada de Mensagens para sites** permite que você armazene notificações push da web para que os usuários possam revisitá-las mais tarde, garantindo que mensagens importantes sejam vistas.

## Como funciona

Aqui está um fluxo de trabalho típico com InboxMessages:

| Etapa | Método |
| -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| Carregamento da página | |
| Sincronizando mensagens com o servidor | <p><code>InboxMessagesModel.updateMessages</code><br/>Executado enquanto o SDK é inicializado</p> |
| Excluindo mensagens desatualizadas | <p><code>InboxMessagesModel.updateMessages</code><br/>Executado enquanto o SDK é inicializado</p> |
| Recebendo o número de mensagens não lidas para atualizar um selo | <p><code>Pushwoosh.pwinbox.unreadMessagesCount</code><br/>Executado manualmente (após o evento <code>onUpdateInboxMessages</code> ser acionado)</p> |
| Carregando mensagens para serem exibidas na Caixa de Entrada | <p><code>Pushwoosh.pwinbox.loadMessages</code><br/>Executado manualmente (após o evento <code>onUpdateInboxMessages</code> ser acionado)</p> |
| Marcando mensagens que entraram na viewport como lidas | <p><code>Pushwoosh.pwinbox.readMessagesWithCodes</code><br/>Executado manualmente</p> |
| Executando uma ação atribuída à mensagem aberta | <p><code>Pushwoosh.pwinbox.performActionForMessageWithCode</code><br/>Executado manualmente</p> |
| Excluindo mensagens ao clicar em um ícone de exclusão ou deslizar uma mensagem para a direita | <p><code>Pushwoosh.pwinbox.performActionForMessageWithCode</code><br/>Executado manualmente</p> |

## Ouvintes de eventos

```javascript title="onUpdateInboxMessages"
// Executado após a Caixa de Entrada ser atualizada automaticamente durante o carregamento da página.
Pushwoosh.push(['onUpdateInboxMessages', function(api, pwinbox) {
  pwinbox.loadMessages().then(function(messages) {
    console.log('EVENT: onUpdateInboxMessages', messages);
  });
}]);
```

```javascript title="onPutNewMessageToInboxStore"
// Executado pelo ServiceWorker após a Mensagem da Caixa de Entrada ser recebida e salva no indexedDB.
Pushwoosh.push(['onPutNewMessageToInboxStore', function(api, message) {
  console.log('EVENT: onPutNewMessageToInboxStore', message);
}]);
```

## Módulo público

O **módulo WebSDK InboxMessagesPublic** apresenta uma interface pública para implementar a Caixa de Entrada da 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;
 
 
interface IInboxMessagePublic {
  code: string;  // inbox_id
  title: string;  // title
  message: string; // body
  imageUrl: string;  // image
  sendDate: string;  // send_date
  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"
}
```

## Métodos públicos

Confira as descrições dos métodos públicos no guia do [SDK da Web Push 3.0](/pt/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/).