# Configurer la boîte de réception des messages web

#### Prérequis

Assurez-vous d'avoir implémenté le SDK Web de Pushwoosh sur votre site web. Pour ce faire, veuillez suivre notre [guide](/fr/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/).


La **boîte de réception des messages pour les sites web** vous permet de stocker les notifications push web afin que les utilisateurs puissent les consulter ultérieurement, garantissant ainsi que les messages importants sont vus.

## Comment ça marche

Voici un flux de travail typique avec InboxMessages :

| Étape                                                                                             | Méthode                                                                                                                                             |
| ------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| Chargement de la page                                                                             |                                                                                                                                                     |
| Synchronisation des messages avec le serveur                                                      | <p><code>InboxMessagesModel.updateMessages</code><br/>Exécuté pendant l'initialisation du SDK</p>                                                     |
| Suppression des messages obsolètes                                                               | <p><code>InboxMessagesModel.updateMessages</code><br/>Exécuté pendant l'initialisation du SDK</p>                                                     |
| Réception du nombre de messages non lus pour mettre à jour un badge                               | <p><code>Pushwoosh.pwinbox.unreadMessagesCount</code><br/>Exécuté manuellement (après le déclenchement de l'événement <code>onUpdateInboxMessages</code>)</p> |
| Chargement des messages à afficher dans la boîte de réception                                     | <p><code>Pushwoosh.pwinbox.loadMessages</code><br/>Exécuté manuellement (après le déclenchement de l'événement <code>onUpdateInboxMessages</code>)</p>        |
| Marquer comme lus les messages apparus dans la fenêtre d'affichage                                | <p><code>Pushwoosh.pwinbox.readMessagesWithCodes</code><br/>Exécuté manuellement</p>                                                                 |
| Exécution d'une action assignée au message ouvert                                                 | <p><code>Pushwoosh.pwinbox.performActionForMessageWithCode</code><br/>Exécuté manuellement</p>                                                        |
| Suppression de messages en cliquant sur une icône de suppression ou en balayant un message vers la droite | <p><code>Pushwoosh.pwinbox.performActionForMessageWithCode</code><br/>Exécuté manuellement</p>                                                        |

## Écouteurs d'événements

```javascript title="onUpdateInboxMessages"
// Exécuté après la mise à jour automatique de la boîte de réception pendant le chargement de la page. 
Pushwoosh.push(['onUpdateInboxMessages', function(api, pwinbox) {
  pwinbox.loadMessages().then(function(messages) {
    console.log('EVENT: onUpdateInboxMessages', messages);
  });
}]);
```

```javascript title="onPutNewMessageToInboxStore"
// Exécuté par le ServiceWorker après la réception du message de la boîte de réception et son enregistrement dans indexedDB. 
Pushwoosh.push(['onPutNewMessageToInboxStore', function(api, message) {
  console.log('EVENT: onPutNewMessageToInboxStore', message);
}]);
```

## Module public

Le **module public InboxMessages du SDK Web** présente une interface publique pour implémenter la boîte de réception 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éthodes publiques

Consultez les descriptions des méthodes publiques dans le guide [SDK Web Push 3.0](/fr/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/).