# Widget de boîte de réception web

L'intégration de la [boîte de réception des messages web](/fr/developer/guides/message-inbox/web-message-inbox/) à votre site web augmente considérablement les conversions. Un **widget de boîte de réception web** prêt à l'emploi est abonné à toutes les méthodes nécessaires pour communiquer avec les utilisateurs. Il vous suffit d'intégrer le widget à votre site web et de personnaliser son apparence pour qu'elle corresponde à votre marque.

## Prérequis

Pour intégrer la boîte de réception des messages pour les sites web, veuillez suivre [le guide](/fr/developer/guides/message-inbox/web-message-inbox/).

## Intégration du widget

Lors de l'initialisation du WebSDK de Pushwoosh, ajoutez le paramètre `inboxWidget` :

```txt title="Exemple"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox'
  }
}]);
```

### Déclencheur

Pour afficher le widget, vous devez spécifier un **élément déclencheur** pour le widget. N'importe quel élément DOM de la page peut servir de déclencheur. Spécifiez son ID comme « pwInbox » ou assignez un ID personnalisé au paramètre `triggerId` lors de l'initialisation du SDK.\
Lorsque le WebSDK est initialisé, le badge des messages non lus s'affiche sur l'élément déclencheur. Une fois que l'élément déclencheur est touché, le widget apparaît sur la page.

<img src="/web-push-notifications-web-inbox-widget-1.webp" alt=""/>

### Positionnement

Par défaut, le widget est situé dans la direction opposée au bord de l'écran le plus proche de l'élément déclencheur.\
Vous pouvez définir la position du widget via les paramètres de configuration :

```txt title="Exemple"
Pushwoosh.push(['init', {

  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    position: 'top'
  }
}]);
```

Par défaut, le `inboxWidget` doit être placé avant la balise de fermeture \</body>.\
Affichez le widget n'importe où sur la page comme indiqué dans l'exemple ci-dessous :

```txt title="Exemple"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {

    enable: true,
    triggerId: 'pwInbox',
    appendTo: '.widget-parent-element-class'
  }
}]);
```

La recherche d'un élément parent est effectuée par querySelector, elle nécessite donc une spécification claire d'une classe, d'un id ou d'un élément.

## Personnalisation du widget

### Personnalisation des textes

Pour personnaliser le texte du widget, ajoutez les paramètres `emptyInboxTitle` et `emptyInboxText` :

```txt title="Exemple"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    title: 'Inbox',                                 // titre du widget
    emptyInboxTitle: 'You\'re all caught up',       // titre du widget de boîte de réception vide
    emptyInboxText: 'There are no new messages. Stay tuned!'    // texte du widget de boîte de réception vide
  }
}]);
```

Le résultat ressemble à ceci :

<img src="/web-push-notifications-web-inbox-widget-2.webp" alt=""/>

### Personnalisation de l'apparence

Pour personnaliser l'**apparence** du widget, utilisez les paramètres suivants :

```txt title="Exemple"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    bgColor: '#ffffff',         // arrière-plan du widget
    borderColor: 'transparent', // couleur de la bordure du widget
    borderRadius: 4,            // rayon de la bordure du widget (px)
    widgetWidth: 350,           // largeur du widget (px)
    zIndex: 100                 // z-index
  }
}]);
```

Le **badge du nombre de messages non lus** peut être personnalisé comme suit :

```txt title="Exemple"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    badgeBgColor: '#ff4c00',    // couleur du badge
    badgeTextColor: '#ffffff'   // couleur du texte du badge
  }
}]);
```

Pour personnaliser les **propriétés du texte**, ajoutez le code suivant :

```txt title="Exemple"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    textColor: '#333333',                       // couleur du texte
    fontFamily: 'Helvetica, Arial, sans-serif', // police
    messageTitleColor: '#7a7a7a',               // couleur du titre des messages
    timeTextColor: '#c4c4c4',                   // couleur du texte de l'horodatage
    emptyInboxTitleColor: '#333333',            // couleur du titre de la boîte de réception vide
    emptyInboxTextColor: '#7a7a7a'              // couleur du texte de la boîte de réception vide
  }
}]);
```

Enfin, vous pouvez spécifier l'**icône pour la boîte de réception vide** :

```txt title="Exemple"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    emptyInboxIconUrl: 'https://pushon.pushwoosh.com/images/icon-empty-inbox.png'   // Chemin URL vers une icône
  }
}]);
```

## API

Pour ouvrir ou fermer le widget, utilisez la méthode API suivante :

```txt title="Exemple"
Pushwoosh.pwinboxWidget.toggle(open?: boolean);
```